smt/CHANGELOG_COMPONENT.md

组件错误修复说明

问题描述

微信小程序报错：

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 中添加配置：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^smoke-record-dialog$": "@/components/smoke-record-dialog/smoke-record-dialog.vue"
    }
  }
}

4. 更新组件使用方式

之前（需要手动导入）：

<script setup>
import SmokeRecordDialog from '@/components/SmokeRecordDialog.vue'
</script>

<template>
  <SmokeRecordDialog />
</template>

之后（自动导入）：

<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. ✅ 测试两种模式（抽烟/忍住）

使用示例

<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 组件规范
• easycom 配置说明
• 微信小程序组件开发

注意事项

⚠️ 重要提示：

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. 查看控制台详细错误信息