nepiedg
166 lines
3.5 KiB
Markdown
166 lines
3.5 KiB
Markdown
# 组件错误修复说明
|
||
|
||
## 问题描述
|
||
|
||
微信小程序报错：
|
||
```
|
||
Error: components/SmokeRecordDialog.js 已被代码依赖分析忽略，无法被其他模块引用
|
||
```
|
||
|
||
## 解决方案
|
||
|
||
### 1. 调整组件目录结构
|
||
|
||
**之前：**
|
||
```
|
||
components/
|
||
└── SmokeRecordDialog.vue ❌ 不符合 uni-app 规范
|
||
```
|
||
|
||
**之后：**
|
||
```
|
||
components/
|
||
└── smoke-record-dialog/
|
||
├── smoke-record-dialog.vue ✅ 符合规范
|
||
└── README.md
|
||
```
|
||
|
||
### 2. 更改组件实现方式
|
||
|
||
- 从 Vue 3 Composition API (`<script setup>`) 改为 **Vue 2 Options API**
|
||
- 确保更好的微信小程序兼容性
|
||
|
||
### 3. 配置 easycom 自动导入
|
||
|
||
在 `pages.json` 中添加配置：
|
||
|
||
```json
|
||
{
|
||
"easycom": {
|
||
"autoscan": true,
|
||
"custom": {
|
||
"^smoke-record-dialog$": "@/components/smoke-record-dialog/smoke-record-dialog.vue"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4. 更新组件使用方式
|
||
|
||
**之前（需要手动导入）：**
|
||
```vue
|
||
<script setup>
|
||
import SmokeRecordDialog from '@/components/SmokeRecordDialog.vue'
|
||
</script>
|
||
|
||
<template>
|
||
<SmokeRecordDialog />
|
||
</template>
|
||
```
|
||
|
||
**之后（自动导入）：**
|
||
```vue
|
||
<script setup>
|
||
// 无需 import，自动导入
|
||
</script>
|
||
|
||
<template>
|
||
<smoke-record-dialog />
|
||
</template>
|
||
```
|
||
|
||
## 修改文件清单
|
||
|
||
### 新增文件
|
||
- ✅ `components/smoke-record-dialog/smoke-record-dialog.vue` - 新组件文件
|
||
- ✅ `components/smoke-record-dialog/README.md` - 组件文档
|
||
|
||
### 修改文件
|
||
- ✅ `pages.json` - 添加 easycom 配置
|
||
- ✅ `pages/index/index.vue` - 更新组件引用方式
|
||
- ✅ `components/README.md` - 更新使用文档
|
||
|
||
### 删除文件
|
||
- ✅ `components/SmokeRecordDialog.vue` - 旧组件文件（已迁移）
|
||
|
||
## 关键变更点
|
||
|
||
### 1. 命名规范
|
||
- ❌ `SmokeRecordDialog` (PascalCase)
|
||
- ✅ `smoke-record-dialog` (kebab-case)
|
||
|
||
### 2. 目录结构
|
||
- ❌ 单文件组件直接放在 components 下
|
||
- ✅ 组件放在同名文件夹内
|
||
|
||
### 3. API 风格
|
||
- ❌ Composition API (`<script setup>`)
|
||
- ✅ Options API (更好的兼容性)
|
||
|
||
### 4. 导入方式
|
||
- ❌ 手动 import
|
||
- ✅ easycom 自动导入
|
||
|
||
## 测试检查
|
||
|
||
使用前请确认：
|
||
|
||
1. ✅ 微信开发者工具中重新编译项目
|
||
2. ✅ 检查控制台是否还有依赖分析错误
|
||
3. ✅ 测试弹框打开/关闭功能
|
||
4. ✅ 测试表单提交功能
|
||
5. ✅ 测试两种模式（抽烟/忍住）
|
||
|
||
## 使用示例
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<button @tap="showDialog = true">打开弹框</button>
|
||
|
||
<!-- 组件自动导入，无需 import -->
|
||
<smoke-record-dialog
|
||
v-model:show="showDialog"
|
||
type="smoke"
|
||
@submit="handleSubmit"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const showDialog = ref(false)
|
||
|
||
function handleSubmit(data) {
|
||
console.log('提交数据:', data)
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 相关文档
|
||
|
||
- [uni-app 组件规范](https://uniapp.dcloud.net.cn/component/)
|
||
- [easycom 配置说明](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)
|
||
- [微信小程序组件开发](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
|
||
|
||
## 注意事项
|
||
|
||
⚠️ **重要提示：**
|
||
|
||
1. 组件使用 Options API，与 Vue 2 兼容
|
||
2. 支持 `v-model:show` 双向绑定（uni-app 已支持）
|
||
3. 已配置 easycom，全局自动导入
|
||
4. 组件名必须使用小写加连字符（kebab-case）
|
||
5. 修改后需要重新编译微信小程序
|
||
|
||
## 问题排查
|
||
|
||
如果仍然出现问题，请尝试：
|
||
|
||
1. 清除微信开发者工具缓存
|
||
2. 重新编译项目
|
||
3. 检查 `pages.json` 中的 easycom 配置
|
||
4. 确认组件文件路径正确
|
||
5. 查看控制台详细错误信息
|