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() } },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。