H5微信分享的坑

程序员文章站 2022-03-10 18:28:02

H5微信是没有直接分享的功能，想要微信分享，只能用微信内置好的分享菜单，所以，想自定义微信直接分享的朋友们，趁早换种方式吧，比如改为二维码形式也不错前言微信jssdk文档介绍的微信分享api不详细，坑贼多，还限制多，太霸道了微信分享的坑在可以调用微信jssdk的基础接口前提下，调起分享接口， ......

h5微信是没有直接分享的功能，想要微信分享，只能用微信内置好的分享菜单，所以，想自定义微信直接分享的朋友们，趁早换种方式吧，比如改为二维码形式也不错

前言

微信jssdk文档介绍的微信分享api不详细，坑贼多，还限制多，太霸道了

微信分享的坑

在可以调用微信jssdk的基础接口前提下，调起分享接口，相信我，微信一定早早挖好了一个个坑在等着你跳进去..

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateappmessagesharedata({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号js安全域名一致
    imgurl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

1、分享链接无效

解：登录微信公众平台 --> 公众号设置 --> 功能设置 --> 填写“js接口安全域名”　　

2、分享标题和描述不能出现敏感词汇，分享图标链接要能访问，比如：红包、钱...

3、permission denied该公众号没有权限使用这个jsapi，或者是调用的jsapi没有传入config的jsapilist参数中（部分接口需要认证之后才能使用）。

4、签名错误（这个就是最狗血的，费了两天时间才解决）

我开发的过程中，config配置信息是从后台请求的，也就是以下信息

  appid: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  noncestr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名

前端直接现用请求到的配置信息注入权限验证配置，那时我还自以为绝对没有错的，那是因为我主要经历了这些：

1：用页面工具进行校验签名是否正确（no problem）

2：确认config中noncestr（js中驼峰标准大写s）, timestamp与用以签名中的对应noncestr, timestamp一致（no problem）

　3：确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的get参数部分,但不包括'#'hash后面的部分。（后台确认url没有#号）

　4：确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。（no problem）

5：确保一定缓存access_token和jsapi_ticket。（没问题啊）

虽然这些是没问题的，但是控制台上依然打印的是“invalid signature”，那不变的字眼是那么赤裸裸...

H5微信分享的坑

万恶的bug啊，你能告诉我到底你在开发者心目中的仇恨值吗？

H5微信分享的坑

6：我再次恶补了jssdk说明文档，在文档网页旮旯角落里发现了解决方法：

确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeuricomponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

是这样的，起初我并不理解这句话的意思，以为这问题不会落到我身上，当第二次看这句话的时候，我陷入了沉思...

H5微信分享的坑