企业微信jssdk自定义

业务中有个需要自定义分享的功能

通过概述 | 微信开放文档官方文档，与后端伙伴协作完成

首先需要后端通过接口返回appId,?timestamp(生成签名的时间戳), nonceStr(生成签名的随机串),signature(?签名)这四个字段

调取接口的时候需要传当前页面的url过去，url建议location.href.split('#')[0]获取,而且需要encodeURIComponent。如下

const loacationUrl = encodeURIComponent(location.href.split('#')[0])

如下代码，data是拿到的后端返回的数据

wx.config({
  debug: true,
  appId: data.appId,
  timestamp: data.timestamp, // 生成签名的时间戳
  nonceStr: data.nonceStr, // 生成签名的随机串
  signature: data.signature, // 签名
  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'showOptionMenu'],
})

wx.ready(function () {
  console.log('WechatShareData.icon', WechatShareData.icon)
  wx.showOptionMenu()
  wx.updateAppMessageShareData({
    title: '标题',
    link: '路径地址',
    desc: '描述',
    imgUrl: '图片地址url',
    success: function () {},
  })
  wx.updateTimelineShareData({
    title: '标题',
    link: '路径地址',
    desc: '描述',
    imgUrl: '图片地址url',
    success: function () {},
  })
})
wx.error(function (res) {
  console.log('error', res)
})

如果自定义的分享内容没生效，设置debug为true，可以把错误信息alert出来

遇到的问题：

• invalid signature签名错误。建议按如下顺序检查：

确认签名算法正确，可用微信 JS 接口签名校验工具 页面工具进行校验。

确认 config 中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应 noncestr , timestamp一致。

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

确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

确保一定缓存access_token和jsapi_ticket。

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

• 调试状态下出现?noPermissionJsApi?错误

具体错误为：

noPermissionJsApi:["updateAppMessageShareData", "updateTimelineShareData"],errMsg: "config:ok"`

登录公众号后台，进入?接口权限?→?分享接口，检查?分享到朋友圈?和?分享给朋友?是否已经开启。

具体接口权限可参考微信接口权限?官方文档。