vue项目前端添加微信分享

vue中的微信分享

微信分享功能需要在每个页面刚刚打开的时候就初始化,然后用户点击分享才可以调用微信自带的分享.
微信中限制其他的分享插件, 只能使用微信自己的分享功能
在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>
    <!-- built files will be auto injected -->
  </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)
    },

vue项目前端添加微信分享

vue中的微信分享

猜你喜欢