uniapp实现微信小程序全局分享的示例代码

uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能。主要使用 Vue.js 的 全局混入 概念。 下面直接上 实现步骤和代码: 创建全局分享内容文件 1、创建一个全局…

uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能。主要使用 Vue.js 的 全局混入 概念。

下面直接上 实现步骤和代码:

创建全局分享内容文件

1、创建一个全局分享的 js 文件。示例文件路径为:@/common/share.js,在该文件中定义全局分享的内容:

exportdefault{data(){return{//默认的全局分享内容share:{title:'全局分享的标题',path:'/pages/home/home',//全局分享的路径imageUrl:'../../static/imgs/fenxiang-img.png',//全局分享的图片(可本地可网络)}}},//定义全局分享//1.发送给朋友onShareAppMessage(res){return{title:this.share.title,path:this.share.path,imageUrl:this.share.imageUrl,}},//2.分享到朋友圈onShareTimeline(res){return{title:this.share.title,path:this.share.path,imageUrl:this.share.imageUrl,}},}引入并全局注册该文件

2、在项目的 main.js 文件中引入该 share.js 文件并使用Vue.mixin() 方法将之全局混入:

//导入并挂载全局的分享方法importsharefrom'@/common/share.js'Vue.mixin(share)

下面来看一下全局的分享效果:

uniapp实现微信小程序全局分享的示例代码uniapp实现微信小程序全局分享的示例代码

自定义页面分享内容

3、如果在特定页面需要自定义分享内容,也仍旧可以使用页面的onShareAppMessage()和onShareTimeline()方法自定义分享的内容,全局的分享会被页面定义的分享内容覆盖。示例如下:

onLoad(){},//自定义此页面的转发给好友(已经有全局的分享方法,此处会覆盖全局)onShareAppMessage(res){return{title:'页面分享的标题',path:'/pages/my/my',imageUrl:'../../static/imgs/mylogo.png'}},//自定义页面的分享到朋友圈onShareTimeline(res){return{title:'页面分享的标题',path:'/pages/my/my',imageUrl:'../../static/imgs/mylogo.png'}},

注:onShareAppMessage() 和onShareTimeline() 方法是和onLoad ,methods 等方法同级的。

到此这篇关于uniapp 实现微信小程序全局分享的示例代码的文章就介绍到这了,更多相关uniapp 小程序全局分享内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/29816.html;
(0)
上一篇 2022年12月15日 下午4:17
下一篇 2022年12月15日 下午4:17

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部