Vue implémente la méthode de partage d'autres pages sur la page actuelle-js tutoriel-php.cn

Vue implémente la méthode de partage d'autres pages sur la page actuelle

小云云

Libérer： 2017-12-12 13:39:05

original

2715 Les gens l'ont consulté

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

L'exemple dans cet article partage le code spécifique pour l'affichage du partage Vue WeChat pour votre référence. Le contenu spécifique est le suivant

Prenons d'abord le partage avec des amis comme exemple

1 , lisez d'abord les documents officiels

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. Les pièges du partage de vues

* 1. Obtenez une URL dynamique dans le partage WeChat

* 2. Le partage secondaire WeChat ajoute automatiquement des paramètres form=singlemessage
* 3. Chaque page en vue peut appeler le partage

3. Analyse directe du code

Afin de garantir que chaque page peut activer le partage WeChat, vous devez ajouter la fonction de surveillance de la montre

code

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

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 window.location.href , au lieu d'utiliser. window.location.href.split(“#”)[0] pour obtenir, car mon projet vue utilise le mode de hachage pour effectuer des sauts de routage, j'utilise directement window.location.href.split(“#” )(0] provoquera la signature échoue

//拼接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, après avoir partagé la page actuelle, les autres utilisateurs ne partageront pas la page actuelle après l'avoir ouverte. , cela nécessite d'ajuster le paramètre link dans l'objet obj dans la fonction shareOut() pour créer un lien vers d'autres pages

6. Le paramètre link

L'url du résumé de la chaîne cryptée dans le 5 ci-dessus questions et Les liens de page dans le lien dans l'objet de partage n'ont pas besoin de rester les mêmes, car l'objectif initial est de partager des liens vers d'autres pages de 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.

Recommandations associées :

Quelles sont les instructions couramment utilisées dans Vue.js

Méthodes d'instructions personnalisées Vue.js

Comment vue utilise les variables globales

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!