微信 JS-SDK 本地调试

最近在开发 h5 应用的时候，需要调起微信的扫一扫功能。那就得使用到微信的 JS-SDK，怎么在本地开发中，使用 JS-SDK 的功能呢？（功能不限于微信扫一扫）

在这里，我们介绍两种方法：

Demo 在 Mac M1 上进行；其他平台请自行验证

假设你已经申请了公众号测试账号，如果不知道如何操作，请前往本人之前的文章 – 调试微信公众号获取用户信息

好，我们开始正文。

1. Ngrok 内网穿透

Ngrok 是什么？

Ngrok 是一个反向代理，通过在公共的端点和本地运行的 web 服务器之间建立一个安全的通道。

Ngrok 是外国发布的一个开源项目，也有一个公开的服务，但是被国内墙掉了。国内一个机构建立并运营了一个 ngrok 运行服务，虽然有时不太稳定，但是对调试人员来说足够的。

该服务不稳定，本人在调试的时候偶尔挂掉，不过，确实不影响调试。

安装 Ngrok

通过 Install ngrok 下载并安装 ngrok 软件。这里是基于 mac 的案例，通过命令行安装：

brew install ngrok/ngrok/ngrok

安装成功后，控制台上可以通过 ngrok -h 查看帮助：

本地绑定授权令牌

登陆并进入 dashboard.ngrok.com/get-started… ，复制你的授权令牌：

然后进行授权：ngrok authtoken 复制的授权令牌。

内网穿透，获取域名链接

我们前端案例跑的 demo 是端口号 3000，那么我们可以对该端口号下本地服务进行内网穿透：

$ ngrok http 3000

如上图，访问 https://55e4-121-33-184-45.ngrok-free.app 即访问了 http://localhost:3000。

配置 JS-SDK 域名白名单

进入 测试号管理 配置域名 55e4-121-33-184-45.ngrok-free.app：

获取 Access Token

我们获取到测试公众号的 appID 和 appsecret：

然后，通过调用[get] https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 可以获取 access token：

获取 Jsapi Ticket

通过 access_token，我们通过调用 [get] https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 可以获取 Jsapi Ticket：

获取签名

我们已经获取到 jsapi_ticket，之后，通过 微信 js 签名工具 完成签名：

• jsapi_ticket：通过 getticket 接口获取的 JSAPI 调用凭证
• noncestr：随机生成的字符串（上图是 jimmy）
• timestamp：当前时间戳（单位：秒）
• url：需要调用 JS 接口的 URL

引入 js-sdk

这里我直接使用 npm 安装：npm install weixin-js-sdk。当然你也可以使用 script 引入外链 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>。

使用 js-sdk 功能

下面我们结合 react 的 demo 代码：

import React, { useState, useEffect } from 'react';
import wx from 'weixin-js-sdk';

function Demo(){
  const [value, setValue] = useState('');
  
  useEffect(() => {
    initJsDdkConfig();
  }, []);
  
  // 初始化 js-sdk 的配置信息
  const initJsDdkConfig = () => {
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: 'wxd14f1f23ebac23ac', // 必填，测试公众号的 app id
      timestamp: '1683904745', // 必填，上图的时间戳
      nonceStr: 'jimmy', // 必填，上图的随机字符串
      signature: '65caaeb958e91f089af2f74a240dffff8c4a5584', // 必填，上图中生成的凭证
      jsApiList: ['scanQRCode'] // 需要使用到 js 接口列表
    });
  }
  
  // 扫描
const scaneMethod = () => {
  wx.ready(function() { // ready 后调用，确保加载了配置
    wx.scanQRCode({
      // 微信扫一扫
      desc: "scanQRCode desc",
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function(res) {
        const getCode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        // 设置回填
        setValue(getCode);
      },
      fail: function(res) {
        Toast(res.errMsg);
      }
    })
  })
  }
  
  return (
    <div>
      <button onClick={() => scaneMethod()}>扫一扫</button>
      <p>扫描结果：{ value }</p>
    </div>
  )
}

export default Demo;

首先，我们获取了 JS-SDK 的配置信息，然后在 jsApiList 中声明了我们要使用的 js 接口 scanQRCode。之后，点击扫码按钮，调起扫码的功能。

微信开发工具的控制台输出的效果如下：

图中的 signature 是重新生成的

2. 后端配合，配置域名

后端配合的这种方法，需要后端或者运维的同事，在软路由层面将项目的 ip:port 映射成域名，比如：frontend.internal:3000。访问项目 http://frontend.internal:3000 即是访问你本地的项目。

然后接下来的流程跟 Ngrok 内网穿透 章节中的 配置 JS-SDK 域名白名单，引入 js-sdk 和 使用 js-sdk 功能 的操作一模一样。

后话

两种方法对比，笔者还是喜欢第 2 种。一是访问的稳定性有保证，二是能够顺便调试了测试环境（测试环境如果是 ip 访问的情况）。但是，第 1 种也不阻碍项目的进展。

参考文

• 微信 JS-SDK 如何本地调试
• Mac上安装ngrok实现内网穿透