如何在企业微信中利用jssdk实现轻松的转发分享功能？

前言

又接到一个看似简单，实则难受的需求，实现企业微信环境转发 H5 页面到微信好友和朋友圈，并保留卡片形式。

需求简单明了，但是和微信沾边的，都不是一条好走的路。

一上手就发现问题了，企微的jssdk它不更新了。兜兜转转发现，好像企微和微信的jssdk统一用@wecom/jssdk。

果然不愧是微信啊，张小龙 NB。

而我在发现这个状况之前已经用了第三方封装的包，weixin-js-sdk。幸好问题不大，因为这个包只是将官方 js-sdk 转为了 CommonJS 格式。

但我的建议是使用 @wecom/jssdk ，因为我已经发现有些方法 weixin-js-sdk 并不支持，比如 updateAppMessageShareData 和 updateTimelineShareData ，这两个新的分享方法。

环境

企业微信 4.1.3(21966)

weixin-js-sdk 1.6.0

实现

引入微信 jssdk

我说我怎么引入的这么难受呢。。。

// terminal
npm install weixin-js-sdk

// updateShare.js
import * as wx from 'weixin-js-sdk'

注册企微接口权限

这一步其实挺简单的，调用 wx.config 接口就行，重点是参数的获取，还有就是注册以后的 url 不会变动了，如果切换页面你就要重新注册一次。

JS-SDK 说明文档

附录 1-JS-SDK 使用权限签名算法

附录 2-所有 JS 接口列表

// 注册接口权限

const jsapiTicket = ""; // 我是后端返回的，前端也可以自己获取，具体的看附录1

const timestamp = Number(Date.now().toString().substring(0, 10)); // 获取时间戳
const nonceStr = getuuid(); // 获取uuid
const url = ""; // 注册url，需要与当前页面一致
const signature = CryptoJS.SHA1(
  `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`
).toString(); // 生成签名

wx.config({
  debug: false, // 是否开启调试模式，开启的话，每调用一次api就会回调弹出结果弹窗。
  appId: "", // 填写企业号corpid，但是要注意的是，如果该网页被分享到微信，那你就要用微信公众号的appid才能获取到接口权限
  timestamp: "", // 必填，生成签名的时间戳。注意！微信要的时间戳精度是到秒
  nonceStr: "", // 必填，生成签名的随机串。随便一个uuid就行，只要是不重复的随机串都可以。
  signature: "", // 必填，签名，见附录1。
  jsApiList: [], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2。
});

// 成功回调
wx.ready(function (res) {
  // config信息验证成功会执行ready函数

  // 检查环境是否支持指定JS接口
  wx.checkJsApi({
    jsApiList: [],
    success: function (res) {},
  });
});

// 失败回调
wx.error(function (err) {
  // config信息验证失败会执行error函数，如签名过期导致验证失败
  // 具体错误信息可以打开config的debug模式查看，也可以在返回的err参数中查看，对于SPA可以在这里更新签名。
});

调用分享接口

最难的就是注册接口权限了，如果你成功了，那接下来就是一片坦途。

const config = {
  title: '', // 分享卡片标题
  desc: '', // 分享卡片描述
  imgUrl: '', // 分享卡片头像
  link: '', // 分享卡片点击打开的网址
  success: function () {
  // 用户确认分享后执行的回调函数
  },
  cancel: function () {
  // 用户取消分享后执行的回调函数
  },
}
。
// 分享接口的入参都差不多
// 分享到微信，即将废弃
wx.onMenuShareAppMessage(config)
// 分享到朋友圈，即将废弃
wx.onMenuShareTimeline(config)

问题

再次分享卡片头像图不加载

常见原因就是你的头像图太大，导致加载失败，最好控制在 200k 以内，还有就是可能你的头像图链接挂了。

错误码:63002, invalid signature

如果你确定你的 noncestr 和 jsapi_ticket 没有问题，但就是提示非法签名，那可能是因为你的 timestamp。

因为微信的 timestamp 精度是到秒，而 JS 的 Date.now() 方法精度是到毫秒。

真不愧是你啊，微信。

const js_timestamp = Date.now();

const wx_timestamp = Number(Date.now().toString().substring(0, 10)); // 需要这样处理