共计 1785 个字符，预计需要花费 5 分钟才能阅读完成。
背景痛点
在微信小程序开发中，前后端分离开发是常见模式。但开发者经常会遇到以下问题：
- 后端 API 尚未部署到线上环境，无法进行联调
- Mock 数据无法满足复杂业务场景的测试需求
- 真机预览时无法直接访问本地开发环境
这些问题会导致开发效率低下，增加沟通成本。本文将详细介绍三种解决方案及其适用场景。
技术方案对比
微信开发者工具提供三种主要方式实现本地 API 调用：
- 不校验合法域名
- 最简单快捷的方式
- 仅适用于开发阶段
-
无法解决真机调试问题
-
web-view 组件
- 通过内嵌网页实现复杂功能
- 需要额外开发 web 页面
-
适合已有 web 项目的场景
-
本地代理
- 最接近生产环境的方案
- 支持 HTTPS/WSS
- 可实现真机调试
对于大多数开发场景，我们推荐使用本地代理方案。
核心实现
配置不校验合法域名
- 打开微信开发者工具
- 点击右上角 ” 详情 ” 按钮
- 选择 ” 本地设置 ” 选项卡
- 勾选 ” 不校验合法域名、web-view 域名、TLS 版本及 HTTPS 证书 ”
注意：此方式仅适用于开发工具内预览，真机调试仍需配置代理。
配置本地代理
修改 project.config.json 文件，添加以下配置：
{
"setting": {
"urlCheck": false,
"postcss": true,
"es6": true,
"minified": true,
"newFeature": true,
"localProxy": {
"enable": true,
"rules": [
{
"match": "^https://api.yourdomain.com",
"target": "http://localhost:3000",
"changeOrigin": true
}
]
}
}
}配置说明：
– match: 要代理的线上 API 地址正则表达式
– target: 本地开发服务器地址
– changeOrigin: 是否修改请求头中的 origin
处理 HTTPS/WSS 连接
- 为本地开发服务器配置 HTTPS 证书
- 使用
devcert等工具快速生成开发证书 - 在代理配置中将
target改为 HTTPS 地址
代码示例
wx.request 调用示例
// 封装请求方法
const request = (url, data = {}, method = 'GET') => {return new Promise((resolve, reject) => {
wx.request({url: `${getBaseUrl()}${url}`,
data,
method,
timeout: 10000, // 10 秒超时
success: (res) => {if (res.statusCode === 200) {resolve(res.data)
} else {reject(new Error(` 请求失败: ${res.statusCode}`))
}
},
fail: (err) => {reject(err)
}
})
})
}
// 根据环境获取基础 URL
const getBaseUrl = () => {
// 开发环境使用本地代理
if (process.env.NODE_ENV === 'development') {return 'https://api.yourdomain.com'}
// 生产环境使用真实地址
return 'https://api.production.com'
}npm 环境切换脚本
在 package.json 中添加：
{
"scripts": {
"dev": "cross-env NODE_ENV=development npm run build",
"build": "your-build-command"
}
}安全与性能
安全风险应对
- 仅限开发环境关闭域名校验
- 不要在生产环境配置中使用本地代理
- 敏感接口应增加二次验证
性能优化建议
- 本地开发服务器启用压缩
- 合理设置请求超时时间
- 减少不必要的请求头
- 使用缓存策略
避坑指南
常见配置错误
- 代理不生效：检查代理规则是否正确，重启开发者工具
- 证书错误：确保证书为受信任的 CA 签发，或手动信任自签名证书
- 跨域问题：确保服务端配置了正确的 CORS 头
真机调试差异
- 真机调试需要手机和电脑在同一局域网
- 可能需要配置更宽松的安全策略
- 考虑使用 ngrok 等工具实现内网穿透
延伸思考
更优雅的 API 切换机制可以考虑：
- 使用环境变量动态配置 API 地址
- 开发构建时自动注入配置
- 实现配置中心统一管理
- 灰度发布时动态切换 API
通过本文的配置方案，可以有效解决微信小程序开发中的本地 API 调用问题。实际开发中，建议结合团队技术栈和项目特点，选择最适合的方案。
正文完
