H5自定义分享

如果我们点击浏览器上三个点进行分享，分享出去无疑是一个链接，用户体验起来可能就没有那么好了，而且现在很多用户对链接都很警惕的

这时候自定义分享出现了，在实现的过程中踩了挺多坑的，爬出一个又跌进另一个

先说一下具体实现的方法，最后再说我踩的坑以及如何爬出来

首先需要引入微信jssdk

我这里通过npm的方式

npm install weixin-js-sdk --save

在需要用到的地方引入一下

const wx = require("weixin-js-sdk");

配置wx.config的时候需要后端配置处理，让后端返回页面签名的参数给你 

 share() {
      this.$emit("change", true);
      let url = window.location.href;
      getUrlApi({ url }).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data; 
          wx.config({
            // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.noncestr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.ready(function(e) {
            //需在用户可能点击分享按钮前就先调用
            wx.onMenuShareAppMessage({
              title: "XXXXXX", // 分享标题
              desc: "XXXXXXXXX", // 分享描述
              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                "图片链接", // 分享图标
              type: "link",
              success: function(res) {
                console.log("res", res);
                // 设置成功
              },
              fail: function(err) {}
            });
          });
          wx.error(function(res) {
            console.log("wx.error", res);
          });
        }
      });
    }

window.location.href拿到当前页面的url ,如果你使用是hash模式的话，需要操作一下，let url = window.location.href.split("#")[0] ，我用的是history模式，所以不需要操作

拿到后端返回的参数之后一一对应配置到config上就好了

jsApiList这个配置是你要调用的api接口需要在这里先声明一下

接着就是调用api进行自定义配置

这一切似乎都没有什么难点，但越是没有难点，坑的地方就越多

下面开始说说我踩的坑

首先遇到的第一个就是 invalid signature

我这里造成这个的原因有两点

第一：后端在进行页面签名的时候，没有把我携带的参数也弄进入签名（签名用的url必须是调用js接口页面的完整url,即当前页面的完整url）

第二：ios和andorid确认路径的区别，路由跳转的时候，andorid很友好，确认路由始终都是当前的页面的路径，ios上重新刷新页面，就能签名成功，但是用window.location.href去刷新总归不好，我看网上还提供了一种对ios路径处理的方法

router.beforeEach((to, from, next) => {
  const agent = navigator.userAgent
  const isiOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
  if (!to.meta.requireAuth) {
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.assign(to.fullPath)
    } else {
      next()
    }
  }
})

然而以为大工完成了，但是并没有

我分享出去之后依旧是链接。

但是分享到QQ上就是自定义分享的内容

查找了很多资料，终于在微信开放社区找到跟我一样问题的小伙伴了

updateAppMessageShareData转发给xx不能自定义 | 微信开放社区

h5微信自定义分享不生效 | 微信开放社区

最后，这里再说一句，当你调用share()这个自定义分享的时候并不能拉起分享那个弹框，最后的分享操作还是要通过右上角三个点进行分享（因为小程序的button有一个open-type=“share”属性,是可以直接调起分享弹框的，不需要再通过三个点去分享，所以我以为是哪里写的有问题，就傻傻试了很多遍）

后续：

某天我在某群上看到了一张海报，里面有二维码，我通过二维码进入H5之后，点击三个点想分享给朋友，我看到分享出来的东西是自定义分享的内容，我乐坏了，别人可以的，我也可以。于是乎我在我们的管理后台上生产二维码，然后扫码进入，果然是可以的，我在想是不是我关注了我们公众号的原因，于是我取消关注，并且拿了两个没有关注过的微信号扫码打开都是可以的。然后我在通过公众号里面进入到我们的H5，也是可以自定义分享，无论有没有关注我们的公众号。如果想通过链接进入的话，得先收藏链接，然后再从收藏的链接里面进入，就可以自定义分享内容。（但是ios还是会因为在微信缓存路径的原因存在签名失败的问题）