微信JS-SDK接口调用全流程详解：从配置到签名实现

前言

借助微信 JS-SDK 接口，开发者可以在自定义的 JavaScript 程序中调用多种微信原生能力。这包括生成卡片式链接、实现图片的拍照上传与下载、音频的录制播放及上传下载、获取用户地理位置、触发摇一摇与扫一扫功能，以及集成微信支付等高级特性。

微信开发文档

准备工作

首先，必须拥有一个经过认证的公众号，且该认证需为企业类型认证。

其次，建议提前查阅官方开发帮助文档，熟悉基础概念与规范。

接口使用流程

标准的接口调用流程如下：

• 前端页面向后端服务器请求微信接口所需的配置信息。
• 后端服务器利用 AppID 和 AppSecret 向微信服务器请求 token。
• 后端基于 token 进一步获取 ticket，并据此生成签名。
• 后端将生成的签名返回给前端，前端根据所需调用的具体接口功能构建配置对象。
• 前端调用微信提供的 JavaScript 方法，将配置信息注入到微信环境中。
• 配置验证通过后，前端即可调用相应的接口来实现业务功能。

在正式开发前，需在微信公众平台完成相关设置并获取 AppID 与 AppSecret。通常情况下，token 的有效期为 7200 秒（即 2 小时），该时间值会随 token 一同返回。在有效期内可重复使用，从而跳过重新获取的步骤。

公众号设置

• 登录微信公众平台，使用管理员账号进行登录。
• 进入“设置与开发” -> “公众号设置” -> “功能设置”，配置 JS 接口安全域名。需下载验证文件并放置于已备案的网址目录下，确保可访问，同时添加后端服务的访问域名。
• 进入“设置与开发” -> “基本配置” -> “公众号开发者信息”，获取并记录 AppID 和 AppSecret。
• 在“设置与开发” -> “基本配置” -> “公众号开发者信息”中，设置 IP 白名单以允许后端服务器访问。

前端向后端请求 ticket

前端在页面渲染阶段，通过 AJAX 向后端请求 ticket。具体代码实现此处略过。

后端向微信获取 token

后端接收前端请求后，向微信 API 接口发送 GET 请求：

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

参数说明如下：

• grant_type：请求 token 时固定填写为 client_credential。
• appid 与 secret：从公众号设置中获取的 AppID 和 AppSecret。

正常请求成功后，将返回如下 JSON 数据：

{"access_token":"ACCESS_TOKEN","expires_in":7200}

其中 access_token 即为所需的 token。expires_in 表示有效期，单位为秒。

若请求发生错误，则返回如下 JSON 数据：

{"errcode":40013,"errmsg":"invalid appid"}

此示例中 AppID 无效，errcode 为错误码，errmsg 为具体的错误信息。

注意：后端获取的 tocken 可用于其他微信接口通信，因此建议在有效期内将其保存至缓存。当有效期过期时，再重新获取新的 token。

后端根据 token 生成 ticket

获取 token 后，使用 token 向微信服务器请求 ticket，请求类型为 GET：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

其中 ACCESS_TOKEN 即为之前获取的 token。若使用 JS-SDK 接口，type 参数应设置为 jsapi。成功时返回 JSON 数据：

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

• errcode：错误码。
• errmsg：错误信息。
• ticket：获取到的 ticket 数据。
• expires_in：有效期，单位为秒。

注意：ticket 同样建议保存至缓存，到期后重新请求。

根据 ticket 创建签名

创建签名和配置信息需要以下数据：

• noncestr：随机字符串。
• jsapi_ticket：由微信服务器返回的 ticket。
• timestamp：时间戳。
• url：前端使用 jsapi 的页面地址，注意不包含 # 号及其后的部分。

例如：

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

随后，按字段名的 ASCII 码升序（字典序）排列这些参数，并使用 URL 键值对格式（key1=value1&key2=value2…）拼接成字符串，注意所有参数名均为小写。排序顺序实际为 jsapi_ticket -> noncestr -> timestamp -> url。拼接后的字符串如下：

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

最后，对该字符串进行 SHA1 签名，得到 signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

将这些数据和 appid 返回给前端(其中 url 是前端传送给后端的)

前端创建配置信息，并注入验证

配置信息是一个对象，其格式如下：

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

首先，引入微信 SDK 的 JS 文件：

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，任选其一即可，另一个作为备用。

根据后端传入的参数设置配置对象，并执行注入操作。

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

处理验证

可使用封装好的 wx.ready 接口来处理验证成功后的行为，使用 wx.error 接口来处理验证失败的情况。

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

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

例如，实现将页面分享给朋友及分享到朋友圈的功能：

// 成功
wx.ready(() => {
  var shareData = {
    title: "新闻",
    desc: "每日新闻",
    link: window.location.href,
    imgUrl: "https://xxxxxxx.com/img/logo.jpg"
  };
  //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
  wx.updateAppMessageShareData(shareData);
  //自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
  wx.updateTimelineShareData(shareData);
});
//错误
wx.error(function (res) {
  console.log("微信分享错误信息", res);
});

SDK接口调用说明

所有 SDK 接口均通过 wx 对象（或 jWeixin 对象）调用，参数为一个对象。除各接口特有参数外，还包括以下通用参数：

• success：接口调用成功时执行的回调函数。
• fail：接口调用失败时执行的回调函数。
• complete：接口调用完成时执行的回调函数，无论成功或失败均会执行。
• cancel：用户点击取消时的回调函数，仅部分支持用户取消操作的 API 会用到。
• trigger：监听 Menu 中按钮点击时触发的方法，该方法仅支持 Menu 中的相关接口。

总结

至此，关于微信 JS-SDK 接口使用的介绍已完成。如需了解更多相关内容，请搜索本站历史文章或继续浏览后续文章。感谢大家的支持！