步骤
- 首先需要一个微信公众号，需要在公众号设置中配置【JS接口安全域名】
- 页面引入JS接口文件(支持https)：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
- 通过config接口注入权限验证配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填， 公众号的唯一标识
timestamp: '', // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '', // 必填，签名
jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
})
- 通过ready接口处理成功验证
wx.ready(function(){
//分享给朋友 1.4
wx.updateAppMessageShareData({
title: '分享标题',
desc: '分享描述',
link: '分享链接', // 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '分享图标',
success: function(){
// 配置成功
}
})
//分享到朋友圈 1.4
wx.updateTimelineShareData({
title: '分享标题',
link: '分享链接',
imgUrl: '分享图标',
success: function(){
// 配置成功
}
})
})
重点说一下配置这一步，如何获取签名，也就是wx.config这里的配置。如何获取签名，签名的算法需要后端的接口来配合获取，所以我们只需要调用后端的接口就可以。
直接看代码（axios get请求）
情况一：url后面带一个参数
var url = 后端接口?url=https://安全域名/code?name=zhufengli
this.$axios.get(url).then(res=>{
// 成功
}).catch(err=>{
})
image.png
情况二：url后面带多个参数
var url = 后端接口?url=https://安全域名/code?name=zhufengli&age=18
this.$axios.get(url).then(res=>{
// 虽然是成功的，但是参数会被当成两个
// url、age
}).catch(err=>{
})
image.png
差点吐血，因为用手机，所以没有想到是这个问题，后面修改之后，代码如下：
var url = 后端接口?url=https://安全域名/code?name=zhufengli&age=18
this.$axios.get(后端接口,{
params:{
url: 'https://安全域名/code?name=zhufengli&age=18'
}
}).then(res=>{
// 成功
}).catch(err=>{
})
image.png
看出差别了吧，就这个问题搞得我心态炸裂。
