官方文档

公众号文档：developers.weixin.qq.com/doc/offiacc…
开发者工具：developers.weixin.qq.com/doc/offiacc…
公众号测试工具：mp.weixin.qq.com/debug/cgi-b…
公众号管理后台：mp.weixin.qq.com/
公众号签名校验工具：mp.weixin.qq.com/debug/cgi-b…

开始接入

公众号APPID

如果只是为了测试我们可以使用公众号测试工具去获取appId和appsecret

实际公众号后台，在“开发-开发设置-开发ID”中

公众号生成签名

前端发起获取签名请求，传参appId、appsecret、userId
后端调用微信接口生成access_token，access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token，所以我们可以根据返回的exires_in把access_token存放到后端。
后端获取到access_token后调用ticket接口去置换jsapi_tiket，该接口同样需要缓存。
最后根据返回的jsapi_ticket生成signature签名。
Step 1

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

Step 2 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

Step3 对string1进行sha1签名，得到signature

0f9de62fce790f9a083d5c99e95740ceb90c27ed

前端初始化wxSDK

引入js文件

在需要调用JS接口的页面引入如下JS文件：res.wx.qq.com/open/js/jwe… 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe…

初始化SDK

window?.wx?.config({
  appId: ret?.appId, // 必填，公众号的唯一标识
  timestamp: ret?.timeStamp, // 必填，生成签名的时间戳
  nonceStr: ret?.nonceStr, // 必填，生成签名的随机串(后端生成sign的那个noncestr)
  signature: ret?.signature, // 必填，签名
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  jsApiList: [], // 需要注册的api名称
});

问题点汇总

1.签名中用到的url应该传什么？

这里由于公众号存在双端差异，在安卓端传当前页面的url(location.href)即可，但是在ios端，由于vue和react路由跳转的时候，都是操作的浏览器的历史记录，iOS会把第一次刚进入时的URL作为真实URL ，所以后续在调用wxSDK的api时会出现当前页面url与生成sign的url匹配不上的问题。所以iOS的url参数需要特殊处理。

const getSignUrl = () => {  
let signLink = '';  
const ua = navigator.userAgent.toLowerCase();  
 if (/iphone|ipad|ipod/.test(ua)) {  
    signLink = window.localStorage.getItem('WxCodeUrl') || '';  
     if (!signLink) signLink = window.location.href;  
 } else {  
     signLink = window.location.href;  
 }  
 return signLink;  
};

公众号接入微信SDK随笔