uniapp中针对H5端做微信分享功能总结

H5端做微信分享，需要用到微信的jssdk，我们可以借助jweixin-module工具包来做开发。下面简单记录一下接入流程

一、安装jweixin-module

npm install jweixin-module --save

二、使用jweixin-module

1.引入jweixin-module

// #ifdef H5
const jweixin = require("jweixin-module");
// #endif

2.初始化微信分享配置流程

//获取当前的平台(终端类型 1 android 2 ios 3 h5 4 微信小程序 5 web)
export const getPlatform = () => {
  //默认web
  let platform = 5;
  //#ifdef APP-PLUS || APP-NVUE
  const system = uni.getSystemInfoSync();
  if (system.platform === "ios") {
    platform = 1;
  } else {
    platform = 2;
  }
  //#endif

  //#ifdef H5
  platform = 3;
  //#endif

  //#ifdef MP-WEIXIN
  platform = 4;
  //#endif
  return platform;
};

//判断浏览器是否是微信浏览器
export const checkIsWechatBrowser = () => {
  let platform = getPlatform();
  if (platform === 3) {
    return (
      navigator.userAgent.toLowerCase().match(/MicroMessenger/i) ==
      "micromessenger"
    );
  } else {
    return false;
  }
};

//初始化微信分享配置(以下代码是封装在一个类文件的一个方法)
  async initWeixinShareConfig(options = {}) {
    //检测是否处于微信浏览器环境下
    if (!checkIsWechatBrowser()) {
      return;
    }
    let _this = this;
    //动态获取当前的页面链接并且确保链接后面不能有#号
    let linkUrl = window.location.href.split("#")[0];
    //获取请求服务端获取签名信息
    const res = await APP.$api.getwxjsConfig({
      url: encodeURIComponent(linkUrl),   //必须将链接encode之后再传递到服务端，服务端拿到url之后，需要先进行urldecode之后才能做签名拼接。
    });
    if (res) {
      //配置
      jweixin.config({
        debug: res.debug ? true : false, //根据服务端来控制是否开启调试模式
        appId: res.appId,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        jsApiList: res.jsApiList,
      });
      //分享的触发动作必须写再ready里面
      jweixin.ready(() => {
        //配置分享数据
        let shareData = {
          title: options.title || "",  //分享的标题
          desc: options.desc || "",  //分享的描述
          link: linkUrl,   //分享的链接
          imgUrl: options.imageUrl || "", //分享的图片链接
          success(response) {
            //配置成功之后的回调（并不是分享成功之后的回调，这个地方是个坑，要注意下）
            console.log('user shared');
          },
        };
        //分享给朋友接口
        jweixin.updateAppMessageShareData(shareData);
        //分享到朋友圈接口
        jweixin.updateTimelineShareData(shareData);
      });
    }
  },

3.在需要分享的页面中调用初始化微信配置方法

onLoad(args) {
  this.$sys.initWeixinShareConfig({
      title: '今天天气真好啊',
      desc: '是啊哈哈哈哈',
      imageUrl: 'http://xxxx.com/xxx.png',
    });
}

三、服务端接收到url返回签名信息数据样例

服务端数据样例

四、调试

• 对于微信中的调试可以借助微信开发者工具，具体可以在官网下载
• 在调试过程中可能会遇到诸如签名错误等问题，可以借助微信 JS 接口签名校验工具