最近在开发 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 种也不阻碍项目的进展。