vue项目前端添加微信分享

我就是我 2021-12-11 08:53 519阅读 1赞

## vue中的微信分享 ##

*  微信分享功能需要在每个页面刚刚打开的时候就初始化,然后用户点击分享才可以调用微信自带的分享.
 *  微信中限制其他的分享插件, 只能使用微信自己的分享功能  
    ![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_1_color_FFFFFF_t_70]
 *  在`index.html`文件夹中引入微信的**js**文件

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
        <title></title>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
      </head>
    
      <body>
        <div id="app"></div>
        
      </body>
    </html>

*  在`main.js` 添加微信分享功能的方法
    
     *  在这里要注意,
     *  在方法中调用的接口`"/wxApi/jsConfig"`是通过后台获取的**微信签名**以及**appId**等参数, 此签名具有时效性, 所以在用户每次打开页面的时候获取一次
     *  而此方法的参数 `wxData` 是用户在页面自定义的分享信息

// 微信分享公用方法, 所有的需要分享的页面都会调用
    async function _weiXin(wxData) { 
      var params = { 
        url: wxData.url
      };
      var res = await axios.postSMSCode("/wxApi/jsConfig", params); // 从后台获取微信签名
      let wxDataRsps = res.data.data;
      // 判断是否成功
      if (res.data.errcode == this.ajax.code) { 
        wx.config({  // 设置微信参数
          debug: false,
          appId: wxDataRsps.appId,// 必填，公众号的唯一标识
          timestamp: wxDataRsps.timestamp, // 必填，生成签名的时间戳
          nonceStr: wxDataRsps.nonceStr,// 必填，生成签名的随机串
          signature: wxDataRsps.signature,// 必填，签名
          jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"]// 必填，需要使用的JS接口列表
        });
        wx.ready(function() { 
          wx.onMenuShareAppMessage({ 
            title: wxData.title, // 分享标题
            desc: wxData.desc, // 分享描述
            link: wxData.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: wxData.imgUrl, // 分享图标
            success: function() { 
              // 用户确认分享后执行的回调函数
              console.log("分享成功");
            },
            cancel: function() { 
              // 用户取消分享后执行的回调函数
              console.log("取消分享");
            }
          });
          wx.onMenuShareTimeline({ 
            title: wxData.title, // 分享标题
            desc: wxData.desc, // 分享描述
            link: wxData.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: wxData.imgUrl, // 分享图标
            success: function() { 
              // 用户确认分享后执行的回调函数
            },
            cancel: function() { 
              // 用户取消分享后执行的回调函数
            }
          });
        });
      }
    }
    // 微信分享
    Vue.prototype.$wxShare = _weiXin;

*  最后就是页面中调用分享功能的 **初始化**
    
     *  此方法需要在页面打开后获取页面数据后就`自动调用`, 调用后页面的`分享功能就已经初始化完毕`, 当用户点击右上角的分享的时候, 微信会自动运行分享功能
     *  分享链接需要注意, 因为`微信限制广告及其他恶意分享`. 所以分享链接必须和分享页面链接**相同**, 否则分享**初始化失败**

shareStaffRegister(companyName, title, image) { 
          let wxData = { 
            title: companyName , // 分享标题
            desc: title +
              "更多,更全,更省,更好二手车请猛戳这里", // 分享描述
            imgUrl: image, // 分享的图片
            url: location.href // 分享的链接
          }
          this.$wxShare(wxData)
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_1_color_FFFFFF_t_70]: /images/20211211/47e7702b1b444a11a5de37bfd571c409.png