企业微信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出来

遇到的问题:

企业微信jssdk自定义_第1张图片

  • 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"`

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

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

你可能感兴趣的:(企业微信)