最近有点记不清微信 sdk 操作步骤了，借着项目做到自定义分享链接的模块，重温记录下过程心得。
前后端分离的项目，绑定域名、获取 appId 等操作就由后端同事完成，这里只记录前端所需的工作。
自定义分享链接过程
开发工具
只需微信 web 开发者工具，通过它可以非常容易地定位问题：它会打印所引用的 appId、接口是否可用等；也能点击模拟分享。无需一次次拿起手机测试。
js-sdk 引入方式
有两种引入方式：
- script 标签引用
- 模块化引用
由于做的是 vue 项目，通过模块化引用比较符合规范。
// 安装库
npm install --save-dev weixin-js-sdk
// 项目引用
import wx from 'weixin-js-sdk'
与后端的交互
这时候，后端同事需要给你微信要求验证的东西，分别是 appId、timestamp、nonceStr、signature 以及 分享出去的链接路径。
需要注意链接路径，要使用后端返回的带身份信息的链接（需要分享信息的话）。
操作： 前端传过去当前域名给后端签名，基于当前域名加上指定路径生成上述信息，后端返回信息。
代码：
methods: {
getWeixinConfig() {
getWxConfig({ // api.js 里定义的获取数据接口
url: location.href.split('#')[0] // 传递当前域名
}, (data) = > {
this.config = data;
this.setWxConfig(data); // 传递返回的数据
}, (failed) = > {
// do something
})
},
setWxConfig(val) {
let that = this;
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。使用微信开发者工具可以不打开。
appId: val.appId, // 必填，公众号的唯一标识
timestamp: val.timestamp, // 必填，生成签名的时间戳，注意是以秒为单位
nonceStr: val.nonceStr, // 必填，生成签名的随机串
signature: val.signature, // 必填，签名
jsApiList: [ // 必填，需要使用的JS接口列表
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
let share_config = { // 抽取共同的设置
imgUrl: location.origin + '/buyer_static/img/share.png', //分享卡片的图标，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
desc: "越来越多的人，xxxxxx~", //摘要,如果分享到朋友圈的话，不显示摘要。
title: '我刚刚xxxxx', // 分享卡片标题
link: val.inviteLink, // 分享出去后的链接，这里是返回的链接。注意：不能包含 '#' 以及后面的内容！！
success: function () {
// 分享成功后的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
// 还有其他几种回调函数，详见官网文档
};
wx.ready(function () { // 设置好后，在 ready 函数里调用分享方法，传入设置
wx.onMenuShareAppMessage(share_config); //分享给好友
wx.onMenuShareTimeline(share_config); //分享到朋友圈
wx.onMenuShareQQ(share_config); //分享给手机QQ
wx.onMenuShareWeibo(share_config); // 分享到微博
});
wx.error(function (res) {
// 通过error接口统一处理失败验证
// config信息验证失败会执行error函数
});
wx.checkJsApi({ // 检测所使用的 api 是否可用
jsApiList: [ // 需要检测的JS接口列表，所有JS接口列表见附录2
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
],
success: function (res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
}
},
created() {
// 本地开发不需要验证
if (process.env.NODE_ENV === 'production') {
// 进入页面时获取、设置配置
this.getWeixinConfig()
}
}常见问题
注意：以下内容都基于微信管理后台已经绑定前端传过去的域名 到 appId 上。
1、返回 40001 code
源头：accessToken 过期
原因：accessToken 是通过 appId 和 appSecret 运算得到的，用于生成jsapi_ticket -> 生成后面需要的 noncestr、timestamp 等
内容。 accessToken 默认 2 小时后过期，即正常情况下，后台 2 小时请求一次即可。但是，如果在其他地方调用同一套 appId 和
appSecret 再次生成 accessToken，前一个就会在 5 分钟内过期，导致验证失败。
解决方法： 后端必须在自己的服务全局缓存 access_token 和 jsapi_ticket。
2、ios 下分享卡片不显示缩略图，而分享到朋友圈或者使用安卓分享都没有问题。
源头：缩略图路径有问题
原因：缩略图路径包含了中文。
解决方法：将中文重命名为英文； 或使用 encodeURI(imgUrl) 处理图片路径。
另有一个说法是分享的内容包含敏感词，但我测试了一下没发现问题，也提一下给后来人做个参考。可能的敏感词有： 元、现金、红包 等。
测试方法： 将标题和内容都换成数字，测试是否显示缩略图。
3、不能自定义分享按钮
愿景：页面自定义分享按钮，点击调用分享功能。
结论：做不到，微信不允许。
4、其他常见问题，见 js-sdk 文档底部附录5的说明。
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115