微信内部分享及demo

首先说明，微信内部分享是指能在微信内打开地址分享（不可以使用外链）

先上官方文档概述 | 微信开放文档

文档内根据自己需求看要使用的分享方式，最下面有报错说明以及官方demo（反正我没用上）

先说下我遇到的问题（要代码的直接划到最后面）

1、invalid signature签名错误：

这个问题主要出现在后台和传给后台的值上，配置项目公众号直接按文档走

  if (isAndroid) {
      console.log("安卓");
      url = window.location.href;
    }
    if (isIOS) {
      console.log("苹果");
      url = window.location.href.split("#")[0]; //hash后面的部分如果带上ios中config会不对
    }
    var params = {
      appCode: "",
      url: url
    };
    vxShare({}, params).then(res => {
      if (res.errorInfo === "success") {
        jweixin.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名，见附录1
          jsApiList: ["updateAppMessageShareData"]

        jweixin.error(function(res) {});
      }
    });

首先是url一定要动态获取，要小心获取的地址被编译问题，确定没问题后拿着后台给的数据在微信 JS 接口签名校验工具 验证（其中jsapi_ticket找后台要）

2、the permission value is offline verifying这个错误是因为config没有正确执行，但是我也遇到过验签过了但是iOS上没过，这就涉及到iOS适配了，我下面再说：

这个问题还有一种情况config没有通过，也就是说config没有提示ok的话其他都不用管

3、验证问题checkJsApi：

wx.checkJsApi({
  jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
  success: function(res) {
  // 以键值对的形式返回，可用的api值true，不可用为false
  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  }
});

我在调试的时候这个给了ok但是config还是没有过，后来查出是url的问题，所以我感觉这个验证可有可无，最后我索性就直接删掉不要了

4、url传值错误：

在传url的时候会出现编译问题http:%2F%2Flib.cabplink.com%2Fmproductdetail%3FproductCode%3D6274402940458%26retry%3D1

传的是这个样子的，那么验签是即使通过了也无法使用

  let u = navigator.userAgent;
  let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  let url = "";
  if (isAndroid) {
    console.log("安卓");
    url = window.location.href;
  }
  if (isIOS) {
    console.log("苹果");
    url = window.location.href.split("#")[0]; //hash后面的部分如果带上ios中config会不对
  }
  var params = {
    appCode: "sztsg",
    url: url

  };

我是通过这个方法解决的

5、ios适配问题

在ios调用这些方法是会出现拿到的url与当前页面不符，另一种情况是config通过了但是the permission value is offline verifying会出现，需要刷新才可以解决

    if (
      !window.location.href.split("#")[0].includes("&retry") &&
      !window.location.href.split("#")[0].includes("?retry")
    ) {
      location.href += "&retry=1";
    }

我直接就不管是不是需要刷新，直接就当作是新页面打开刷新页面

我遇到的问题都在这里了，里外里搞了好几天才分享成功

最后是我的代码我已经抽出util类了，感觉坑还是挺多的

const wx = require("weixin-js-sdk");
import {
  vxShare
} from "@/api/szts";
export function initShare() {
  let u = navigator.userAgent;
  let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  let url = "";
  if (isAndroid) {
    console.log("安卓");
    url = window.location.href;
  }
  if (isIOS) {
    console.log("苹果");
    url = window.location.href.split("#")[0]; //hash后面的部分如果带上ios中config会不对
  }
  var params = {
    appCode: "sztsg",
    url: url

  };
  vxShare({}, params).then(res => {
    if (res.errorInfo === "success") {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名，见附录1
        jsApiList: ["updateAppMessageShareData"]
        //
      });

      wx.error(function (res) {});
    }
  });
}
export function wxshare(productInfo) {
  var url = productInfo.url

  var productName = productInfo.productName;
  if (productInfo.intro) {
    productName = productName + ":" + productInfo.intro;
  }
  var img = process.env.LIB_PLATFORM_PATH + productInfo.coverImage;
  wx.ready(function () {
    //   // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
    wx.updateAppMessageShareData({
      title: "", // 分享标题
      desc: productName, // 分享描述
      link: url, //分享URL
      imgUrl: img, // 分享图标,此处我测试使用了外部图片
      success: function () {
        // 用户确认分享后执行的回调函数
        console.log("分享成功回调");
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    });
    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
    wx.updateTimelineShareData({
      title: "", // 分享标题
      link: productName, //分享URL
      //分享给朋友不需要使用分享描述desc字段
      imgUrl: img, // 分享图标,此处我测试使用了外部图片
      success: function () {
        // 用户确认分享后执行的回调函数
        console.log("分享成功回调");
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
        console.log("分享失败回调");
      }
    });
  });

}