So implementieren Sie die aktuelle Seitenfreigabefunktion anderer Seiten in Vue

Dieser Artikel stellt hauptsächlich die Vue WeChat-Freigabefunktion im Detail vor. Vue implementiert die aktuelle Seite, um andere Seiten zu teilen, die einen gewissen Referenzwert haben.

Die Beispiele in diesem Artikel sind für alle Der spezifische Code für die Vue-Sharing-Anzeige wird zu Ihrer Information geteilt. Der spezifische Inhalt lautet wie folgt: Nehmen Sie zunächst das Teilen mit Freunden als Beispiel.

Lesen Sie zuerst die offizielle Dokumentation

wx.onMenuShareAppMessage({

  title: '', // 分享标题

  desc: '', // 分享描述

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

  imgUrl: '', // 分享图标

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

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

  success: function () {

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

  },

  cancel: function () {

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

  }

});

2, Vue-Sharing-Fallstricke

* 1. Erhalten Sie eine dynamische URL bei der WeChat-Freigabe

* 2. Parameter, die automatisch durch die WeChat-Sekundärfreigabe hinzugefügt werden, form=singlemessage

* 3. Jeweils Seite in Vue hat Sie können die Freigabe aufrufen

3. Direkte Codeanalyse

Um sicherzustellen, dass jede Seite die WeChat-Freigabe aufrufen kann, müssen Sie Überwachungsüberwachung

Code<🎜 hinzufügen >

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

in der Vue-Root-Komponente

4. Dinge, die es zu beachten gilt

*1. Die URL wird direkt über window.location.href abgerufen Verwenden von window.location.href .split(„#“)[0] zum Erhalten, da mein Vue-Projekt den Hash-Modus zum Weiterleiten von Sprüngen verwendet, führt die direkte Verwendung von window.location.href.split(„#“)[0] dazu, dass Signatur schlägt fehl.

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
      })

*2 Darüber hinaus wird die aktuelle Seite von anderen Benutzern geöffnet und es handelt sich nicht um die aktuell freigegebene Seite. Dies erfordert eine Anpassung des Link-Parameters im obj-Objekt shareOut()-Funktion zum Verknüpfen mit anderen Seiten

6. Link-Parameter

Die URL der verschlüsselten Zeichenfolgenzusammenfassung in den obigen 5 Fragen und der Seitenlink im Link im Freigabeobjekt Sie müssen nicht gleich bleiben, da sie ursprünglich für die Weitergabe auf der aktuellen Seite gedacht sind. Links zu anderen Seiten. 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Schwierigkeiten bei JavaScript-Array-Operationen (ausführliches Tutorial)

So verwenden Sie Vue, um nahtlose Bildlaufkomponenten zu implementieren

So implementieren Sie Flux auf knockoutjs

So erstellen Sie ein Front-End-Framework für die universelle Datensimulation (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die aktuelle Seitenfreigabefunktion anderer Seiten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!