微信

因为自己之前也就简单的了解了微信小程序的整体架构，所以针对网页嵌套的使用也不是很了解。今天是简单针对网页微信JS-SDK的使用做下小总结。

image.png

需求：

1.用户从公众号进入我的H5页面；
2.当用户点击操作时判断用户是否有微信授权；
3.根据授权获取到的appId，让用户进行登陆并获取相关信息；

前提准备：

1.相关参考文档

开发接入指南
网页授权
JS-SDK说明文档
web开发者工具 (下载微信开发者工具，在公众号页面内更加方便dbug)
本地调试如何配置
微信 JS 接口签名校验工具
H5页面接入微信授权登录和分享

2.服务器配置

开发：在本地开发时，你可以去微信提供的 测试号管理 上进行开发

image.png

上线： 上线后的具体操作，大家可以参考 官方文档；

image.png

相关代码：

引入js文件

配置信息
如果你能解决之前我说的，本地实现natapp内网穿透或者nginx反向代理的话，你也可以直接通过前端解决跨域问题来根据 appId，获取相关参数，并通过微信提供的 微信 JS 接口签名校验工具 生成签名。(我是不怎么建议啊，我嫌麻烦)
主要这些参数，到时候后端会提供一个接口返回给你，你只需要储存起来就可以了，不必要自己搞东搞西。

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

通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

通过error接口处理失败验证

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