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

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐