H5页面微信分享流程和实现(uni-app)
静的小白菜 时间:2022-10-02
适用场景:
通过uni-app实现的H5页面分享功能。
要求链接必须在微信端内打开。手机上浏览器打开无效。
流程描述:
第一步安装js-sdk。
方式一:NPM安装方式
npm install jweixin-module --save
- 1
方式二:下载使用方式。(本人用的就是这种)
在 uniapp 中可以使用模块方式引用微信 js-sdk ,微信官网直接下载的使用有问题。
下载地址:https://unpkg.com/jweixin-module@1.6.0/lib/index.js
//npm安装的引用var jweixin = require('jweixin-module')//自己下载根据路径引用var jweixin = require('../../common/jweixin-module')
- 1
- 2
- 3
- 4
第二步需要转发页面添加代码。
this.$u.api.wxshareApi是封装好的请求数据的接口。surl是地址用于后端请求微信签名,具体操作交给后端。我们这边可以给他传递surl,也可以让后端用项目在网上的根域名直接请求。
以下代码是我修改后的,原来代码地址:https://ask.dcloud.net.cn/article/36284
//引入资源var jweixin = require('../../common/jweixin-module')export default { data() { return { wxsharetip:false } }, methods: { wxshare(item){ //#ifdef H5 //据说可以解决URL中带参数的问题,前台用的js编码,后台php解码 //var surl = encodeURIComponent(window.location.>> { jweixin.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名,见附录1 surl: res.data.surl, //自己添加的,debug为true的时候可以网页打印出对应的URL是否正确 jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] }); jweixin.ready(()=> { //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) jweixin.updateAppMessageShareData({ title: '标题', // 分享标题 desc: "描述内容", // 分享描述 link: "链接", // 分享链接 imgUrl: '显示图片', // 分享图标 success: res => { //点击分享时提示用户分享图, this.wxsharetip = true }, cancel: function() { // 用户取消分享后执行的回调函数 } }); //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0) jweixin.updateTimelineShareData({ title: '标题', // 分享标题 link: '链接', // 分享链接 imgUrl: '显示图片', // 分享图标 success: res => { //点击分享时提示用户分享图, this.wxsharetip = true }, cancel: function() { // 用户取消分享后执行的回调函数 } }); }) }) //#endif } }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
具体流程展示。
在我的项目中现在页面引用js-sdk文件,当用户点击分享时,将要分享的数据标题,描述,图片传递到wxshare()中。通过wxsharetip这个变量提示用户分享图是否显示,this.wxsharetip = true。
步骤一:点击分享
步骤二:提示用户点击三个点那个按钮。
提示图片UI还没有出图,先凑合着看看
步骤三:用户自己选择分享好友还是朋友圈
步骤四:最终结果展示
需要注意:
1:后端请求微信加密的地址,一定要和项目放置的地址域名一致。
2:这里功能只适用于H5页面,且用户在微信内打开,在浏览器打开无效。
3:分享的链接和加密的地址需要同一域名
特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。