首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >全局分享(发送给朋友,分享到朋友圈)

全局分享(发送给朋友,分享到朋友圈)

作者头像
风花一世月
发布于 2024-03-19 05:35:20
发布于 2024-03-19 05:35:20
23800
代码可运行
举报
文章被收录于专栏:前端前端
运行总次数:0
代码可运行

1、mpShare.js(uview)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = {
    onLoad() {
        // 设置默认的转发参数
        this.$u.mpShare = {
            title: 'xxx', // 默认为小程序名称
            path: '/pages/index/welcome', // 默认为当前页面路径
            imageUrl: 'xxx' // 默认为当前页面的截图
        }
    },
    onShareAppMessage() {
        return this.$u.mpShare
    },
    // #ifdef MP-WEIXIN
    onShareTimeline() {
        return this.$u.mpShare
    }
    // #endif
}

2、main.js 引入

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)

原生

1、mpShare.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default {
    data(){
        return {
            share:{
                title:'xxx',
                path:'/pages/index/welcome',
                imageUrl:'xxx',
                desc:'',
                content:'',
            }
        }
    },
    //分享到朋友或群
    onShareAppMessage(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失败',
                    icon:'none'
                })
            }
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res) {
                uni.showToast({
                    title: '分享成功'
                })
            },
            fail(res) {
                uni.showToast({
                    title: '分享失败',
                    icon: 'none'
                })
            }
        }
    },
}

2、main.js 引入

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import mpShare from "@/static/common/js/wx/mpShare.js"
Vue.mixin(mpShare)

 里面有页面要单独设置,可以直接页面中设置覆盖

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default {
    data() {
        return {
            share:{//分享参数
                title:'分享标题',
                path:'分享地址',
                imageUrl:'分享预览图片',
                desc:'分享详情',
                content:'',
             }
        }
    },
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uniapp,通过 mixin 统一设置页面的分享 onShareAppMessage
from:https://cn.vuejs.org/v2/guide/mixins.html
Alone88
2020/06/11
4.4K0
用Promise封装UniApp的request请求
刚刚发现官方现在已经自己支持了,可以直接用不用像下面这样封装了,不过封装也不影响。
零云
2023/07/24
8380
微信小程序点击右上角三个点分享朋友圈,好友
// 发送朋友 onShareAppMessage() { const promise = new Promise(resolve => { setTimeout(() => { resolve({ title: '自定义名称' }) }, 2000) }) return { title: '自定义名称', path: '/page/index', promise
Wyc
2021/11/10
1K0
微信H5分享到朋友圈,转发朋友功能随记[通俗易懂]
最近刚做了一个微信公众号H5项目,里面包含一个分享到朋友圈和分享给好友的功能。配置白名单以及公众号js安全域名这些就不赘述了,接下来简单介绍下实现这个功能的几个前端步骤
全栈程序员站长
2022/09/05
2.2K0
Uni-APP高仿抖音|uniapp直播+小视频+聊天实例
uniapp-ttLive 一款使用uni-app+uview-ui开发的跨端短视频/直播聊天项目。
andy2018
2021/09/23
4.2K1
Uni-APP高仿抖音|uniapp直播+小视频+聊天实例
uni-app热更新实现
当软件打包安装后,我们可以上传热更新包后软件包,热更新包不会重新安装应用,软件包需要重新安装应用,不过需要注意的是使用热更新包必须保证之前打包软件的Hbuilder版本必须与当前Hbuilder相同,如果不同就使用软件包
切图仔
2022/09/08
5200
uni-app热更新实现
记一次mpvue开发完整小程序相关笔记
这是一篇历史笔记,写于9102年初,记录mpvue开发的相关坑点和常用技巧,大佬们勿喷...
Sneaker-前端公虾米
2021/12/23
7790
记一次mpvue开发完整小程序相关笔记
小程序的分享与社交功能实现
微信小程序的分享与社交功能是提升用户增长和互动的重要手段。 通过转发、群分享、动态消息等方式,小程序可以增强传播效果,提高留存率。 本文将详细解析小程序分享功能的实现,并提供实际代码示例,最后总结优化建议和参考资料。
LucianaiB
2025/01/29
7300
unicloud云开发---uniapp云开发(四)---本机手机号一键登录以及第三方登陆
univerifyStyle 数据结构样式 参考链接 https://uniapp.dcloud.io/univerify
代码哈士奇
2021/10/25
2.5K0
unicloud云开发---uniapp云开发(四)---本机手机号一键登录以及第三方登陆
微信小程序 转发、分享、预览
之前做过的微信小程序项目,则涉及到很多转发分享的功能,例如 页面的分享-到朋友圈-好友,文件(图片 doc pdf )的分享给好友等等,开发中用到的api方法和遇到的问题,今天在这里统一总结记录下。
iwhao
2024/07/01
1.8K0
小程序如何生成海报分享朋友圈
项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。
super.x
2019/07/02
1.6K0
crmeb小程序商品信息分享到朋友圈教程
小程序商品信息界面分享到朋友圈加上以下代码,适合大部分用uniapp打包的,原生小程序一般也是没问题的
PHP开发工程师
2021/04/21
7640
crmeb小程序商品信息分享到朋友圈教程
微信小程序转发朋友圈详解
这个功能目前只支持Android(在IOS高版本微信支持朋友圈打开小程序能力,但不能分享)。
有赞coder
2020/09/27
4.4K0
微信小程序转发朋友圈详解
微信小程序分享功能onShareAppMessage(options)用法分析
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菲宇
2019/10/22
8.6K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
本文先介绍了搜索结果页开发,包括搜索类型的传递、占位符设置和搜索功能实现; 再介绍了帖子详情页的开发,包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。
cutercorley
2021/02/04
2.5K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
小程序的页面生成图片分享朋友圈
1.网络图片要下载到本地,就是getimginfo和promise,具体技术细节我也不晓得。然后就是本地图片的地址和网络图片的地址不同。本地的要加../../images/+res[0].path,而网络的直接是res[0].path。本机调试看不出来,用真机调试比较容易发现问题。
hotqin888
2018/10/15
4.6K0
前端:uniapp封装网络请求笔记
uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序,大大降低了移动开发的成本。网络请求更是每个前端项目必备的技术,所以有必要进行前端网络请求的封装,今天小编给大家介绍一下,如何基于uniapp实现网络请求的简单封装,希望对新手能有所帮助!
小明互联网技术分享社区
2021/09/30
3.8K0
前端:uniapp封装网络请求笔记
Uniapp 实现全民分销功能
前段时间在掘金 app 多了一个推广中心,分享课程链接,若有其他用户从你分享的链接购买,你就可以获得一笔佣金,我们称类似的功能叫全民分销,全民分销在互联网推广中很常见,比如腾讯云、阿里云等都有,只不过叫法不一样、腾讯云叫 SCP,阿里云叫推广云大使。笔者也通过类似的活动,也获得过一些收益,由于全民分销功能使用门槛较低、传播速度快、对于平台商家和用户都是零成本的,成了互联网中热门的推广功能,本篇介绍下全民分销功能实现原理。
狂奔滴小马
2022/06/27
1.1K0
Uniapp 实现全民分销功能
微信小程序实现分享至朋友圈的功能
从基础库 2.11.3 开始,可将小程序页面分享到朋友圈。适用于内容型页面的分享,不适用于有较多交互的页面分享。
青年码农
2020/12/03
3.4K0
微信小程序实现分享至朋友圈的功能
【微信小程序】小程序自定义随机分享图片
 🍉🍉🍉大家好,我是痴心阿文,你们的学友哥 。 本章内容:微信小程序分享功能,支持自定义分享随机图片。看完需要花费5分钟,效果图如下:   🍉🍉🍉HTML 区域 <button open-type='share' type='warn' size="mini" plain="true" id='btnShare0'>推荐给好友</button>   🍉🍉🍉JS区域  //分享功能 onShareAppMessage: function (res) { var shareimg
痴心阿文
2022/11/18
1.2K0
【微信小程序】小程序自定义随机分享图片
推荐阅读
相关推荐
uniapp,通过 mixin 统一设置页面的分享 onShareAppMessage
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验