您现在的位置是:网站首页>前端技术>VueVue
uniapp H5实现公众号分享封装并跳转回原页面
神夜2020-01-12 17:33:14【Vue】3961人已围观文章来源:神夜个人博客
简介uniapp做公众号分享时跳转回原页面功能实在困扰了我很久,终于花了两天时间给他弄出来了,也借鉴了网友的方法,我将其封装了一下,可在需要分享的页面去直接调用即可。
uniapp做公众号分享时跳转回原页面功能实在困扰了我很久,终于花了两天时间给他弄出来了,也借鉴了网友的方法,我将其封装了一下,可在需要分享的页面去直接调用即可。
下面进入正题,实现分享必须要先获取授权签名。这些由后台返回。主要前端要传网址给后台获取签名,获取签名成功后,初始化分享配置。主要是分享连接要转码一下 。然后跳转到static文件夹解码,再跳回原页面。
1、封装的方法在util.js文件
//分享功能 /** title 标题 desc 描述 link 分享连接 img分享图片 debug 开启调试 **/ const h5share = async (title,desc,link,img,debug) => { var url = location.href.split('#')[0] const json = await api.apiArray.getSgture({method: 'POST',query:{ url: url}}) if(json.data.returnCode==0){ wx.config({ debug: debug || false, appId: json.data.result.appid, timestamp: json.data.result.timestamp, nonceStr: json.data.result.noncestr, signature: json.data.result.sgture, jsApiList: [ 'updateAppMessageShareData', // 配置分享好友 'updateTimelineShareData', // 配置分享朋友圈 ], }) wx.ready(function(){ let links = api.apiUrl+'/static/share.html?shareUrl='+encodeURIComponent(api.apiUrl+'/#/'+link); if(title==""){ title="镇报"} if(desc==""){ desc = '本地一站式便民资讯平台'} wx.updateAppMessageShareData({ title:title, desc:desc, link:links, imgUrl:img, }) wx.updateTimelineShareData({ title:title, link:links, imgUrl:img }) }) } }
2、在.vue页面调用
let url = 'pages/act/index?isshare=true'; //分享URL ,isshare=true 是表示分享进入页面的,可判断 是分享进入的 这时可做一些显示 返回首页 的操作。因为分享进来你点击返回可能就不起作用了。
util.h5share('分享标题','分享描述',url,'分享图片');
3、在项目根目录 static/share.html 下面建一个静态文件 share.html 内容如下:
本栏推荐

猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们
