How to implement the current page sharing function of other pages in vue

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.

The examples in this article are for everyone. The specific code for vue WeChat sharing display is shared for your reference. The specific content is as follows

First, take sharing with friends as an example

1. First read the official documentation

wx.onMenuShareAppMessage({

  title: '', // 分享标题

  desc: '', // 分享描述

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

  imgUrl: '', // 分享图标

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

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

  success: function () {

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

  },

  cancel: function () {

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

  }

});

2 , pitfalls of vue sharing

* 1. Obtain dynamic url in WeChat sharing
* 2. Parameters automatically added by WeChat secondary sharing form=singlemessage
* 3. Each page in vue has You can call sharing

3. Direct code analysis

In order to ensure that each page can call up 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页面时分享调用另外一个接口   
      }
    }
  },

in the vue root component

4. shareOut() function

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 the signature to fail.

//拼接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. This requires adjusting the link parameter in the obj object in the shareOut() function to link to other pages.

6. Link parameters

The URL of the encrypted string summary in the above 5 questions and the page link in the link in the sharing object do not need to remain the same, because they are originally intended to be shared on the current page. Links to other pages. 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Difficulties in JavaScript array operations (detailed tutorial)

How to implement seamless scrolling components using vue

How to implement flux on knockoutjs

How to build a front-end universal data simulation framework (detailed tutorial)

The above is the detailed content of How to implement the current page sharing function of other pages in vue. For more information, please follow other related articles on the PHP Chinese website!