微信 JS-SDK 本地调试

Jimmy_is_jimmy

发布于 2023-05-23 17:35:40

11.9K1

发布于 2023-05-23 17:35:40

文章被收录于专栏：call_me_R

最近在开发 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 查看帮助：

本地绑定授权令牌

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

然后进行授权：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。之后，点击扫码按钮，调起扫码的功能。

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