vue实现微信分享功能
本文实例为大家分享了vue实现微信分享功能的具体代码，供大家参考，具体内容如下
1.引入微信js
2.从后台获取签名并分享
fenxiangFun(){//详情分享
varthat=this;
this.$http({
url:this.changeData()+'/member/weChatShare',
method:"post",
params:{
url:window.location.href.split('#')[0]
}
}).then(function(res){
//console.log(res)
wx.config({
//debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId:res.data.appId,//必填，公众号的唯一标识
timestamp:res.data.timestamp,//必填，生成签名的时间戳
nonceStr:res.data.nonceStr,//必填，生成签名的随机串
signature:res.data.signature,//必填，签名
jsApiList:["onMenuShareAppMessage","onMenuShareTimeline"]//必填，需要使用的JS接口列表
});
wx.ready(function(){
//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//分享给朋友
wx.onMenuShareAppMessage({
title:that.projectDetail.project_name,//分享标题
desc:'卖铺宝',//分享描述
link:window.location.href.split('#')[0],//分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:that.projectPic[0],//分享图标
type:'',//分享类型,music、video或link，不填默认为link
dataUrl:'',//如果type是music或video，则要提供数据链接，默认为空
success:function(){
//用户点击了分享后执行的回调函数
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title:that.projectDetail.project_name,//分享标题
link:window.location.href.split('#')[0],//分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:that.projectPic[0],//分享图标
success:function(){
//用户点击了分享后执行的回调函数
}
});
});
wx.error(function(res){
//config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}.bind(this)).catch(function(err){
console.log("商店详情页面错误：",err)
});
},
3.ios兼容性问题
beforeRouteEnter(to,from,next){
varu=navigator.userAgent;
varisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端
//XXX:修复iOS版微信HTML5History兼容性问题
if(isiOS&&to.path!==location.pathname){
//此处不可使用location.replace
location.assign(to.fullPath)
}else{
next()
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。