项目实战:微信JS-SDK使用教程

原创已于 2025-10-09 20:24:15 修改 · 1.2k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#jssdk #微信开发

于 2025-10-09 20:07:53 首次发布

前端同时被 2 个专栏收录

333 篇文章

订阅专栏

微信开发

6 篇文章

订阅专栏

项目实战:微信JS-SDK使用教程

1、查阅资料
2、绑定域名
3、引入js-sdk
4、通过config接口注入权限验证配置
5、调用js-sdk的API
6、其它注意点
7、参考资料

1、查阅资料

登录微信开发平台
在这里插入图片描述

这样子就能根据文档来使用js-sdk了。

2、绑定域名

可登录微信公众平台进入“服务号设置”的“功能设置”里填写“JS接口安全域名”。或者前往微信开发者平台 - 服务号或服务号 - 基本信息 - 开发信息进行修改。
在这里插入图片描述
点击设置:

最多只能填三个。注意上面图片的第三条。我们以test.yunp.top为例。

3、引入js-sdk

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js。如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载。

在这里插入图片描述

4、通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

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