本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,具体内容如下
首先以分享给朋友为例
1,先看官方文档
wx.onMenuShareAppMessage ({
标题:",//分享标题
描述:",//分享描述
链接:“,//分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:“,//分享图标
类型:",//分享类型,音乐、视频或链接,不填默认为链接
dataUrl:“,//如果类型是音乐或视频,则要提供数据链接,默认为空
成功:函数(){//用户确认分享后执行的回调函数
}，
取消:函数(){//用户取消分享后执行的回调函数
}
});
之前
2, vue分享踩的坑
* 1,微信分享中获取动态的url
* 2,微信二次分享自动添加的参数,,,,形式=singlemessage
* 3,vue中各个页面都可以调用分享
3,直接代码分析
为了保证每个页面都可以调起微信分享,需要在vue根组件中,添加看监听
代码
看:{//监听美元路线变化调用分享链接
" $路线”(从){
这让currentRouter=outer.currentRoute.fullPath美元;
如果(currentRouter.indexOf (userShare)==1) {//如果不是userShare分享页面,则分享另外一个接口
this.shareOut ();
其他}{
this.shareOutTwo ();//当前页面是userShare页面时分享调用另外一个接口
}
}
}，
之前
4,配给物()函数
让signStr=";//sha1加密字符串
让时间戳=1473254558;//时间戳
让nonceStr=皊hupao”;
var obj={
标题:",//标题
描述:“文字描述”,//描述
链接:“http://www.XXXXXX.com/wx/pub/sr/simpleRegister.do”,
imgUrl:“https://cache.yisu.com/upload/information/20200622/114/58310.jpg”
};
美元。ydkAjax ({
SENTYPE:“获得”,
url:这个。域美元+ '/wx/酒吧/共同/getJsApiTicket。json ',//自己服务器获取jsapi_ticket接口
参数:空,
successFc:(响应)=比;{//拼接sha1加密字符串
signStr=+ response.data jsapi_ticket=Ｊ?,noncestr=' + noncestr +”,时间戳=' +时间+ ',url=' + window.location.href;
var=SHA1签名(signStr);
wx.config ({
调试:假的,//appId appId:“wx6957b3a945a05e90”
时间戳:时间戳,//时间戳
nonceStr: nonceStr,//加密需要字符串(自己定义的)
签名:签名,//sha1加密后字符串
jsApiList: [' onMenuShareTimeline ', ' onMenuShareAppMessage ']
});
wx。准备好(函数(){//分享到朋友圈”
wx.onMenuShareTimeline ({
标题:obj.title,
链接:obj。链接,//分享链接
imgUrl: obj。imgUrl,//分享图标
成功:函数(){//console.log(“分享到朋友圈成功”)
}，
取消:函数(){//console.log(“分享到朋友圈失败”)
}
});//分享给朋友
wx.onMenuShareAppMessage ({
标题:obj。标题,//分享标题
描述:obj.desc,//分享描述
链接:obj。链接,//分享链接
imgUrl: obj。imgUrl,//分享图标
成功:函数(){//console.log(“分享到朋友成功”)
}，
取消:函数(){//console.log(“分享到朋友失败”)
}
});
})
}，
雷:假
})
之前
5,需要注意的事
* 1、url是直接通过window.location。href获取的,不是使用window.location.href.split(“#”)[0]来获取,因为我的vue项目是通过散列模式来进行路由跳转的,直接使用window.location.href.split(“#”)[0]会导致签名失败
//拼接sha1加密字符串
signStr=+ response.data jsapi_ticket=Ｊ?,noncestr=' + noncestr +”,时间戳=' +时间+ ',url=' + window.location.href
* 2,而且我们要在当前页面分享出去之后,其他用户打开之后不是当前分享出去的页面,这就需要调整配给物()函数中obj对象中参的链接数为其他页面链接
6,链接参数
上述5问题中的加密字符串汇总的url和分享对象中中链接的页面链接可以不用保持一样,因为本来就是要在当前页面分享出去其他页面的链接。网上我看到有人说这两个必须要保持一样,其实没有必要的,除非你只是简单的在vue项目中的其中一个页面做分享,然后只分享当前页面才需要让二者保持一致性。
