Vue implements the method of sharing other pages on the current page

This article mainly introduces the WeChat sharing function of vue in detail. Vue implements the current page to share other pages, which has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

The example in this article shares the specific code for vue WeChat sharing and display for your reference. The specific content is as follows

First, take sharing with friends as an example

1 , first read the official document

wx.onMenuShareAppMessage({

  title: '', // 分享标题

  desc: '', // 分享描述

  link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

  imgUrl: '', // 分享图标

  type: '', // 分享类型,music、video或link，不填默认为link

  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

  success: function () {

    // 用户确认分享后执行的回调函数

  },

  cancel: function () {

    // 用户取消分享后执行的回调函数

  }

});

2. Pitfalls in vue sharing

* 1. Get dynamic url
in WeChat sharing * 2. WeChat secondary sharing automatically adds parameters form=singlemessage
* 3. Each page in vue can call sharing

3. Direct code analysis

In order to ensure Each page can activate WeChat sharing. You need to add watch monitoring
Code

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() function# in the vue root component

##

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 + '&timestamp=' + 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
      })

5. Things to note

*1. The url is obtained directly through window.location.href, not using window.location .href.split(“#”)[0] to obtain, because my vue project uses hash mode for routing jumps, directly using window.location.href.split(“#”)[0] will cause Signature failed

//拼接sha1加密字符串
signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + window.location.href

*2. Moreover, after we share the current page, other users will open it and it will not be the current shared page, so we need to adjust shareOut. The link parameter in the obj object in the () function is the link to other pages

6, the link parameter

The url of the encrypted string summary in the above 5 questions and the page link in the link in the shared object You don't need to keep it the same, because the original purpose is to share links to other pages on the current page. I saw someone on the Internet saying that these two must remain the same. In fact, it is not necessary, unless you simply share one of the pages in the Vue project, and then only share the current page to keep the two consistent.

Related recommendations:

What are the commonly used instructions in Vue.js

Vue.js custom instruction method

How vue uses global variables

The above is the detailed content of Vue implements the method of sharing other pages on the current page. For more information, please follow other related articles on the PHP Chinese website!