Comment implémenter la fonction actuelle de partage de pages d'autres pages dans vue-js tutoriel-php.cn

Comment implémenter la fonction actuelle de partage de pages d'autres pages dans vue

亚连

Libérer： 2018-06-22 18:14:18

original

3030 Les gens l'ont consulté

Cet article présente principalement en détail la fonction de partage de Vue WeChat. Vue implémente la page actuelle pour partager d'autres pages, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont. pour tout le monde Le code spécifique pour le partage et l'affichage de vue WeChat est partagé pour votre référence. Le contenu spécifique est le suivant

Prenons d'abord le partage avec des amis comme exemple

1. documents

wx.onMenuShareAppMessage({

  title: &#39;&#39;, // 分享标题

  desc: &#39;&#39;, // 分享描述

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

  imgUrl: &#39;&#39;, // 分享图标

  type: &#39;&#39;, // 分享类型,music、video或link，不填默认为link

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

  success: function () {

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

  },

  cancel: function () {

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

  }

});

Copier après la connexion

2. Pièges dans le partage de vue

* 1. Obtenir une URL dynamique dans le partage WeChat
* 2. Paramètres automatiquement ajoutés par le partage secondaire WeChat form=singlemessage
* 3. Chacune des pages de vue peut appeler le partage

3 Analyse directe du code

Afin de garantir que chaque page peut appeler le partage WeChat, vous devez ajouter une surveillance de la montre
code. <🎜 dans le composant racine vue >

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

Copier après la connexion

4. Fonction shareOut()

let signStr = &#39;&#39;;      //sha1加密字符串
let timestamp = 1473254558; //时间戳
let nonceStr = &#39;shupao&#39;;
      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 + &#39;/wx/pub/common/getJsApiTicket.json&#39;, //自己服务器获取jsapi_ticket接口
        params: null,
        successFc: (response) => {
          //拼接sha1加密字符串
          signStr = &#39;jsapi_ticket=&#39; + response.data.data + &#39;&noncestr=&#39; + nonceStr + &#39;&timestamp=&#39; + timestamp + &#39;&url=&#39; + window.location.href;
          var signature = SHA1(signStr);
          wx.config({
            debug: false,
            appId: "wx6957b3a945a05e90",   //appId
            timestamp: timestamp,      //时间戳
            nonceStr: nonceStr,       //加密需要字符串(自己定义的)    
            signature: signature,      //sha1加密后字符串
            jsApiList: [ &#39;onMenuShareTimeline&#39;, &#39;onMenuShareAppMessage&#39;]
          });
          wx.ready(function () {
            //分享到朋友圈"
            wx.onMenuShareTimeline({
              title: obj.title,
              link: obj.link, // 分享链接
              imgUrl: obj.imgUrl, // 分享图标
              success: function () {
                // console.log(&#39;分享到朋友圈成功&#39;)
              },
              cancel: function () {
                // console.log(&#39;分享到朋友圈失败&#39;)
              }
            });
            //分享给朋友
            wx.onMenuShareAppMessage({
              title: obj.title, // 分享标题
              desc: obj.desc, // 分享描述
              link: obj.link, // 分享链接
              imgUrl: obj.imgUrl, // 分享图标
              success: function () {
                // console.log(&#39;分享到朋友成功&#39;)
              },
              cancel: function () {
                // console.log(&#39;分享到朋友失败&#39;)
              }
            });
          })
        },
        isLayer: false
      })

Copier après la connexion

5 Choses à noter

*1 L'URL est obtenue directement via la fenêtre. .location.href, pas Utilisez window.location.href.split("#")[0] pour l'obtenir, car mon projet vue utilise le mode de hachage pour les sauts de routage, utilisez donc window.location.href.split("#" )[ directement 0] entraînera l'échec de la signature

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

Copier après la connexion

*2 De plus, une fois la page actuelle partagée, d'autres utilisateurs l'ouvriront et ce ne sera pas la page partagée actuelle. l'objet obj dans la fonction shareOut(). Le paramètre link in est le lien vers d'autres pages

6. Le paramètre link

L'url du résumé de la chaîne cryptée dans les 5 questions ci-dessus et le lien de page dans le lien dans l'objet de partage n'a pas besoin de rester le même, car le but initial est de partager des liens vers d'autres pages sur la page actuelle. J'ai vu quelqu'un sur Internet dire que ces deux doivent rester les mêmes. En fait, ce n'est pas nécessaire, à moins que vous ne partagiez simplement l'une des pages du projet Vue, puis que vous ne partagiez que la page actuelle pour que les deux restent cohérentes.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.