视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
vue实现微信分享功能
2020-11-27 22:03:24 责编:小OO
文档


本文实例为大家分享了vue实现微信分享功能的具体代码,供大家参考,具体内容如下

1.引入微信js

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.从后台获取签名并分享

fenxiangFun(){//详情分享
 var that = 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) {
 var u = navigator.userAgent;
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 // XXX: 修复iOS版微信HTML5 History兼容性问题
 if (isiOS && to.path !== location.pathname) {
 // 此处不可使用location.replace
 location.assign(to.fullPath)
 } else {
 next()
 }
},

下载本文
显示全文
专题