121 lines
4.3 KiB
Markdown
121 lines
4.3 KiB
Markdown
<!-- 8f20f6d7-24c9-47e9-b675-54ce061d0e4f c94b6074-b083-4302-8310-62b6dc28d2b0 -->
|
||
# 微信小程序适配问题排查与修复计划
|
||
|
||
## 问题概览
|
||
|
||
经过排查，发现以下主要问题需要修复：
|
||
|
||
### 1. H5 特定 API 缺少条件编译保护
|
||
|
||
**问题文件：**
|
||
|
||
- `utils/common.uts` - 使用了 `window.location` 和 `document`
|
||
- `utils/streamRequest.uts` - 使用了 `window.addEventListener`
|
||
- `servers/useRequest.uts` - 使用了 `window.location.hash` 和 `window.location.href`
|
||
- `utils/permissionHelper.uts` - 使用了 `navigator.permissions`
|
||
- `hooks/useMessageEventDelegate.uts` - 使用了 `window.open`, `URLSearchParams`, DOM API
|
||
- `servers/audioUploader.uts` - 使用了 `URL.revokeObjectURL`
|
||
|
||
### 2. 流式请求实现不完整
|
||
|
||
**问题：**
|
||
|
||
- `utils/streamRequest.uts` 中的微信小程序分支使用了普通 `uni.request`，但没有正确实现流式数据接收
|
||
- 应该使用 `enableChunked` 和 `onChunkReceived` 或参考 `weappEventSource` 的实现方式
|
||
|
||
### 3. WebView 组件配置
|
||
|
||
**问题：**
|
||
|
||
- `pages/webview/webview.uvue` 使用了 `<web-view>` 组件
|
||
- 微信小程序中需要配置业务域名才能使用 web-view
|
||
|
||
### 4. 自定义导航栏
|
||
|
||
**问题：**
|
||
|
||
- `pages.json` 中所有页面都使用了 `navigationStyle: "custom"`
|
||
- 需要确保自定义导航栏组件在微信小程序中正常工作
|
||
|
||
## 修复计划
|
||
|
||
### 阶段一：修复 H5 特定 API 条件编译
|
||
|
||
1. **utils/common.uts**
|
||
|
||
- 将 `getURLParams` 函数中的 `window.location` 使用条件编译包裹
|
||
- 将 `addBaseTarget` 函数中的 `document` 使用条件编译包裹
|
||
- 将 `findParentElement` 和 `findClassElement` 中的 DOM API 使用条件编译
|
||
|
||
2. **utils/streamRequest.uts**
|
||
|
||
- 将顶部的 `window.addEventListener` 使用条件编译包裹（`#ifdef H5`）
|
||
|
||
3. **servers/useRequest.uts**
|
||
|
||
- `window.location.hash` 已在条件编译中，但需要确保兼容性
|
||
- `window.location.href` 已在条件编译中，需要验证
|
||
|
||
4. **utils/permissionHelper.uts**
|
||
|
||
- `navigator.permissions` 已在条件编译中，需要确认非 H5 平台的实现
|
||
|
||
5. **hooks/useMessageEventDelegate.uts**
|
||
|
||
- `window.open` 需要替换为 uni-app 的导航 API
|
||
- `URLSearchParams` 需要条件编译或使用 uni-app 兼容实现
|
||
- DOM API (`closest`, `addEventListener`) 需要替换为 uni-app 的事件处理方式
|
||
|
||
6. **servers/audioUploader.uts**
|
||
|
||
- `URL.revokeObjectURL` 仅在清理 Blob URL 时使用，需要条件编译保护
|
||
|
||
### 阶段二：修复流式请求实现
|
||
|
||
1. **utils/streamRequest.uts**
|
||
|
||
- 修改 `requestWeapp` 方法，使用 `enableChunked: true` 和 `onChunkReceived` 回调
|
||
- 参考 `servers/useRequest.uts` 中的 `weappEventSource` 实现方式
|
||
- 确保流式数据解析正确
|
||
|
||
### 阶段三：WebView 和导航配置
|
||
|
||
1. **pages/webview/webview.uvue**
|
||
|
||
- 确保 web-view 组件在微信小程序中正确使用
|
||
- 添加错误处理和兼容性检查
|
||
|
||
2. **manifest.json**
|
||
|
||
- 确认微信小程序配置中是否需要添加 web-view 相关配置
|
||
|
||
3. **自定义导航栏组件**
|
||
|
||
- 检查 `components/custom-nav-bar` 在微信小程序中的兼容性
|
||
- 确保所有页面都能正常显示自定义导航栏
|
||
|
||
### 阶段四：测试与验证
|
||
|
||
1. 在微信开发者工具中编译和测试
|
||
2. 验证流式请求是否正常工作
|
||
3. 验证音频上传功能
|
||
4. 验证 WebView 页面跳转
|
||
5. 验证所有页面的导航功能
|
||
|
||
## 实施顺序
|
||
|
||
1. 先修复 H5 特定 API 的条件编译（避免运行时错误）
|
||
2. 修复流式请求实现（核心功能）
|
||
3. 处理 WebView 和导航相关配置
|
||
4. 最后进行全面测试
|
||
|
||
### To-dos
|
||
|
||
- [ ] 修复 utils/common.uts 中的 H5 特定 API（window.location、document），添加条件编译保护
|
||
- [ ] 修复 utils/streamRequest.uts 中的 window.addEventListener，添加条件编译保护
|
||
- [ ] 修复 hooks/useMessageEventDelegate.uts 中的 DOM API 和 window.open，替换为 uni-app API
|
||
- [ ] 修复 servers/audioUploader.uts 中的 URL.revokeObjectURL，添加条件编译保护
|
||
- [ ] 修复 utils/streamRequest.uts 中的微信小程序流式请求实现，使用 enableChunked 和 onChunkReceived
|
||
- [ ] 验证 pages/webview/webview.uvue 在微信小程序中的兼容性，检查业务域名配置
|
||
- [ ] 验证自定义导航栏组件在微信小程序中是否正常工作
|
||
- [ ] 在微信开发者工具中编译测试，验证所有功能是否正常 |