Vue implementiert die Methode zum Teilen anderer Seiten auf der aktuellen Seite

In diesem Artikel wird hauptsächlich die WeChat-Sharing-Funktion von Vue vorgestellt, die es ermöglicht, andere Seiten zu teilen. Interessierte Freunde können darauf verweisen.

Das Beispiel in diesem Artikel teilt den spezifischen Code für die Vue WeChat-Freigabeanzeige als Referenz. Der spezifische Inhalt ist wie folgt

Nehmen Sie zunächst das Teilen mit Freunden als Beispiel

1, lesen Sie zuerst die offiziellen Dokumente

wx.onMenuShareAppMessage({

  title: '', // 分享标题

  desc: '', // 分享描述

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

  imgUrl: '', // 分享图标

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

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

  success: function () {

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

  },

  cancel: function () {

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

  }

});

2. Fallstricke beim Vue-Sharing

* 1. Erhalten Sie eine dynamische URL in der WeChat-Freigabe
* 2. Die sekundäre WeChat-Freigabe fügt automatisch Parameter form=singlemessage hinzu
* 3. Jede Seite in Vue kann die Freigabe aufrufen

3. Direkte Code-Analyse

Um sicherzustellen, dass jede Seite die WeChat-Freigabe aktivieren kann, müssen Sie den 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 hinzufügen

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. Dinge, die Sie beachten sollten

*1. Die URL wird direkt über window.location.href abgerufen, anstatt sie zu verwenden window.location.href.split(“#”)[0] zu erhalten, da mein Vue-Projekt den Hash-Modus verwendet, um Routing-Sprünge durchzuführen, verwende ich direkt window.location.href.split(“#” )[0] wird dazu führen Die Signatur schlägt fehl

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

*2 Darüber hinaus geben andere Benutzer die aktuelle Seite nicht weiter, nachdem sie sie geöffnet haben , dazu muss der Link-Parameter im obj-Objekt in der shareOut()-Funktion angepasst werden, um auf andere Seiten zu verlinken

6 Der Link-Parameter

Die URL der verschlüsselten Zeichenfolgenzusammenfassung in den obigen 5 Fragen und Die Seitenlinks im Link im Freigabeobjekt müssen nicht gleich bleiben, da der ursprüngliche Zweck darin besteht, Links zu anderen Seiten auf der aktuellen Seite zu teilen. Ich habe jemanden im Internet gesehen, der sagte, dass diese beiden gleich bleiben müssen. Tatsächlich ist dies nicht erforderlich, es sei denn, Sie teilen einfach eine der Seiten im Vue-Projekt und teilen dann nur die aktuelle Seite, um die beiden konsistent zu halten.

Verwandte Empfehlungen:

Was sind die häufig verwendeten Anweisungen in Vue.js

Benutzerdefinierte Anweisungsmethoden von Vue.js

Wie Vue globale Variablen verwendet

Das obige ist der detaillierte Inhalt vonVue implementiert die Methode zum Teilen anderer Seiten auf der aktuellen Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!