公众号 JS-SDK 调试指南：从简化到精通

前端

2023-12-23 00:05:20

公众号 JS-SDK 调试：简化版终极指南

导语：

公众号 JS-SDK 调试，对于初次接触的朋友来说，确实是一件让人头秃的事情。本文将从简化入手，用最通俗易懂的语言，带你一步步搞定这个棘手问题。

1. 准备工作

确保公众号已开通 JS-SDK 功能
获得 AppID 和 AppSecret
准备好域名或 IP 白名单

2. 创建签名

签名是 JS-SDK 调试的关键。我们需要使用以下算法生成签名：

function generateSignature(nonceStr, timestamp, url, jsapiTicket) {
  var string1 = 'jsapi_ticket=' + jsapiTicket + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + url;
  var signature = CryptoJS.SHA1(string1).toString();
  return signature;
}

3. 调试步骤

（1）获取 JsApiTicket

获取 AccessToken：

// 通过微信官方接口获取access_token

获取 JsApiTicket：

// 通过access_token获取ticket，ticket有效期为7200s

（2）初始化 JS-SDK

在公众号 HTML 页面中，引入 JS-SDK 库并初始化：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
  debug: true, // 开启调试模式
  appId: '', // 填入你的 AppID
  timestamp: '', // 填入时间戳
  nonceStr: '', // 填入随机字符串
  signature: '', // 填入签名
  jsApiList: [] // 填入需要使用的 JS-SDK 接口列表
});
</script>

（3）调试工具

打开浏览器开发者工具（F12），选择“Network”选项卡。

（4）触发 JS-SDK 接口

调用 JS-SDK 接口，例如：

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  }
});