272 lines
6.1 KiB
Markdown
272 lines
6.1 KiB
Markdown
# 微信小程序配置指南
|
||
|
||
## 问题：获取微信 code 报错
|
||
|
||
### 错误信息
|
||
```
|
||
{errMsg: "login:fail 系统错误，错误码：41002,appid missing"}
|
||
```
|
||
|
||
### 错误原因
|
||
- 错误码 **41002** 表示：**appid 缺失或无效**
|
||
- `manifest.json` 中的 `mp-weixin.appid` 没有配置
|
||
|
||
## 解决方案
|
||
|
||
### 方案 1: 使用测试 AppID（推荐用于开发）
|
||
|
||
在微信开发者工具中，可以使用测试号进行开发：
|
||
|
||
1. **打开微信开发者工具**
|
||
2. **创建项目时选择"测试号"**
|
||
3. **或在 manifest.json 中配置**：
|
||
```json
|
||
"mp-weixin": {
|
||
"appid": "touristappid"
|
||
}
|
||
```
|
||
|
||
**注意**：`touristappid` 是微信开发者工具的特殊测试 AppID，仅用于开发测试。
|
||
|
||
### 方案 2: 使用正式 AppID（用于生产）
|
||
|
||
如果你已经注册了微信小程序，使用正式的 AppID：
|
||
|
||
1. **登录微信公众平台**
|
||
- 访问：https://mp.weixin.qq.com/
|
||
|
||
2. **获取 AppID**
|
||
- 登录后台
|
||
- 进入"开发" → "开发管理" → "开发设置"
|
||
- 复制 AppID（格式：`wx1234567890abcdef`）
|
||
|
||
3. **配置到项目**
|
||
|
||
**方法 A：通过 HBuilderX 可视化配置**
|
||
- 打开 `manifest.json`
|
||
- 点击"微信小程序配置"
|
||
- 填入 AppID
|
||
- 保存
|
||
|
||
**方法 B：直接编辑 manifest.json**
|
||
```json
|
||
"mp-weixin": {
|
||
"appid": "wx1234567890abcdef", // 替换为你的 AppID
|
||
"setting": {
|
||
"urlCheck": false
|
||
}
|
||
}
|
||
```
|
||
|
||
4. **重新编译项目**
|
||
- 在 HBuilderX 中重新运行到微信开发者工具
|
||
|
||
## 完整配置示例
|
||
|
||
### 开发环境配置（使用测试号）
|
||
|
||
```json
|
||
{
|
||
"mp-weixin": {
|
||
"appid": "touristappid",
|
||
"setting": {
|
||
"urlCheck": false,
|
||
"es6": true,
|
||
"postcss": true,
|
||
"minified": true
|
||
},
|
||
"usingComponents": true,
|
||
"permission": {
|
||
"scope.userLocation": {
|
||
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 生产环境配置（使用正式 AppID）
|
||
|
||
```json
|
||
{
|
||
"mp-weixin": {
|
||
"appid": "wx1234567890abcdef",
|
||
"setting": {
|
||
"urlCheck": true,
|
||
"es6": true,
|
||
"postcss": true,
|
||
"minified": true,
|
||
"checkSiteMap": true
|
||
},
|
||
"usingComponents": true,
|
||
"permission": {
|
||
"scope.userLocation": {
|
||
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
||
}
|
||
},
|
||
"requiredPrivateInfos": [
|
||
"getLocation"
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
## 后端配置
|
||
|
||
除了前端配置，后端也需要配置微信小程序信息：
|
||
|
||
### 1. 配置后端 .env 文件
|
||
|
||
```env
|
||
# 微信小程序配置
|
||
WECHAT_APP_ID=wx1234567890abcdef
|
||
WECHAT_APP_SECRET=your_app_secret_here
|
||
```
|
||
|
||
### 2. 获取 AppSecret
|
||
|
||
1. 登录微信公众平台
|
||
2. 进入"开发" → "开发管理" → "开发设置"
|
||
3. 在"开发者ID"部分找到 AppSecret
|
||
4. 点击"重置"或"生成"获取 AppSecret
|
||
5. **重要**：AppSecret 只显示一次，请妥善保存
|
||
|
||
### 3. 配置服务器域名
|
||
|
||
在微信公众平台配置服务器域名：
|
||
|
||
1. 进入"开发" → "开发管理" → "开发设置"
|
||
2. 找到"服务器域名"
|
||
3. 配置以下域名：
|
||
- **request 合法域名**：`https://your-api-domain.com`
|
||
- **uploadFile 合法域名**：`https://your-api-domain.com`
|
||
- **downloadFile 合法域名**：`https://your-api-domain.com`
|
||
|
||
**注意**：
|
||
- 域名必须使用 HTTPS
|
||
- 域名必须备案
|
||
- 开发阶段可以在微信开发者工具中关闭域名校验
|
||
|
||
## 开发流程
|
||
|
||
### 1. 本地开发（使用测试号）
|
||
|
||
```bash
|
||
# 1. 配置 manifest.json
|
||
"appid": "touristappid"
|
||
|
||
# 2. 在微信开发者工具中
|
||
- 关闭"不校验合法域名"
|
||
- 关闭"不校验 TLS 版本"
|
||
- 关闭"不校验 HTTPS 证书"
|
||
|
||
# 3. 运行项目
|
||
npm run dev:mp-weixin
|
||
```
|
||
|
||
### 2. 真机测试（使用正式 AppID）
|
||
|
||
```bash
|
||
# 1. 配置正式 AppID
|
||
"appid": "wx1234567890abcdef"
|
||
|
||
# 2. 配置后端服务器域名
|
||
|
||
# 3. 上传代码到微信后台
|
||
|
||
# 4. 在手机上扫码预览
|
||
```
|
||
|
||
### 3. 发布上线
|
||
|
||
```bash
|
||
# 1. 确认所有配置正确
|
||
- AppID 正确
|
||
- 服务器域名已配置
|
||
- 后端 AppSecret 已配置
|
||
|
||
# 2. 提交审核
|
||
- 在微信公众平台提交审核
|
||
- 等待审核通过
|
||
|
||
# 3. 发布上线
|
||
- 审核通过后点击发布
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 使用 touristappid 可以正常开发吗？
|
||
A: 可以，但有限制：
|
||
- 只能在微信开发者工具中使用
|
||
- 无法真机预览
|
||
- 无法调用部分需要权限的 API
|
||
- 仅用于界面开发和基本功能测试
|
||
|
||
### Q2: 如何申请微信小程序？
|
||
A:
|
||
1. 访问 https://mp.weixin.qq.com/
|
||
2. 点击"立即注册"
|
||
3. 选择"小程序"
|
||
4. 按照流程完成注册（需要企业或个人认证）
|
||
|
||
### Q3: AppSecret 泄露了怎么办？
|
||
A:
|
||
1. 立即在微信公众平台重置 AppSecret
|
||
2. 更新后端配置
|
||
3. 重新部署后端服务
|
||
|
||
### Q4: 为什么配置了 AppID 还是报错？
|
||
A: 检查以下几点：
|
||
1. AppID 格式是否正确（wx 开头）
|
||
2. 是否重新编译了项目
|
||
3. 微信开发者工具是否重新加载了项目
|
||
4. 后端是否配置了对应的 AppID 和 AppSecret
|
||
|
||
### Q5: 开发环境如何跳过域名校验？
|
||
A: 在微信开发者工具中：
|
||
1. 点击右上角"详情"
|
||
2. 勾选"不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"
|
||
|
||
## 测试登录功能
|
||
|
||
### 使用测试号测试
|
||
|
||
```javascript
|
||
// 1. 配置 manifest.json
|
||
"appid": "touristappid"
|
||
|
||
// 2. 在微信开发者工具中测试
|
||
// 点击登录按钮，会弹出模拟登录界面
|
||
// 选择一个测试用户进行登录
|
||
|
||
// 3. 查看控制台输出
|
||
// 可以看到获取到的 code
|
||
```
|
||
|
||
### 使用正式 AppID 测试
|
||
|
||
```javascript
|
||
// 1. 配置正式 AppID
|
||
"appid": "wx1234567890abcdef"
|
||
|
||
// 2. 配置后端
|
||
WECHAT_APP_ID=wx1234567890abcdef
|
||
WECHAT_APP_SECRET=your_secret
|
||
|
||
// 3. 真机测试
|
||
// 扫码预览，使用真实微信账号登录
|
||
```
|
||
|
||
## 相关文档
|
||
|
||
- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
|
||
- [uni-app 微信小程序配置](https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin)
|
||
- [登录流程说明](./LOGIN_FLOW.md)
|
||
- [认证系统使用指南](./AUTH_GUIDE.md)
|
||
|
||
## 技术支持
|
||
|
||
如有问题，请查看：
|
||
- 微信开发者社区：https://developers.weixin.qq.com/community/
|
||
- uni-app 官方论坛：https://ask.dcloud.net.cn/
|