npm install weixin-js-sdk
页面中引入
import wx from 'weixin-js-sdk'
methods: {
init() {
var that = this;
var url = encodeURIComponent(window.location.href.split('#')[0]);
http.post(api.getSdk,url,function(data){
let appId = data.appId;
let timestamp = data.timestamp;
let signature = data.signature;
let nonceStr = data.nonceStr;
that.initwx(appId, timestamp, signature, nonceStr);
})
},
initwx(appId, timestamp, signature, nonceStr) {
var link = window.location.href;
var imgUrl = 'https格式的图片'
var shareData = {
"imgUrl": imgUrl,// 分享显示的缩略图地址 ,根据自己情况而定
"link": link,// 分享地址
"desc": '描述',// 分享描述
"title": '标题'// 分享标题
};
wx.config({
debug: false,//调试模式
appId: appId,// 公众号的唯一标识
timestamp: timestamp,//生成签名的时间戳
nonceStr: nonceStr,//生成签名的随机串
signature: signature,
jsApiList: ['onMenuShareTimeline', //
'onMenuShareAppMessage'] //
});
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
});
wx.ready(function() {
wx.onMenuShareTimeline(shareData); //分享到朋友圈
wx.onMenuShareAppMessage(shareData); //分享给朋友
});
}
},
created(){
this.init();
},
备注:ios第二次分享 会出现invalid signature
原因分享后出现微信会在链接会自动加以下字符串,再次签名的时候,因为&特殊字符传给后台,后台未处理,需要对链接encodeURIComponent处理,就不会出现invalid问题
朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0