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));
          }
        });
    });