Taro框架中開發H5使用微信分享

Taro框架中開發H5使用微信分享

1. 第一步先引入微信jsSDK
   
   

//微信分享js
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

由於做的是H5，所以需要先檢測用戶是用普通瀏覽器打開的項目，還是用微信瀏覽器打開的項目，在你需要做分享的頁面封裝一個檢測方法。

//檢測瀏覽器的方法
  isWeiXin = () => {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      console.log(" 是來自微信內置瀏覽器")

      return true;
      } else {
      console.log("不是來自微信內置瀏覽器")

      return false;
      }
  }

根據返回的不同值來做分享操作，普通瀏覽器是長按複製鏈接分享，微信瀏覽器裏面是提示點擊右上角分享。

普通瀏覽器分享操作

微信瀏覽器分享操作

分享的js代碼，初始化配置參數需要後臺給，這樣就可以分享出去給用戶看到了。

wx.config({
        debug: false,
        appId: '',
        timestamp: '',
        nonceStr: '',
        signature: '',
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });
    // 微信JSSDK開發
    wx.ready(function () {
        // 分享給朋友
        wx.onMenuShareAppMessage({
          title: '', // 標題
          desc: '', // 說明文字
          link: '', // 鏈接
          imgUrl: '', // 分享的圖標
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });

        // 分享到朋友圈
        wx.onMenuShareTimeline({
          title: '', // 標題
          link: '', // 鏈接
          imgUrl: '', // 分享的圖標
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    });