一、前言
微信自定义分享是一个很常见的功能,主要是利用微信JS-SDK实现自定义的分享效果。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫等微信特有的能力,为微信用户提供更优质的网页体验。
官方文档写的很详细。这里主要总结一下自定义分享的过程。
二、前期准备
1、微信服务号一个,最好通过实名认证的,不然没有权限去调用一些接口;
2、一个域名,当然最好是备案的。
3、微信开发者工具,方便本地调试。
三、详细步骤
1、查看AppId,AppSecret以及绑定域名 (查看官方文档)
2、引入js文件
<script src="//res.wx.qq.com/open/js/jweixin-1.3.0.js" type="text/javascript"></script>
3、通过AppId和AppSecret请求accessToken,然后通过accessToken获取jsapi_ticket,生成config接口所需参数。我们这里是后台写好的jssdk接口来获取所需参数。
4、在wx.config接口注入权限配置
在第3步的回调中注入参数:
wx.config({
debug: o.debug === 'true',//可以通过在接口加上这个参数来开启调试模式
appId, // 必填,公众号的唯一标识
timestamp: parseInt(timestamp, 10), // 必填,生成签名的时间戳
signature, // 必填,签名,见附录1
jsApiList: o.jsApiList,
fail(res) {
if (o.debug === 'true') {
window.alert('fail:jssdk授权配置错误')
}
},
success(res) {
if (o.debug === 'true') {
alert(`OK:${JSON.stringify(res)}`)
}
}
})
5、通过ready接口处理成功验证
weixinShare(options, callback) {
let defaults, o
defaults = {
title: '****', // 分享标题
link: location.href, // 分享链接
imgUrl: `${location.protocol}${require('@/assets/logo.png')}`, // 分享图标
desc: '*************',
success() {
// 用户确认分享后执行的回调函数
},
cancel() {
// 用户取消分享后执行的回调函数
}
}
o = Object.assign(JSON.parse(JSON.stringify(defaults)), options || {})
wx.onMenuShareTimeline(o) // 分享到朋友圈
wx.onMenuShareAppMessage(o) // 分享给朋友
wx.onMenuShareQQ(o) // 分享到QQ
wx.onMenuShareWeibo(o) // 分享到腾讯微博
wx.onMenuShareQZone(o) // 分享到QQ空间
},
四、遇到一个问题
项目中期把http迁移到https的时候发现,微信报错,‘“invalid url domain”,开始很是奇怪,因为前期公众号绑定的是域名,没有带协议头,按道理应该自动识别协议头才对。不过事实上不是这样的,迁移到https的时候应该在后台重新备案,绑定需要一段时间才能通过。
五、总结
1、都是很传统的做法
2、注意结合debug模式去调试,如果有问题,可以看到微信的报错信息了。
六、参考
http://www.cnblogs.com/joshua317/p/4761948.html