一文搞定：本地环境中使用ngrok+express调试微信接口问题

2023-09-08 07:17:21

前言

在微信项目的开发过程中，经常需要对微信jssdk提供的接口进行调试，比如录音、分享、上传图像等接口。然而，微信jssdk要求绑定安全域名才能使用其提供的一系列功能。在开发环境中使用localhost或本地IP地址无法完成域名的认证和绑定，因此无法在本地调试。

解决方案

为了解决这个问题，我们可以使用ngrok和express来在本地环境中调试微信接口。ngrok是一个内网穿透工具，可以将本地服务器映射到一个公网地址，这样就可以使用公网地址来访问本地服务器上的微信接口。express是一个Node.js框架，可以用来快速构建一个简单的HTTP服务器。

使用步骤

1. 安装ngrok

首先，我们需要安装ngrok。ngrok有两种版本，分别是免费版和专业版。免费版只能使用http协议，而专业版可以使用http和https协议。

# 安装ngrok
npm install ngrok -g

2. 安装express

接下来，我们需要安装express。

# 安装express
npm install express

3. 创建一个express服务器

// 引入express
const express = require('express');

// 创建一个express服务器
const app = express();

// 设置端口号
app.set('port', 3000);

// 启动服务器
app.listen(app.get('port'), () => {
  console.log(`Server is listening on port ${app.get('port')}`);
});

4. 使用ngrok映射本地服务器

# 使用ngrok映射本地服务器
ngrok http 3000

5. 配置微信jssdk

在微信jssdk的配置中，将域名设置为ngrok提供的公网地址。

wx.config({
  debug: true, // 开启调试模式
  appId: 'wx123456789', // 公众号的appId
  timestamp: 123456789, // 时间戳
  nonceStr: '123456789', // 随机字符串
  signature: '123456789', // 签名
  jsApiList: [
    'chooseImage', // 选择图片
    'uploadImage', // 上传图片
    'startRecord', // 开始录音
    'stopRecord', // 停止录音
    'onVoiceRecordEnd', // 录音结束事件
    'playVoice', // 播放语音
    'pauseVoice', // 暂停播放语音
    'stopVoice', // 停止播放语音
    'onVoicePlayEnd', // 播放语音结束事件
    'shareTimeline', // 分享到朋友圈
    'shareAppMessage' // 分享给朋友
  ]
});