如何做微信分享
好久没有写自己在项目所遇到的问题以及解决办法了，外包公司太忙。最近做公众号项目比较多。今天抽空写一些最近在项目遇到的问题吧
首先谈谈微信分享吧
第一步 作为前端必须要和后台商量是 前端去获取code来跟后台openId,还是后台自己获取code传openId给前端。
两种办法都是可行的，个人建议呢，(1)后台获取code 在链接里传openId给前端，前端通过截取url里的参数来保存openId，用localStorage.setItem()来储存取到的openId。以下是截取openId 的函数
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var t = window.location.href.split("=")[1].split("#")[0];
window.localStorage.setItem('openid', t);
},调用getQueryString() 即可
（2）第二种 前端自己获取code 也简单 但是因为vue是一个页面进行路由去其他页面的 所以可能导致也页面刷新，用户体验感不太好。
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid= &redirect_uri=" + "&response_type=code&scope=snsapi_base&state=1#wechat_redirect"1.appId 填写自己的（公众号号）
2.redirect_uri (填写后台给你能跳转到你页面的地址）
3. GetCode(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(decodeURI(r[2]));
return null;
},
4.获取到code后调后台接口 取到oppenId
5.window.localStorage.setItem('wxOpenId', response.data.wxOpenId); 储存下来
第二步 分享
axios.post(HOSTS + '/app/beforeShare?token=' + window.localStorage.getItem('token') + '&url=' + encodeURIComponent(window.location.href.split('#')[0]))
.then((response) => {
that.hturl = response.data.map.url
wx.config({
debug: false,
appId: response.data.map.appid,
timestamp: response.data.map.timestamp,
nonceStr: response.data.map.nonceStr,
signature: response.data.map.signature,
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline'
]
});
})
.catch((error) => {
})
wx.ready(function() {
console.log('我是微信分享')
// 分享给朋友
wx.onMenuShareAppMessage({
title: 'zd', // 分享标题
desc: 'zd', // 分享描述
link: that.hturl, // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
window.alert('已分享给朋友');
axios.post(HOSTS + '/app/share?token=' + window.localStorage.getItem('token') + '&type=1' + '&shareType=3')
.then((response) => {
that.hturl = response.data.map.url
wx.config({
debug: false,
appId: response.data.map.appid,
timestamp: response.data.map.timestamp,
nonceStr: response.data.map.nonceStr,
signature: response.data.map.signature,
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline'
]
});
})
.catch((error) => {
})
},
cancel: function() {
// 用户取消分享后执行的回调函数
},
fail: function(res) {
window.alert('我是测试！' + JSON.stringify(res));
}
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title: 'zd', // 分享标题
desc: 'zf', // 分享描述
link: that.hturl,
imgUrl: '', // 分享图标
success: function() {
window.alert('已分享到朋友圈');
},
cancel: function() {
// 用户取消分享后执行的回调函数
},
fail: function(res) {
window.alert(JSON.stringify(res));
}
});
});
代码模块我将步骤写法都附上了
（1）调用后台接口 取到appId timestamp nonceStr signature四个参数去请求 微信 四个参数一个都不能错！！！
（2）在上述调试中 我测试时前端启动dbug模式 debug: true，
一直报错 签名错误 后台返回给我的 signature和我传给微信的一样呀。为什么还是错误呢？于是把后台的签名的拿去验证后，发现后台返回的验证错误，（签名算法错误）。后台改可签名但是还是报了 签名错误。
于是前后台一起找 最终解决办法 前端用encodeURIComponent进行连接地址转化 后台得到转化的 进行签名算法。
当返回config:ok好 分享正常使用了。在
title: '益管家在线栏目直播进行中', // 分享标题
desc: '打造24小时健康好生活', // 分享描述
link: that.hturl, // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
传入你要分享出去的标题 图片 描述就好
由于业务需要我们项目需要分享成功后得到一些信息 所以 在成功后请求了后台接口
欢迎提意见订正 （QQ：1150801771）