vue微信分享的实现(在当前页面分享其他页面)

首先以分享给朋友为例

1、先看官方文档

wx.onMenuShareAppMessage({  title: '', // 分享标题  desc: '', // 分享描述  link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致  imgUrl: '', // 分享图标  type: '', // 分享类型,music、video或link，不填默认为link  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空  success: function () {    // 用户确认分享后执行的回调函数  },  cancel: function () {    // 用户取消分享后执行的回调函数  }});

2、vue分享踩的坑

* 1、微信分享中获取动态的url
* 2、 微信二次分享自动添加的参数     form=singlemessage
* 3、vue中各个页面都可以调用分享

3、直接代码分析

为了保证每个页面都可以调起微信分享,需要在vue根组件中,添加 watch监听

代码

watch: {    // 监听 $route 变化调用分享链接    "$route"(to, from) {      let currentRouter = this.$router.currentRoute.fullPath;  //      if(currentRouter.indexOf('userShare') == -1){   //如果不是userShare分享页面,则分享另外一个接口        this.shareOut();      }else{        this.shareOutTwo();     //当前页面是userShare页面时分享调用另外一个接口         }    }  },

4、shareOut()函数

      let signStr = '';      //sha1加密字符串      let timestamp = 1473254558; //时间戳      let nonceStr = 'shupao';      var obj = {        title:"",        //标题        desc:"文字描述",     //描述        link:"http://www.XXXXXX.com/wx/pub/sr/simpleRegister.do",        imgUrl:"http://XXXXXXXXX.com/picactive.jpg"      };      this.$ydkAjax({        SENTYPE: "GET",        url: this.$domain + '/wx/pub/common/getJsApiTicket.json', //自己服务器获取jsapi_ticket接口        params: null,        successFc: (response) => {          //拼接sha1加密字符串          signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href;          var signature = SHA1(signStr);          wx.config({            debug: false,            appId: "wx6957b3a945a05e90",   //appId            timestamp: timestamp,      //时间戳            nonceStr: nonceStr,       //加密需要字符串(自己定义的)                signature: signature,      //sha1加密后字符串            jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage']          });          wx.ready(function () {            //分享到朋友圈"            wx.onMenuShareTimeline({              title: obj.title,              link: obj.link, // 分享链接              imgUrl: obj.imgUrl, // 分享图标              success: function () {                // console.log('分享到朋友圈成功')              },              cancel: function () {                // console.log('分享到朋友圈失败')              }            });            //分享给朋友            wx.onMenuShareAppMessage({              title: obj.title, // 分享标题              desc: obj.desc, // 分享描述              link: obj.link, // 分享链接              imgUrl: obj.imgUrl, // 分享图标              success: function () {                // console.log('分享到朋友成功')              },              cancel: function () {                // console.log('分享到朋友失败')              }            });          })        },        isLayer: false      })