简介
TNW: TypeScript(The) + Node.js(Next) + WeChat 微信公众号开发脚手架，支持任何 Node.js 的服务端框架(Express、Nest、egg 等)
接口权限以及文档
公众号接口权限说明
微信 JS-SDK 说明文档
JSSDK使用步骤
步骤一：绑定域名
正式号：登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名
测试号：进入微信公众帐号测试号申请系统 找到 JS接口安全域名 点击 修改
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）
步骤三：通过config接口注入权限验证配置
wx.config({
debug: true,
appId: '{{ appId }}',
timestamp: '{{ timestamp }}',
nonceStr: '{{ nonceStr }}',
signature: '{{ signature }}',
jsApiList: [
'checkJsApi',
'...省略其他'
]
});
TNW 中签名实现
签名算法见 官方文档附录1
特别注意： url 必须为页面完整的URL包括参数
@Get('jssdk')
@Render('jssdk.hbs')
async jssdk(@Req() request: Request, @Res() response: Response) {
let appId = ApiConfigKit.getApiConfig.getAppId;
let timestamp = new Date().getTime() / 1000;
let nonceStr = uuid.v1();
let url = "http://xxxx/jssdk?....";//填写完整页面的URL包括参数
// 生成签名
let signature = await WeChat.jssdkSignature(nonceStr, timestamp, url);
return {
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature
};
}
步骤四：通过ready接口处理成功验证
wx.ready(function(){
// config 信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config 是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});
步骤五：通过error接口处理失败验证
wx.error(function(res){
// config 信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的 debug 模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});
JSSDK 案例
所有JS接口列表见 官方文档附录2
特别注意：
- 原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端 6.7.2 及 JSSDK 1.4.0 以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口。
- 分享接口中的
link链接必须 JS 接口安全域名下的链接 - 公众号微信支付后面再详细介绍
TNW 微信公众号开发脚手架
基础接口
判断当前客户端是否支持指定JS接口
分享接口
“分享给朋友”及“分享到QQ”
“分享到朋友圈”及“分享到QQ空间”
分享到腾讯微博
图像接口
拍照或从手机相册中选图接口
预览图片接口
上传图片接口
下载图片接口
音频接口
开始录音接口
停止录音接口
播放语音接口
暂停播放接口
停止播放接口
上传语音接口
下载语音接口
智能接口
识别音频并返回识别结果接口
设备信息接口
获取网络状态接口
地理位置接口
使用微信内置地图查看位置接口
获取地理位置接口
界面操作接口
隐藏右上角菜单接口
显示右上角菜单接口
关闭当前网页窗口接口
批量隐藏功能按钮接口
批量显示功能按钮接口
隐藏所有非基础按钮接口
显示所有功能按钮接口
微信扫一扫
调起微信扫一扫接口
Java 版本
微信公众号开发之如何使用JSSDK
开源推荐
TNW微信公众号开发脚手架：https://gitee.com/javen205/TNWIJPay让支付触手可及：https://gitee.com/javen205/IJPay- SpringBoot 微服务高效开发
mica工具集：https://gitee.com/596392912/mica Avue一款基于 vue 可配置化的神奇框架：https://gitee.com/smallweigit/avuepig宇宙最强微服务（架构师必备）：https://gitee.com/log4j/pigSpringBlade完整的线上解决方案（企业开发必备）：https://gitee.com/smallc/SpringBlade
TNW/TNWX