diff --git a/.gitignore b/.gitignore index 9b74aa9..3c95d0c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /unpackage/ -/node_modules/ \ No newline at end of file +/node_modules/ +/docs/ \ No newline at end of file diff --git a/docs/H5端CSS引入问题解决方案.md b/docs/H5端CSS引入问题解决方案.md deleted file mode 100644 index b790af1..0000000 --- a/docs/H5端CSS引入问题解决方案.md +++ /dev/null @@ -1,318 +0,0 @@ -# H5端CSS引入问题解决方案 - -## ❌ 错误提示 - -``` -iconfont.css:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec. -``` - -## 🔍 问题原因 - -在 `main.js` 中使用了 **错误的方式** 引入CSS文件： - -```javascript -// ❌ 错误：尝试将CSS作为JavaScript模块导入 -import './static/iconfont/iconfont.css' -``` - -这种 `import` 语法在H5端会导致浏览器尝试将CSS文件作为JavaScript模块加载，从而产生MIME类型错误。 - -## ✅ 解决方案 - -### 方案一：在 App.vue 中使用 @import（推荐） - -在 `App.vue` 的 ` -``` - -**优点：** -- ✅ 所有平台兼容（H5、小程序、App） -- ✅ 符合CSS规范 -- ✅ 全局生效 - -### 方案二：条件编译（如果必须在 main.js 中引入） - -如果确实需要在 `main.js` 中引入，使用条件编译： - -```javascript -// #ifndef H5 -import './static/iconfont/iconfont.css' -// #endif -``` - -然后在 `App.vue` 中单独为H5引入： - -```vue - -``` - -## 📋 CSS引入方式对比 - -### JavaScript import（不推荐用于CSS） - -```javascript -// ❌ 在 main.js 中 -import './static/iconfont/iconfont.css' -``` - -**问题：** -- H5端会报MIME类型错误 -- 将CSS当作JavaScript模块处理 - -### CSS @import（推荐） - -```vue - - -``` - -**优点：** -- 所有平台兼容 -- 符合CSS标准 -- 不会产生MIME类型错误 - -### 使用 -``` - -## 🔧 修复步骤 - -### Step 1: 删除 main.js 中的CSS import - -打开 `main.js`，找到并删除或注释掉： - -```javascript -// import './static/iconfont/iconfont.css' // 删除这行 -``` - -### Step 2: 确认 App.vue 中的引入 - -确保 `App.vue` 中有正确的CSS引入： - -```vue - -``` - -### Step 3: 清除缓存并重新编译 - -1. 关闭开发服务器 -2. 清除浏览器缓存 -3. 重新运行 `npm run dev:h5` 或点击HBuilderX的运行按钮 - -## 🎯 最佳实践 - -### 全局CSS引入位置 - -**推荐顺序：** - -```vue - - -``` - -### 路径写法 - -**绝对路径（推荐）：** -```css -@import url("/static/iconfont/iconfont.css"); -``` - -**相对路径：** -```css -@import url("./static/iconfont/iconfont.css"); -@import url("@/static/iconfont/iconfont.css"); -``` - -**注意：** 在不同平台上路径解析可能有差异，推荐使用绝对路径。 - -## 🚫 常见错误 - -### 错误1：在 main.js 中 import CSS - -```javascript -// ❌ 错误 -import './styles/global.css' -import '@/static/iconfont/iconfont.css' -``` - -**解决：** 改用 App.vue 的 `@import` - -### 错误2：路径不正确 - -```css -/* ❌ 错误：路径错误 */ -@import url("static/iconfont/iconfont.css"); - -/* ✅ 正确：使用正确的路径 */ -@import url("/static/iconfont/iconfont.css"); -``` - -### 错误3：缺少分号 - -```css -/* ❌ 错误：缺少分号 */ -@import url("/static/iconfont/iconfont.css") - -/* ✅ 正确：添加分号 */ -@import url("/static/iconfont/iconfont.css"); -``` - -### 错误4：在 scoped 样式中引入 - -```vue - - - - - -``` - -## 📊 平台兼容性 - -| 引入方式 | H5 | 小程序 | App | 推荐 | -|---------|----|----|-----|-----| -| main.js import | ❌ | ✅ | ✅ | ❌ | -| App.vue @import | ✅ | ✅ | ✅ | ✅ | -| style src | ✅ | ✅ | ✅ | ✅ | -| 条件编译 | ✅ | ✅ | ✅ | ⚠️ | - -## 🔍 调试方法 - -### 1. 检查CSS是否加载 - -在浏览器开发者工具中： - -``` -F12 → Network → Filter: CSS → 查找 iconfont.css -``` - -**成功标志：** -- 状态码：200 -- Type: stylesheet -- Size: 文件大小正常 - -### 2. 检查字体文件 - -``` -F12 → Network → Filter: Font → 查找 iconfont.ttf/woff -``` - -### 3. 检查控制台错误 - -``` -F12 → Console → 查看是否有错误信息 -``` - -### 4. 验证样式生效 - -```javascript -// 在控制台执行 -document.querySelector('.iconfont') -// 应该能找到使用了 iconfont 类的元素 -``` - -## ✅ 验证成功 - -修复后，应该看到： - -1. ✅ H5端控制台无CSS加载错误 -2. ✅ 图标正常显示 -3. ✅ Network 中 iconfont.css 状态码为 200 -4. ✅ 字体文件正常加载 - -## 📝 注意事项 - -### uni-app 项目特点 - -1. **多平台编译** - - H5端使用浏览器标准 - - 小程序有自己的规范 - - App使用原生渲染 - -2. **路径处理** - - `@/` 代表项目根目录 - - `/static/` 代表静态资源目录 - - 不同平台路径解析略有差异 - -3. **样式隔离** - - `scoped` 样式只在当前组件生效 - - 全局样式在 App.vue 中引入 - - 不要在 scoped 中引入全局CSS - -### Vite 项目特点 - -如果使用 Vite 构建（HBuilderX 3.2+）： - -```javascript -// main.js 中可以使用（但不推荐） -import './static/iconfont/iconfont.css' -``` - -但为了兼容性，仍然推荐在 App.vue 中使用 `@import`。 - -## 🎉 总结 - -### 问题 -在 `main.js` 中使用 `import` 引入CSS导致H5端报错。 - -### 解决 -1. ✅ 删除 `main.js` 中的 CSS import -2. ✅ 在 `App.vue` 的 ` -``` - -#### 方法 B：在 main.js 中引入 - -```javascript -// main.js -import './static/iconfont/iconfont.css' -``` - -### 第六步：使用图标 - -#### 使用方式 1：Unicode 方式 - -```vue - - - -``` - -#### 使用方式 2：Font Class 方式（推荐） - -```vue - - - -``` - -#### 使用方式 3：封装为组件 - -创建 `components/IconfontIcon/IconfontIcon.vue`： - -```vue - - - - - -``` - -**使用组件：** - -```vue - - - -``` - ---- - -## 📦 方式二：使用在线链接（不推荐小程序） - -### 第一步：获取在线链接 - -1. 在阿里图标库"我的项目"中 -2. 点击"Font class" -3. 点击"查看在线链接" -4. 复制 CSS 链接 - -### 第二步：引入在线 CSS - -在 `App.vue` 中： - -```vue - -``` - -**⚠️ 注意：** 微信小程序不支持外部字体文件，必须使用方式一！ - ---- - -## 📦 方式三：使用 Symbol 方式（SVG） - -### 第一步：获取 Symbol 代码 - -1. 在"我的项目"中 -2. 点击"Symbol" -3. 点击"生成代码" -4. 复制生成的 JS 链接 - -### 第二步：下载 JS 文件 - -将 JS 文件下载到 `static/iconfont/iconfont.js` - -### 第三步：引入并使用 - -在 `App.vue` 或需要的页面中： - -```vue - - - - - -``` - -**⚠️ 注意：** 小程序对 SVG 支持有限，推荐使用方式一！ - ---- - -## 🎯 最佳实践建议 - -### 1. 使用 Font Class 方式（方式一） - -**优点：** -- ✅ 兼容性好，支持所有平台 -- ✅ 可以自定义颜色和大小 -- ✅ 语义化强，易于维护 -- ✅ 体积小，加载快 - -**缺点：** -- ❌ 只支持单色图标 - -### 2. 创建图标组件库 - -``` -components/ -├── IconfontIcon/ -│ └── IconfontIcon.vue # 通用图标组件 -``` - -### 3. 统一管理图标名称 - -创建 `config/icons.js`： - -```javascript -// 图标配置 -export const ICONS = { - HOME: 'home', - USER: 'user', - SEARCH: 'search', - LOCATION: 'location', - PHONE: 'phone', - // ... 更多图标 -} -``` - -使用： - -```vue - - - -``` - ---- - -## 🔧 常见问题 - -### Q1: 小程序中图标不显示？ - -**解决方案：** -- 确保使用本地字体文件，不要使用在线链接 -- 检查 CSS 中的字体路径是否正确 -- 确保字体文件已正确复制到 `static/iconfont/` 目录 - -### Q2: 图标显示为方框？ - -**解决方案：** -- 检查字体文件是否完整 -- 检查 `@font-face` 的 `font-family` 名称是否一致 -- 清除缓存重新编译 - -### Q3: 如何更新图标库？ - -1. 在阿里图标库添加新图标到项目 -2. 重新下载至本地 -3. 替换 `static/iconfont/` 下的所有文件 -4. 清除缓存，重新编译 - -### Q4: H5 和小程序路径不一致？ - -**解决方案：** - -使用条件编译： - -```css -@font-face { - font-family: "iconfont"; - /* #ifdef H5 */ - src: url('/static/iconfont/iconfont.woff2') format('woff2'); - /* #endif */ - /* #ifdef MP-WEIXIN */ - src: url('./iconfont.ttf') format('truetype'); - /* #endif */ -} -``` - ---- - -## 📝 示例代码 - -### 完整示例：登录按钮 - -```vue - - - -``` - ---- - -## 🎨 推荐使用的图标 - -### 常用图标 -- `icon-home` - 首页 -- `icon-user` - 用户 -- `icon-search` - 搜索 -- `icon-location` - 位置 -- `icon-phone` - 电话 -- `icon-message` - 消息 -- `icon-setting` - 设置 -- `icon-star` - 收藏 -- `icon-share` - 分享 -- `icon-close` - 关闭 - ---- - -## 📚 相关资源 - -- [阿里图标库官网](https://www.iconfont.cn/) -- [uni-app 字体图标文档](https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87) -- [CSS @font-face](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face) - ---- - -## ✅ 检查清单 - -- [ ] 已下载图标文件到 `static/iconfont/` 目录 -- [ ] 已修改 CSS 中的字体文件路径 -- [ ] 已在 App.vue 中引入 iconfont.css -- [ ] 已测试图标显示正常 -- [ ] 已封装图标组件（可选） -- [ ] 已统一管理图标名称（可选） - diff --git a/docs/阿里图标库快速开始.md b/docs/阿里图标库快速开始.md deleted file mode 100644 index d1bad46..0000000 --- a/docs/阿里图标库快速开始.md +++ /dev/null @@ -1,407 +0,0 @@ -# 阿里图标库快速开始 🚀 - -## 一、5分钟快速上手 - -### Step 1: 下载图标文件（2分钟） - -1. 访问 https://www.iconfont.cn/ -2. 登录后搜索图标，点击"添加入库" -3. 购物车 → 添加至项目（没有项目先创建） -4. 我的项目 → 下载至本地 - -### Step 2: 放置文件（1分钟） - -解压下载的文件，将以下4个文件复制到 `static/iconfont/` 目录： - -``` -✅ iconfont.css -✅ iconfont.ttf -✅ iconfont.woff -✅ iconfont.woff2 -``` - -### Step 3: 修改CSS路径（1分钟） - -打开 `static/iconfont/iconfont.css`，将字体路径修改为相对路径： - -```css -@font-face { - font-family: "iconfont"; - src: url('./iconfont.woff2?t=xxx') format('woff2'), - url('./iconfont.woff?t=xxx') format('woff'), - url('./iconfont.ttf?t=xxx') format('truetype'); -} -``` - -### Step 4: 全局引入（1分钟） - -在 `App.vue` 的 ` -``` - -### Step 5: 开始使用 ✨ - -```vue - -``` - ---- - -## 二、推荐使用方式 - -### 方式 A：使用封装的组件（最推荐）👍 - -```vue - - - -``` - -**优点：** -- ✅ 统一管理，易于维护 -- ✅ 支持动态修改大小和颜色 -- ✅ 语义清晰 -- ✅ 支持点击事件 - -### 方式 B：使用配置常量（推荐） - -```vue - - - -``` - -**优点：** -- ✅ 统一图标名称 -- ✅ 避免拼写错误 -- ✅ IDE 自动补全 -- ✅ 便于重构 - -### 方式 C：直接使用类名 - -```vue - -``` - ---- - -## 三、常用场景示例 - -### 场景1：导航栏图标 - -```vue - - - -``` - -### 场景2：按钮图标 - -```vue - - - -``` - -### 场景3：列表项图标 - -```vue - -``` - -### 场景4：状态图标 - -```vue - - - -``` - ---- - -## 四、组件API说明 - -### IconfontIcon 组件 - -**Props:** - -| 参数 | 类型 | 默认值 | 说明 | -|------|------|--------|------| -| name | String | - | 图标名称（必填），如：'home' 或 'icon-home' | -| size | String/Number | 32 | 图标大小，单位rpx | -| color | String | - | 图标颜色，支持十六进制、rgb等 | -| bold | Boolean | false | 是否加粗 | - -**Events:** - -| 事件名 | 说明 | 回调参数 | -|--------|------|----------| -| click | 点击图标时触发 | event | - -**使用示例:** - -```vue - -``` - ---- - -## 五、配置说明 - -### 图标名称配置（config/icons.js） - -```javascript -export const ICONS = { - HOME: 'home', - USER: 'user', - SEARCH: 'search', - // ... 更多图标 -} -``` - -### 尺寸预设 - -```javascript -export const ICON_SIZES = { - MINI: 24, // 24rpx - SMALL: 28, // 28rpx - NORMAL: 32, // 32rpx（默认） - LARGE: 40, // 40rpx - XLARGE: 48, // 48rpx -} -``` - -### 颜色预设 - -```javascript -export const ICON_COLORS = { - PRIMARY: '#13C57C', // 主色调 - SECONDARY: '#256BFA', // 次要色 - SUCCESS: '#13C57C', // 成功 - WARNING: '#FF9800', // 警告 - DANGER: '#F44336', // 危险 - TEXT: '#333333', // 文本色 -} -``` - ---- - -## 六、常见问题 - -### Q1: 图标不显示？ - -**检查清单：** -- [ ] 文件是否已复制到 `static/iconfont/` 目录 -- [ ] CSS路径是否正确修改 -- [ ] 是否已在 App.vue 中引入 -- [ ] 图标类名是否正确（如：`icon-home`） -- [ ] 清除缓存并重新编译 - -### Q2: 如何查看可用的图标？ - -1. 打开下载包中的 `demo_index.html` -2. 或查看 `iconfont.css` 中的类名 -3. 类名格式通常为 `.icon-xxx:before` - -### Q3: 如何更新图标？ - -1. 在阿里图标库添加新图标到项目 -2. 重新下载至本地 -3. 替换 `static/iconfont/` 下的所有文件 -4. 清除缓存，重新编译 - -### Q4: 小程序能用在线链接吗？ - -❌ 不能！微信小程序必须使用本地字体文件。 - ---- - -## 七、最佳实践 - -### ✅ 推荐做法 - -1. **统一管理图标名称** - ```javascript - // 使用配置文件 - import { ICONS } from '@/config/icons' - ``` - -2. **使用封装的组件** - ```vue - - ``` - -3. **预设常用尺寸和颜色** - ```javascript - import { ICON_SIZES, ICON_COLORS } from '@/config/icons' - ``` - -4. **语义化命名** - ```javascript - const ICONS = { - HOME: 'home', // ✅ 语义清晰 - USER_CENTER: 'user', // ✅ 明确用途 - } - ``` - -### ❌ 不推荐做法 - -1. **硬编码图标名称** - ```vue - - ``` - -2. **使用在线链接（小程序）** - ```css - @import url("//at.alicdn.com/xxx.css"); /* ❌ 小程序不支持 */ - ``` - -3. **直接使用 Unicode** - ```vue - - ``` - ---- - -## 八、测试页面 - -已为你创建了测试页面，可以查看各种使用方式： - -**路径:** `pages/demo/iconfont-demo.vue` - -在 `pages.json` 中添加页面配置即可访问： - -```json -{ - "path": "pages/demo/iconfont-demo", - "style": { - "navigationBarTitleText": "图标示例" - } -} -``` - ---- - -## 九、相关文件 - -``` -项目结构： -├── components/ -│ └── IconfontIcon/ -│ └── IconfontIcon.vue # 图标组件 -├── config/ -│ └── icons.js # 图标配置 -├── static/ -│ └── iconfont/ -│ ├── iconfont.css # 样式文件 -│ ├── iconfont.ttf # 字体文件 -│ ├── iconfont.woff # 字体文件 -│ ├── iconfont.woff2 # 字体文件 -│ └── README.md # 说明文档 -├── pages/ -│ └── demo/ -│ └── iconfont-demo.vue # 测试页面 -└── docs/ - ├── 阿里图标库引入指南.md # 详细文档 - └── 阿里图标库快速开始.md # 本文档 -``` - ---- - -## 十、总结 - -✅ **记住这三步：** - -1. **下载** - 从阿里图标库下载文件 -2. **放置** - 复制到 `static/iconfont/` 目录 -3. **引入** - 在 `App.vue` 中引入 CSS - -🎉 **就是这么简单！** - -如有问题，请参考详细文档：`docs/阿里图标库引入指南.md` -