sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
冯辉
2025-11-12 11:45:14 +08:00
parent b864904507
commit 73f5cb8750
15 changed files with 2 additions and 3285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
docs/H5端CSS引入问题解决方案.md
View File

@@ -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` 的 `<style>` 标签中使用CSS的 `@import` 语法：
```vue
<style>
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
</style>
```
**优点：**
- ✅ 所有平台兼容（H5、小程序、App）
- ✅ 符合CSS规范
- ✅ 全局生效
### 方案二：条件编译（如果必须在 main.js 中引入）
如果确实需要在 `main.js` 中引入，使用条件编译：
```javascript
// #ifndef H5
import './static/iconfont/iconfont.css'
// #endif
```
然后在 `App.vue` 中单独为H5引入：
```vue
<style>
/* #ifdef H5 */
@import url("/static/iconfont/iconfont.css");
/* #endif */
</style>
```
## 📋 CSS引入方式对比
### JavaScript import（不推荐用于CSS）
```javascript
// ❌ 在 main.js 中
import './static/iconfont/iconfont.css'
```
**问题：**
- H5端会报MIME类型错误
- 将CSS当作JavaScript模块处理
### CSS @import（推荐）
```vue
<!-- ✅ 在 App.vue 或其他 .vue 文件中 -->
<style>
@import url("/static/iconfont/iconfont.css");
</style>
```
**优点：**
- 所有平台兼容
- 符合CSS标准
- 不会产生MIME类型错误
### 使用 <style> 标签的 src 属性（可选）
```vue
<style src="/static/iconfont/iconfont.css"></style>
```
## 🔧 修复步骤
### Step 1: 删除 main.js 中的CSS import
打开 `main.js`，找到并删除或注释掉：
```javascript
// import './static/iconfont/iconfont.css' // 删除这行
```
### Step 2: 确认 App.vue 中的引入
确保 `App.vue` 中有正确的CSS引入：
```vue
<style>
@import '@/common/animation.css';
@import '@/common/common.css';
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
</style>
```
### Step 3: 清除缓存并重新编译
1. 关闭开发服务器
2. 清除浏览器缓存
3. 重新运行 `npm run dev:h5` 或点击HBuilderX的运行按钮
## 🎯 最佳实践
### 全局CSS引入位置
**推荐顺序：**
```vue
<!-- App.vue -->
<style>
/* 1. 重置样式 / 通用样式 */
@import '@/common/reset.css';
@import '@/common/common.css';
/* 2. 第三方库样式 */
@import url("/static/iconfont/iconfont.css");
/* 3. 动画效果 */
@import '@/common/animation.css';
/* 4. 项目全局样式 */
/* 自定义全局样式 */
</style>
```
### 路径写法
**绝对路径（推荐）：**
```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
<!-- ❌ 不推荐：在 scoped 样式中引入全局CSS -->
<style scoped>
@import url("/static/iconfont/iconfont.css");
</style>
<!-- ✅ 推荐：全局样式不要加 scoped -->
<style>
@import url("/static/iconfont/iconfont.css");
</style>
```
## 📊 平台兼容性
| 引入方式 | 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` 的 `<style>` 中使用 `@import`
3. ✅ 重启开发服务器
### 最佳实践
- 所有全局CSS在 `App.vue` 中通过 `@import` 引入
- 使用绝对路径：`/static/...`
- 不要在 `scoped` 样式中引入全局CSS
- 保持引入顺序：重置 → 第三方 → 动画 → 自定义
## 📚 相关文档
- [uni-app 样式导入](https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E6%A0%B7%E5%BC%8F%E5%AF%BC%E5%85%A5)
- [CSS @import](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import)
- [Vite 静态资源处理](https://cn.vitejs.dev/guide/assets.html)
---
**该问题已解决！** 🎉
现在H5端应该可以正常加载CSS文件了。如果还有问题，请检查：
1. 文件路径是否正确
2. 是否清除了浏览器缓存
3. 是否重启了开发服务器

222
docs/主包体积优化方案.md
View File

@@ -1,222 +0,0 @@
# 微信小程序主包体积优化方案
## 当前主包体积分析
根据代码依赖分析图，主包体积为 **2.74MB**，主要组成部分：
### 1. 静态资源 (848KB)
- **images (507KB)**: 包含多个大图片文件
- `video-bj2.png`: 156KB
- `video-jt.png`: 126KB
- `spxx-k.png`: 54KB
- `bj.jpg`: 52KB
- `imgs/avatar.jpg`: 48KB
- **icon (187KB)**: 图标文件
### 2. JavaScript 库文件
- **uni_modules/lime-echart/static/echarts.min.js**: 568KB ⚠️
- **lib/lunar-javascript@1.7.2.js**: 301KB ⚠️
- **lib/highlight/highlight-uni.min.js**: 166KB
- **common/vendor.js**: 293KB (未找到，可能已删除)
### 3. 其他
- **uni_modules**: 751KB
- **pages**: 363KB
- **common**: 316KB
---
## 优化方案
### 方案一：删除主包中未使用的大文件（立即执行）
#### 1.1 删除主包中的 echarts.min.js
**问题**: `uni_modules/lime-echart/static/echarts.min.js` (568KB) 在主包中，但只在 `packageCa` 分包中使用。
**解决方案**:
- ✅ 确认 `packageCa` 分包中已有 `packageCa/utilCa/echarts.min.js`
- ✅ 删除主包中的 `uni_modules/lime-echart/static/echarts.min.js`（如果不需要在主包使用）
- ⚠️ 注意：如果主包页面也需要使用 echarts，需要保留或按需加载
**操作步骤**:
```bash
# 检查主包中是否有页面使用 echarts
# 如果没有，可以删除或移动到分包
```
#### 1.2 删除主包中的 lunar-javascript@1.7.2.js
**问题**: `lib/lunar-javascript@1.7.2.js` (301KB) 在主包中，但只在 `packageA/pages/selectDate/selectDate.vue` 中使用。
**解决方案**:
- ✅ 确认 `packageA/lib/lunar-javascript@1.7.2.js` 已存在
- ✅ 删除主包中的 `lib/lunar-javascript@1.7.2.js`
- ✅ 更新 `packageA/pages/selectDate/selectDate.vue` 中的引用路径
**操作步骤**:
1. 确认 `packageA/lib/lunar-javascript@1.7.2.js` 存在
2. 删除 `lib/lunar-javascript@1.7.2.js`
3. 确保 `packageA/pages/selectDate/selectDate.vue` 使用分包内的文件
---
### 方案二：优化图片资源（预计减少 300-400KB）
#### 2.1 压缩大图片文件
**目标图片**:
- `static/images/train/video-bj2.png` (156KB) → 目标: <80KB
- `static/images/train/video-jt.png` (126KB) → 目标: <60KB
- `static/images/train/spxx-k.png` (54KB) → 目标: <30KB
- `static/images/train/bj.jpg` (52KB) → 目标: <30KB
- `static/imgs/avatar.jpg` (48KB) → 目标: <25KB
**工具推荐**:
- [TinyPNG](https://tinypng.com/) - PNG压缩
- [Squoosh](https://squoosh.app/) - 在线图片压缩
- [ImageOptim](https://imageoptim.com/) - 批量压缩
#### 2.2 将非首屏必需图片移到分包
**策略**:
- 将 `static/images/train/` 目录下的图片移到 `packageB` 分包（培训相关）
- 只在需要时加载这些图片
**操作步骤**:
1. 创建 `packageB/static/images/train/` 目录
2. 移动图片文件到分包
3. 更新相关页面的图片路径
---
### 方案三：优化 markdown 相关库（预计减少 166KB）
#### 3.1 将 highlight-uni.min.js 移到分包
**问题**: `lib/highlight/highlight-uni.min.js` (166KB) 在 `utils/markdownParser.js` 中使用，主要用于 chat 页面。
**解决方案**:
- 方案A: 将 markdown 相关库移到独立分包，按需加载
- 方案B: 使用更轻量的代码高亮库
- 方案C: 如果只在 chat 页面使用，可以移到 chat 页面所在的分包
**推荐方案**: 方案C - 将 markdown 相关库移到 chat 页面附近
**操作步骤**:
1. 创建 `pages/chat/lib/` 目录
2. 移动 `lib/highlight/` 和 `lib/markdown-it.min.js` 到该目录
3. 更新 `utils/markdownParser.js` 中的引用路径
---
### 方案四：清理未使用的 uni_modules（预计减少 100-200KB）
#### 4.1 检查 uni_modules 使用情况
**需要检查的模块**:
- `custom-waterfalls-flow` - 检查是否在主包使用
- `uni-data-select` - 检查是否在主包使用
- `uni-dateformat` - 检查是否在主包使用
- `uni-load-more` - 检查是否在主包使用
- `uni-popup` - 检查是否在主包使用
- `uni-steps` - 检查是否在主包使用
- `uni-swipe-action` - 检查是否在主包使用
- `uni-transition` - 检查是否在主包使用
**操作步骤**:
1. 搜索每个模块在主包中的使用情况
2. 如果只在分包中使用，可以考虑移除主包的引用
3. 使用 `easycom` 配置确保组件能正确加载
---
### 方案五：代码分割和按需加载
#### 5.1 使用分包预加载
在 `pages.json` 中配置分包预加载，优化用户体验：
```json
{
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["packageA"]
}
}
}
```
#### 5.2 动态导入大型库
对于只在特定场景使用的大型库，使用动态导入：
```javascript
// 示例：按需加载 echarts
const loadEcharts = async () => {
if (typeof require !== 'undefined') {
return require('../../utilCa/echarts.min.js');
} else {
return await import('../../utilCa/echarts.min.js');
}
};
```
---
## 优化效果预估
| 优化项 | 预计减少体积 | 优先级 |
|--------|------------|--------|
| 删除主包 echarts.min.js | 568KB | 🔴 高 |
| 删除主包 lunar-javascript | 301KB | 🔴 高 |
| 压缩图片资源 | 300-400KB | 🟡 中 |
| 优化 markdown 库 | 166KB | 🟡 中 |
| 清理未使用模块 | 100-200KB | 🟢 低 |
**总计预计减少**: 1.4MB - 1.6MB
**优化后主包体积**: 约 1.1MB - 1.3MB ✅
---
## 实施步骤
### 第一阶段：立即执行（预计减少 869KB）✅ 已完成
1. ✅ 删除主包中未使用的 `echarts.min.js` (567KB) - **已完成**
2. ✅ 删除主包中未使用的 `lunar-javascript@1.7.2.js` (301KB) - **已完成**
3. ✅ 验证分包中的文件引用正确 - **已验证**
**第一阶段优化结果**: 已减少 **868KB** 主包体积
### 第二阶段：图片优化（预计减少 300-400KB）
1. 压缩大图片文件
2. 将非首屏图片移到分包
3. 更新图片路径引用
### 第三阶段：代码优化（预计减少 166-366KB）
1. 优化 markdown 相关库的位置
2. 清理未使用的 uni_modules
3. 配置分包预加载
---
## 注意事项
1. **备份**: 在执行删除操作前，请先备份项目
2. **测试**: 每个优化步骤后都要进行完整测试
3. **引用路径**: 确保所有文件引用路径正确更新
4. **分包限制**: 注意微信小程序分包大小限制（单个分包不超过 2MB）
5. **主包限制**: 主包大小建议控制在 1.5MB 以内
---
## 验证方法
1. 使用微信开发者工具上传代码，查看主包体积
2. 使用代码依赖分析工具验证优化效果
3. 测试各个功能模块确保正常工作
4. 检查分包加载是否正常
---
## 后续维护建议
1. **定期检查**: 每月检查主包体积，防止体积反弹
2. **图片规范**: 建立图片压缩和优化规范
3. **依赖管理**: 新增依赖时评估对主包体积的影响
4. **代码审查**: 在代码审查时关注主包体积变化

207
docs/企业地址选择功能说明.md
View File

@@ -1,207 +0,0 @@
# 企业地址选择功能说明
## 功能概述
在企业信息补全页面（company-info.vue）中，点击"企业注册地点"字段的箭头时，会弹出一个五级联动选择器，用户可以选择省市区县街道社区的完整地址。
## 实现的功能
### 1. 五级联动选择
- **省级选择**：选择省/直辖市/自治区
- **市级选择**：根据选择的省，显示对应的市/地区
- **区县选择**：根据选择的市，显示对应的区/县
- **街道选择**：根据选择的区县，显示对应的街道/乡镇
- **社区选择**：根据选择的街道，显示对应的社区/居委会
### 2. 联动逻辑
- 当选择省级时，自动更新并重置市级及以下选项
- 当选择市级时，自动更新并重置区县及以下选项
- 当选择区县时，自动更新并重置街道及以下选项
- 当选择街道时，自动更新社区选项
- 所有联动过程均实时响应，无需额外操作
### 3. 地址格式
- 选择完成后，地址格式为：`省/市/区/街道/社区`
- 示例：`新疆维吾尔自治区/喀什地区/喀什市/学府街道/学府社区居委会`
- 地址各级信息都会保存，包括代码和名称
### 4. 数据存储
- 保存完整的地址字符串（`registeredAddress`）
- 保存各级行政区划代码和名称：
- 省：`provinceCode`、`provinceName`
- 市：`cityCode`、`cityName`
- 区县：`districtCode`、`districtName`
- 街道：`streetCode`、`streetName`
- 社区：`communityCode`、`communityName`
## 技术实现
### 组件架构
- **组件名称**：`area-cascade-picker`
- **组件位置**：`components/area-cascade-picker/area-cascade-picker.vue`
- **依赖组件**：`uni-popup`（uni-app官方弹窗组件）
### 核心技术
- **picker-view**：uni-app的多列选择器组件
- **五级联动**：通过监听选择变化，动态更新下级选项
- **树形数据结构**：地区数据采用嵌套的树形结构，每级都有`children`属性
### 数据格式
```javascript
{
code: '650000', // 行政区划代码
name: '新疆维吾尔自治区', // 名称
children: [ // 下级行政区
{
code: '653100',
name: '喀什地区',
children: [...]
}
]
}
```
### 数据流程
1. **打开地址选择器**
```javascript
// company-info.vue
const selectLocation = () => {
areaPicker.value?.open({
title: '选择企业注册地点',
maskClick: true,
success: (addressData) => {
// 处理选择结果
formData.registeredAddress = addressData.address
// 保存各级信息
formData.provinceCode = addressData.province?.code
formData.provinceName = addressData.province?.name
// ... 其他字段
}
})
}
```
2. **选择地址过程**
```javascript
// area-cascade-picker.vue
bindChange(e) {
// 检测哪一级发生变化
// 更新对应级别及其下级的选项列表
// 触发change回调（可选）
}
```
3. **确认选择**
```javascript
// area-cascade-picker.vue
confirm() {
const addressData = {
address: '新疆维吾尔自治区/喀什地区/喀什市/学府街道/学府社区居委会',
province: { code: '650000', name: '新疆维吾尔自治区' },
city: { code: '653100', name: '喀什地区' },
district: { code: '653101', name: '喀什市' },
street: { code: '65310101', name: '学府街道' },
community: { code: '6531010101', name: '学府社区居委会' }
}
// 调用success回调
callback(addressData)
}
```
## 文件结构
```
components/
└── area-cascade-picker/
└── area-cascade-picker.vue # 五级联动地址选择组件
pages/complete-info/
└── company-info.vue # 企业信息补全页面
```
## 数据字段
在 `company-info.vue` 的 `formData` 中的地址相关字段：
- `registeredAddress`: string - 完整地址（格式：省/市/区/街道/社区）
- `registeredAddressName`: string - 地址名称
- `provinceCode`: string - 省级行政区划代码
- `provinceName`: string - 省级名称
- `cityCode`: string - 市级行政区划代码
- `cityName`: string - 市级名称
- `districtCode`: string - 区县行政区划代码
- `districtName`: string - 区县名称
- `streetCode`: string - 街道行政区划代码
- `streetName`: string - 街道名称
- `communityCode`: string - 社区行政区划代码
- `communityName`: string - 社区名称
## 使用方法
### 用户操作流程
1. 在企业信息页面，点击"企业注册地点"右侧的箭头图标
2. 弹出五级联动地址选择器
3. 依次选择：
- 第一列：选择省/直辖市/自治区
- 第二列：选择市/地区（根据第一列自动更新）
- 第三列：选择区/县（根据第二列自动更新）
- 第四列：选择街道/乡镇（根据第三列自动更新）
- 第五列：选择社区/居委会（根据第四列自动更新）
4. 确认选择无误后，点击右上角"确认"按钮
5. 选择器关闭，地址自动填充到表单中
### 界面说明
- **顶部标题栏**：
- 左侧"取消"按钮：关闭选择器，不保存
- 中间标题：显示"选择企业注册地点"
- 右侧"确认"按钮：确认选择并保存
- **五列选择器**：
- 每列显示当前级别的所有选项
- 可上下滑动选择
- 选中项高亮显示
- 各列之间自动联动
## 注意事项
1. **数据来源**：
- 当前使用本地模拟数据，包含主要城市的五级地址
- 生产环境建议接入后端API，提供完整的全国地址数据
- 后端API接口：`/app/common/area/cascade`（需要实现）
2. **数据格式要求**：
- 必须是树形结构，每级通过`children`属性嵌套
- 每个节点必须包含`code`（行政区划代码）和`name`（名称）
- 最深五级：省 → 市 → 区县 → 街道 → 社区
3. **性能考虑**：
- 地址数据量大时，建议使用懒加载方式
- 可以先加载省市区，街道和社区按需加载
- 考虑使用缓存机制，避免重复加载
4. **兼容性**：
- 支持H5、微信小程序等多端
- 使用uni-app原生组件，兼容性好
## 后续优化建议
1. **数据优化**：
- 接入后端API，提供完整的全国地址数据
- 实现地址数据的懒加载
- 添加地址数据缓存机制
2. **功能增强**：
- 支持默认值回显（编辑时显示已选地址）
- 添加搜索功能，快速定位地址
- 支持手动输入详细地址（如门牌号）
- 增加常用地址保存功能
3. **用户体验**：
- 优化滑动选择的流畅度
- 添加选择预览功能
- 支持快速选择最近使用的地址
4. **数据扩展**：
- 支持国际地址选择
- 添加邮政编码自动填充
- 提供经纬度坐标（结合地理编码服务）

117
docs/企业我的页面功能说明.md
View File

@@ -1,117 +0,0 @@
# 企业我的页面功能说明
## 功能概述
本功能为企业用户提供了专门的"我的"页面和企业信息展示页面，实现了根据用户类型显示不同内容的功能。
## 页面结构
### 1. 企业我的页面 (`pages/mine/company-mine.vue`)
- **功能**: 企业用户的个人中心页面
- **特点**:
- 显示企业头像、名称和信息完整度
- 包含服务专区（实名认证、通知与提醒）
- 提供退出登录功能
- 点击头像区域可跳转到企业信息页面
### 2. 企业信息展示页面 (`pages/mine/company-info.vue`)
- **功能**: 显示详细的企业信息
- **特点**:
- 显示企业头像编辑功能
- 展示完整的企业信息（名称、统一社会代码、注册地点等）
- 支持编辑各项企业信息
- 包含企业联系人和法人信息
### 3. 修改后的我的页面 (`pages/mine/mine.vue`)
- **功能**: 根据用户类型显示不同的内容
- **特点**:
- 企业用户显示企业信息卡片
- 求职者用户显示个人简历信息
- 自动根据 `userInfo.isCompanyUser` 字段判断用户类型
## 用户类型判断
系统通过 `userInfo.isCompanyUser` 字段来判断用户类型：
- `0` = 企业用户
- `1` = 求职者
- `2` = 网格员
- `3` = 政府人员
## 页面跳转逻辑
### 从我的页面跳转
- **企业用户**: 点击头像区域 → 跳转到企业信息页面 (`/pages/mine/company-info`)
- **求职者用户**: 点击头像区域 → 跳转到简历页面 (`/packageA/pages/myResume/myResume`)
### 企业信息页面功能
- 点击头像 → 编辑头像（调用相册选择图片）
- 点击各项信息 → 跳转到对应的编辑页面（需要后续开发）
## 路由配置
新增的路由配置：
```json
{
"path": "pages/mine/company-mine",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path": "pages/mine/company-info",
"style": {
"navigationBarTitleText": "企业信息",
"navigationStyle": "custom"
}
}
```
## 测试页面
创建了测试页面 `pages/test/company-mine-test.vue` 用于测试功能：
- 用户类型切换测试
- 页面跳转测试
- 用户信息显示
## 样式特点
### 企业信息卡片
- 白色背景，圆角设计
- 阴影效果，现代化UI
- 头像圆形显示
- 信息完整度显示
### 企业信息页面
- 清晰的信息层级
- 可点击的编辑区域
- 统一的视觉风格
## 数据流
1. 用户登录时设置 `userInfo.isCompanyUser` 字段
2. 我的页面根据此字段判断显示内容
3. 企业用户点击头像跳转到企业信息页面
4. 企业信息页面展示详细的企业数据
## 后续开发建议
1. **编辑功能**: 为每个信息项创建对应的编辑页面
2. **数据接口**: 连接真实的企业信息API
3. **头像上传**: 完善头像上传功能
4. **表单验证**: 添加企业信息编辑的表单验证
5. **权限控制**: 根据用户权限控制可编辑的字段
## 使用方法
1. 在测试页面切换用户类型为企业用户
2. 访问我的页面，查看企业信息卡片
3. 点击头像区域跳转到企业信息页面
4. 在企业信息页面查看详细的企业信息
## 注意事项
- 确保用户类型字段正确设置
- 企业信息数据需要从后端API获取
- 头像上传功能需要配置服务器接口
- 编辑页面需要根据实际需求进行开发

187
docs/企业搜索功能实现说明.md
View File

@@ -1,187 +0,0 @@
# 企业搜索功能实现说明
## 功能概述
根据用户类型对发布岗位页面的"招聘公司"输入框进行不同的交互处理：
- **企业用户**：直接输入公司名称
- **网格员**：点击输入框跳转到企业搜索页面，支持模糊查询
## 实现细节
### 1. 用户类型判断
通过 `userInfo.isCompanyUser` 字段判断用户类型：
- `0`: 企业用户
- `1`: 求职者
- `2`: 网格员
- `3`: 政府人员
### 2. 页面修改
#### 发布岗位页面 (`pages/job/publishJob.vue`)
**模板修改：**
```vue
<!-- 企业用户：直接输入 -->
<input
v-if="isCompanyUser"
class="input"
placeholder="请输入公司名称"
v-model="formData.companyName"
/>
<!-- 网格员：点击跳转到搜索页面 -->
<view
v-else
class="company-selector"
@click="openCompanySearch"
>
<view class="selector-text" :class="{ 'placeholder': !formData.companyName }">
{{ formData.companyName || '请选择企业' }}
</view>
<view class="selector-icon">
<view class="arrow-icon">></view>
</view>
</view>
```
**脚本修改：**
- 添加用户类型判断逻辑
- 添加打开企业搜索页面的方法
- 添加页面显示时处理返回数据的逻辑
#### 企业搜索页面 (`pages/job/companySearch.vue`)
**功能特性：**
- 搜索框支持实时输入
- 防抖节流：500ms延迟执行搜索
- 调用接口：`/app/company/likeList`，参数：`name`
- 支持企业选择和数据回传
- 空状态和加载状态处理
**核心代码：**
```javascript
// 防抖搜索
const onSearchInput = () => {
if (debounceTimer) {
clearTimeout(debounceTimer);
}
debounceTimer = setTimeout(() => {
if (searchKeyword.value.trim()) {
searchCompanies();
} else {
searchResults.value = [];
}
}, 500);
};
// 搜索企业
const searchCompanies = async () => {
const response = await createRequest('/app/company/likeList', {
name: searchKeyword.value.trim()
}, 'GET', false);
if (response.code === 200) {
searchResults.value = response.data || [];
}
};
// 选择企业
const selectCompany = (company) => {
uni.navigateBack({
success: () => {
getApp().globalData = getApp().globalData || {};
getApp().globalData.selectedCompany = company;
}
});
};
```
### 3. 数据传递
使用全局数据传递选中的企业信息：
**企业搜索页面：**
```javascript
// 选择企业后设置全局数据
getApp().globalData.selectedCompany = company;
```
**发布岗位页面：**
```javascript
// 页面显示时检查全局数据
onShow(() => {
const app = getApp();
if (app.globalData && app.globalData.selectedCompany) {
const selectedCompany = app.globalData.selectedCompany;
formData.companyName = selectedCompany.name;
formData.companyId = selectedCompany.id;
// 清除全局数据
app.globalData.selectedCompany = null;
}
});
```
### 4. 页面配置
在 `pages.json` 中添加了企业搜索页面配置：
```json
{
"path": "pages/job/companySearch",
"style": {
"navigationBarTitleText": "选择企业",
"navigationStyle": "custom",
"disableScroll": false,
"enablePullDownRefresh": false,
"backgroundColor": "#f5f5f5"
}
}
```
### 5. 测试页面
创建了测试页面 `pages/test/company-search-test.vue` 用于验证功能：
- 用户类型切换
- 功能说明展示
- 直接跳转到发布岗位页面测试
## 使用说明
### 企业用户
1. 进入发布岗位页面
2. 招聘公司输入框为普通输入框
3. 直接输入公司名称
### 网格员
1. 进入发布岗位页面
2. 点击"招聘公司"输入框
3. 跳转到企业搜索页面
4. 输入企业名称进行搜索（支持防抖）
5. 选择企业后自动返回
6. 企业名称显示在输入框中
## 技术特点
1. **防抖节流**：搜索输入500ms延迟，避免频繁请求
2. **用户类型判断**：根据 `isCompanyUser` 字段动态显示不同交互
3. **数据传递**：使用全局数据实现页面间数据传递
4. **响应式设计**：支持不同屏幕尺寸
5. **错误处理**：完善的错误提示和空状态处理
## 接口说明
**搜索企业接口：**
- 地址：`/app/company/likeList`
- 方法：`GET`
- 参数：`name` (企业名称)
- 返回：企业列表数据
## 注意事项
1. 确保用户类型字段 `isCompanyUser` 正确设置
2. 搜索接口需要支持模糊查询
3. 企业数据需要包含 `id` 和 `name` 字段
4. 防抖时间可根据实际需求调整

118
docs/优化执行记录.md
View File

@@ -1,118 +0,0 @@
# 主包体积优化执行记录
## 优化时间
2024年（具体日期待补充）
## 已完成的优化
### 1. 删除主包中未使用的 echarts.min.js ✅
- **文件路径**: `uni_modules/lime-echart/static/echarts.min.js`
- **文件大小**: 567KB
- **删除原因**:
- 该文件只在 `packageCa` 分包中使用
- `packageCa` 分包已有自己的 `packageCa/utilCa/echarts.min.js`
- `l-echart` 组件通过 `init()` 方法接收 echarts 实例，不直接引用主包文件
- `lime-echart` 组件未被使用
- **影响范围**: 无影响，分包功能正常
### 2. 删除主包中未使用的 lunar-javascript@1.7.2.js ✅
- **文件路径**: `lib/lunar-javascript@1.7.2.js`
- **文件大小**: 301KB
- **删除原因**:
- 该文件只在 `packageA/pages/selectDate/selectDate.vue` 中使用
- `packageA` 分包已有自己的 `packageA/lib/lunar-javascript@1.7.2.js`
- 主包中没有任何页面使用该文件
- **影响范围**: 无影响，分包功能正常
### 3. 将 static/images/train 目录移到 packageB 分包 ✅
- **目录路径**: `static/images/train/`
- **目录大小**: 约 400-500KB
- **移动原因**:
- 该目录下的图片只在 `packageB` 分包中使用
- 包括 `video-bj2.png` (156KB)、`video-jt.png` (126KB) 等大图片
- **操作**:
- 移动到 `packageB/static/images/train/`
- 更新所有引用路径为 `/packageB/static/images/train/`
- **影响范围**: 无影响，分包功能正常
### 4. 删除未使用的 demo 页面 ✅
- **目录路径**: `pages/demo/`
- **删除原因**:
- 该目录不在 `pages.json` 中配置
- 仅包含演示文件，未实际使用
- **影响范围**: 无影响
## 优化效果
### 已减少体积
- **echarts.min.js**: 567KB
- **lunar-javascript@1.7.2.js**: 301KB
- **static/images/train/**: 约 400-500KB（移到 packageB 分包）
- **pages/demo/**: 已删除（未使用）
- **总计**: **约 1.27MB - 1.37MB**
### 优化前主包体积
- **2.74MB**
### 优化后主包体积（预估）
- **约 1.37MB - 1.47MB** (减少 50-50.5%)
### 当前状态
- **当前主包体积**: 2.19MB
- **目标**: < 1.5MB
- **还需减少**: 约 690KB
## 待执行的优化
### 1. 图片资源优化（预计减少 300-400KB）
- [ ] 压缩 `static/images/train/video-bj2.png` (156KB → <80KB)
- [ ] 压缩 `static/images/train/video-jt.png` (126KB → <60KB)
- [ ] 压缩 `static/images/train/spxx-k.png` (54KB → <30KB)
- [ ] 压缩 `static/images/train/bj.jpg` (52KB → <30KB)
- [ ] 压缩 `static/imgs/avatar.jpg` (48KB → <25KB)
- [ ] 将非首屏必需图片移到分包
### 2. Markdown 相关库优化（预计减少 166KB）
- **说明**: `lib/highlight/highlight-uni.min.js` (166KB) 在 `utils/markdownParser.js` 中使用
- **使用范围**:
- 主包: `pages/chat/chat.vue`
- 分包: `packageA/pages/moreJobs/moreJobs.vue`
- 组件: `components/md-render/md-render.vue`
- Store: `stores/userChatGroupStore.js`
- **建议**: 由于被主包和分包共同使用，暂时保留在主包。如需进一步优化，可考虑：
- 使用更轻量的代码高亮库
- 按需加载 highlight 库
- 将 chat 相关功能移到独立分包
### 3. uni_modules 清理（预计减少 100-200KB）
- [ ] 检查 `custom-waterfalls-flow` 是否在主包使用
- [ ] 检查 `uni-data-select` 是否在主包使用
- [ ] 检查 `uni-dateformat` 是否在主包使用
- [ ] 检查 `uni-load-more` 是否在主包使用
- [ ] 检查 `uni-popup` 是否在主包使用
- [ ] 检查 `uni-steps` 是否在主包使用
- [ ] 检查 `uni-swipe-action` 是否在主包使用
- [ ] 检查 `uni-transition` 是否在主包使用
## 验证方法
1. ✅ 使用微信开发者工具上传代码，查看主包体积
2. ✅ 使用代码依赖分析工具验证优化效果
3. ⏳ 测试各个功能模块确保正常工作
4. ⏳ 检查分包加载是否正常
## 注意事项
1. **备份**: 已删除的文件可以从版本控制中恢复
2. **测试**: 建议在测试环境完整测试后再发布
3. **引用路径**: 所有文件引用路径已验证正确
4. **分包限制**: 注意微信小程序分包大小限制（单个分包不超过 2MB）
5. **主包限制**: 主包大小建议控制在 1.5MB 以内
## 后续建议
1. **定期检查**: 每月检查主包体积，防止体积反弹
2. **图片规范**: 建立图片压缩和优化规范
3. **依赖管理**: 新增依赖时评估对主包体积的影响
4. **代码审查**: 在代码审查时关注主包体积变化

246
docs/地址数据懒加载优化方案.md
View File

@@ -1,246 +0,0 @@
# 地址数据懒加载优化方案
## 问题背景
地址JSON文件大小90M+，首次加载需要好几分钟，严重影响用户体验。
## 优化方案
### 方案1：懒加载 + 分段加载（已实现）⭐ 推荐
**核心思想**：分段加载 + 后台预加载，大幅减少首次等待时间
1. **首次加载（优化策略）**：
- **H5环境**：使用Range请求只加载前2MB数据，从中提取省份列表（几秒完成）
- **小程序环境**：如果完整数据已缓存，提取很快（< 1秒）
- **降级方案**：如果分段加载失败，加载完整数据（但只加载一次）
- **后台预加载**：提取省份列表后，在后台加载完整数据（不阻塞用户）
2. **按需加载**：用户选择省份后，从缓存的完整数据中提取该省份的详细数据（< 1秒）
3. **智能缓存**：完整数据会缓存，后续使用会很快
#### 性能对比
| 场景 | 优化前 | 优化后（懒加载+分段加载） |
|------|--------|--------------------------|
| 首次打开选择器（H5，无缓存） | 加载90M+（3-5分钟） | 分段加载前2MB提取省份列表（5-10秒） |
| 首次打开选择器（小程序，无缓存） | 加载90M+（3-5分钟） | 加载完整数据并提取省份列表（3-5分钟，但只加载一次） |
| 首次打开选择器（有缓存） | 加载90M+（3-5分钟） | 从缓存提取省份列表（< 1秒） |
| 选择省份（有缓存） | 无需加载 | 从缓存提取省份数据（< 1秒） |
| 切换省份（有缓存） | 无需加载 | 从缓存读取（< 1秒） |
**关键优化点**：
- ✅ **H5环境**：首次只需加载2MB数据，几秒内显示省份列表
- ✅ **后台预加载**：显示省份列表后，在后台加载完整数据（不阻塞用户）
- ✅ 完整数据只加载一次，之后永久缓存
- ✅ 后续所有操作都从缓存读取，秒开
- ✅ 用户体验大幅提升：首次打开几秒内可用，而不是等待几分钟
#### 使用方式
组件已自动使用懒加载模式，无需修改调用代码：
```javascript
// 正常使用，自动懒加载
areaPicker.value?.open({
success: (addressData) => {
console.log('选择的地址：', addressData)
}
})
```
### 方案2：服务器分片接口（最佳方案）🚀
如果服务器可以提供分片接口，首次加载性能会进一步提升：
**注意**：当前默认使用方案1（从完整数据提取）。如果服务器提供了分片接口，可以在 `addressDataLoaderLazy.js` 中设置 `useSplitApi = true` 来启用。
#### 需要的接口
1. **省份列表接口**（轻量级）
- URL: `http://124.243.245.42/ks_cms/address_provinces.json`
- 返回：只包含省份基本信息，不包含children
- 数据量：< 1MB
2. **省份详情接口**（按需加载）
- URL: `http://124.243.245.42/ks_cms/address_province_{code}.json`
- 返回：指定省份的完整数据（包含所有下级）
- 数据量：每个省份 2-5MB
#### 数据格式示例
**省份列表接口返回格式：**
```json
[
{
"code": "110000",
"name": "北京市",
"_hasChildren": true
},
{
"code": "120000",
"name": "天津市",
"_hasChildren": true
}
]
```
**省份详情接口返回格式：**
```json
{
"code": "110000",
"name": "北京市",
"children": [
{
"code": "110100",
"name": "北京市",
"children": [...]
}
]
}
```
#### 配置分片接口
在 `utils/addressDataLoaderLazy.js` 中配置：
```javascript
this.provinceListUrl = `${this.baseUrl}/address_provinces.json`;
this.provinceDetailUrl = `${this.baseUrl}/address_province_{code}.json`;
```
### 方案3：数据压缩
确保服务器启用 gzip 压缩，可以减少 70-80% 的传输大小：
- 原始大小：90MB
- 压缩后：18-27MB
- 加载时间：从 3-5分钟 减少到 1-2分钟
**服务器配置示例（Nginx）：**
```nginx
location /ks_cms/ {
gzip on;
gzip_types application/json;
gzip_min_length 1000;
}
```
## 数据分片工具
如果服务器无法提供分片接口，可以使用提供的工具脚本将完整数据分片。
### 使用 Node.js 脚本分片数据
创建 `scripts/splitAddressData.js`：
```javascript
const fs = require('fs');
const path = require('path');
// 读取完整地址数据
const fullDataPath = path.join(__dirname, '../data/address.json');
const fullData = JSON.parse(fs.readFileSync(fullDataPath, 'utf8'));
// 输出目录
const outputDir = path.join(__dirname, '../data/split');
// 创建输出目录
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
// 1. 生成省份列表（轻量级）
const provinceList = fullData.map(province => ({
code: province.code,
name: province.name,
_hasChildren: !!province.children && province.children.length > 0
}));
fs.writeFileSync(
path.join(outputDir, 'address_provinces.json'),
JSON.stringify(provinceList, null, 2),
'utf8'
);
console.log('✅ 省份列表已生成');
// 2. 为每个省份生成详情文件
fullData.forEach(province => {
const fileName = `address_province_${province.code}.json`;
fs.writeFileSync(
path.join(outputDir, fileName),
JSON.stringify(province, null, 2),
'utf8'
);
console.log(`✅ ${province.name} 详情已生成`);
});
console.log('✅ 数据分片完成！');
```
运行脚本：
```bash
node scripts/splitAddressData.js
```
然后将生成的文件上传到服务器。
## 降级方案
如果服务器不提供分片接口，懒加载器会自动降级：
1. **首次加载省份列表**：
- 尝试从完整数据缓存中提取（如果已缓存，很快）
- 如果未缓存，需要加载完整数据（仍然很慢，但只加载一次）
2. **加载省份详情**：
- 尝试从完整数据缓存中提取（如果已缓存，很快）
- 如果未缓存，需要加载完整数据（仍然很慢）
**建议**：即使使用降级方案，首次完整加载后，后续使用会很快（因为数据已缓存）。
## 最佳实践
1. **优先使用服务器分片接口**：性能最佳
2. **启用 gzip 压缩**：减少传输大小
3. **使用 CDN 加速**：提升加载速度
4. **合理设置缓存时间**：默认7天，可根据数据更新频率调整
## 配置说明
在 `utils/addressDataLoaderLazy.js` 中可以配置：
```javascript
// 数据源基础URL
this.baseUrl = 'http://124.243.245.42/ks_cms';
// 省份列表URL（轻量级）
this.provinceListUrl = `${this.baseUrl}/address_provinces.json`;
// 省份详情URL（按需加载）
this.provinceDetailUrl = `${this.baseUrl}/address_province_{code}.json`;
// 缓存有效期（天）
this.cacheExpireDays = 7;
```
## 性能监控
组件会在控制台输出加载日志，可以监控性能：
```
📥 开始加载: http://124.243.245.42/ks_cms/address_provinces.json
✅ 数据加载完成，耗时 2.34 秒
✅ 从缓存加载省份列表
📥 懒加载省份详情: 北京市 (110000)
✅ 数据加载完成，耗时 3.56 秒
```
## 总结
- ✅ **懒加载方案已实现**：首次加载从几分钟减少到几秒
- 🚀 **服务器分片接口**：可以进一步提升性能
- 💾 **智能缓存**：已加载的数据会缓存，切换时秒开
- 🔄 **自动降级**：即使服务器不支持分片，也能正常工作

284
docs/微信小程序组件依赖问题解决方案.md
View File

@@ -1,284 +0,0 @@
# 微信小程序组件依赖问题解决方案
## 问题描述
```
components/IconfontIcon/IconfontIcon.js 已被代码依赖分析忽略，无法被其他模块引用。
你可根据控制台中的【代码依赖分析】告警信息修改代码，或关闭【过滤无依赖文件】功能。
```
## 问题原因
1. **组件未被正确引用** - 组件文件存在但没有被任何页面或组件引用
2. **缺少 easycom 配置** - uni-app 项目需要在 `pages.json` 中配置组件自动引入
3. **文件路径问题** - 组件路径不正确或文件名不匹配
## ✅ 解决方案
### 方案一：配置 easycom 自动引入（推荐）✨
在 `pages.json` 中添加 `easycom` 配置：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
"^IconfontIcon$": "@/components/IconfontIcon/IconfontIcon.vue",
"^WxAuthLogin$": "@/components/WxAuthLogin/WxAuthLogin.vue"
}
}
}
```
**配置说明：**
- `autoscan: true` - 自动扫描 `components` 目录
- `custom` - 自定义组件路径映射
- `^IconfontIcon$` - 组件名称（大小写敏感）
- 配置后无需 import，直接在模板中使用
**使用方式：**
```vue
<template>
<!-- 无需 import，直接使用 -->
<IconfontIcon name="home" :size="48" />
<WxAuthLogin ref="loginRef" />
</template>
```
### 方案二：手动引入组件
如果不想使用 easycom，可以在需要的页面手动引入：
```vue
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
</script>
<template>
<IconfontIcon name="home" />
</template>
```
### 方案三：关闭"过滤无依赖文件"功能
如果组件确实暂时不需要使用，可以在微信开发者工具中关闭此功能：
1. 打开微信开发者工具
2. 点击右上角"详情"
3. 找到"本地设置"标签
4. 取消勾选"过滤无依赖文件"
**注意：** 不推荐此方法，因为会增加打包体积。
## 🔧 完整操作步骤
### Step 1: 确认文件结构
确保组件文件存在且路径正确：
```
components/
├── IconfontIcon/
│ └── IconfontIcon.vue ✅ 文件存在
└── WxAuthLogin/
└── WxAuthLogin.vue ✅ 文件存在
```
### Step 2: 修改 pages.json
已为你自动添加了 easycom 配置，位置在 `globalStyle` 后面。
### Step 3: 重启微信开发者工具
1. 关闭微信开发者工具
2. 重新打开项目
3. 等待编译完成
### Step 4: 清除缓存
如果问题仍然存在：
1. 点击顶部菜单"工具" → "清除缓存"
2. 选择"清除文件缓存"
3. 重新编译项目
### Step 5: 验证组件可用
在任意页面中测试：
```vue
<template>
<view>
<IconfontIcon name="home" :size="48" color="#13C57C" />
</view>
</template>
<script setup>
// 使用 easycom 后无需 import
</script>
```
## 📋 配置详解
### easycom 规则说明
```json
{
"easycom": {
// 是否自动扫描 components 目录
"autoscan": true,
// 自定义规则
"custom": {
// 格式: "匹配规则": "组件路径"
"^IconfontIcon$": "@/components/IconfontIcon/IconfontIcon.vue"
}
}
}
```
**匹配规则说明：**
- `^` - 字符串开始
- `$` - 字符串结束
- `^IconfontIcon$` - 精确匹配 `IconfontIcon`
- `^uni-(.*)` - 匹配所有 `uni-` 开头的组件
### 组件命名规范
**推荐命名：**
- ✅ `IconfontIcon` - 大驼峰命名
- ✅ `WxAuthLogin` - 大驼峰命名
- ✅ `MyCustomComponent` - 大驼峰命名
**不推荐：**
- ❌ `iconfontIcon` - 小驼峰
- ❌ `iconfont-icon` - 短横线
- ❌ `Iconfont_Icon` - 下划线
## 🎯 常见问题
### Q1: 配置后仍然报错？
**解决方法：**
1. 检查 `pages.json` 语法是否正确（JSON格式）
2. 确认组件路径是否正确
3. 重启微信开发者工具
4. 清除缓存后重新编译
### Q2: 组件找不到？
**检查清单：**
- [ ] 文件路径是否正确：`@/components/IconfontIcon/IconfontIcon.vue`
- [ ] 文件名大小写是否一致
- [ ] 组件名称是否与配置匹配
- [ ] 是否重启了开发者工具
### Q3: 在页面中使用组件报错？
**常见原因：**
```vue
<!-- ❌ 错误：使用了短横线命名 -->
<iconfont-icon name="home" />
<!-- ✅ 正确：使用大驼峰命名 -->
<IconfontIcon name="home" />
```
### Q4: 多个组件如何配置？
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
"^IconfontIcon$": "@/components/IconfontIcon/IconfontIcon.vue",
"^WxAuthLogin$": "@/components/WxAuthLogin/WxAuthLogin.vue",
"^CustomButton$": "@/components/CustomButton/CustomButton.vue"
}
}
}
```
### Q5: autoscan 和 custom 的区别？
**autoscan（自动扫描）：**
```
components/
├── CustomButton/
│ └── CustomButton.vue → 自动识别为 <CustomButton>
├── MyCard/
│ └── MyCard.vue → 自动识别为 <MyCard>
```
**custom（自定义规则）：**
```json
{
"custom": {
"^Button$": "@/components/CustomButton/CustomButton.vue"
}
}
```
使用 `<Button>` 会映射到 `CustomButton.vue`
## 🔍 调试方法
### 1. 查看编译日志
在微信开发者工具控制台查看编译信息：
```
点击顶部"编译" → 查看控制台输出
```
### 2. 检查组件是否被打包
1. 打开"详情" → "本地设置"
2. 查看"代码依赖分析"信息
3. 确认组件是否在依赖树中
### 3. 手动引入测试
```vue
<script setup>
// 临时测试：手动引入
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
console.log('组件加载成功:', IconfontIcon)
</script>
```
## ✅ 验证成功标志
配置成功后，应该看到：
1. ✅ 微信开发者工具控制台无警告
2. ✅ 组件可以正常显示
3. ✅ 无需 import 即可使用
4. ✅ 组件出现在代码依赖分析中
## 📚 相关文档
- [uni-app easycom 文档](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)
- [微信小程序代码依赖分析](https://developers.weixin.qq.com/miniprogram/dev/devtools/codecompile.html)
- [组件化开发文档](https://uniapp.dcloud.net.cn/tutorial/vue3-components.html)
## 🎉 总结
该问题已通过以下方式解决：
1. ✅ 在 `pages.json` 中添加了 `easycom` 配置
2. ✅ 配置了 `IconfontIcon` 和 `WxAuthLogin` 组件的自动引入
3. ✅ 组件现在可以在任何页面中直接使用，无需 import
**下一步：**
- 重启微信开发者工具
- 清除缓存
- 开始使用组件
如果问题仍然存在，请检查：
1. 文件路径是否正确
2. 文件名大小写是否一致
3. pages.json 语法是否正确
4. 是否已重启开发者工具

321
docs/微信授权登录功能说明.md
View File

@@ -1,321 +0,0 @@
# 微信授权登录功能说明
## 功能概述
本次开发实现了微信授权登录功能，当用户点击首页的特定功能时，会检查用户是否已登录，如果未登录则弹出授权弹窗，而不是直接跳转到登录页面。
## 主要功能点
### 1. 需要登录验证的功能入口
以下功能在点击时会进行登录验证：
- **附近工作** - 点击后跳转到附近工作列表页
- **九宫格服务功能** - 包含9个服务项：
- 服务指导
- 事业单位招录
- 简历制作
- 劳动政策指引
- 技能培训信息
- 技能评价指引
- 题库和考试
- 素质测评
- AI智能面试
- **职位列表** - 点击任意职位卡片查看详情
### 2. 登录弹窗功能
#### 弹窗特性
- 使用 `uni-popup` 组件实现弹窗效果
- 弹窗居中显示，支持关闭按钮
- 不可点击遮罩关闭，确保用户必须做出选择
#### 弹窗内容
- **Logo和标题** - 显示应用logo和欢迎信息
- **授权说明** - 列出三个要点：
- 保护您的个人信息安全
- 为您推荐更合适的岗位
- 享受完整的就业服务
- **授权按钮**：
- 微信小程序：使用 `open-type="getPhoneNumber"` 获取手机号
- H5/App：使用微信登录接口
- 测试登录按钮（仅H5/App环境显示）
- **用户协议** - 显示用户协议和隐私政策链接
### 3. 登录流程
#### 微信小程序登录流程
1. 用户点击"微信授权登录"按钮
2. 触发微信小程序的手机号授权
3. 获取到 `code`、`encryptedData`、`iv`
4. 调用后端 `/app/wxLogin` 接口
5. 后端返回 `token`
6. 存储 `token` 并获取用户信息
7. 如果用户信息不完整，跳转到完善信息页面
8. 关闭弹窗，继续用户之前的操作
#### H5/App登录流程
1. 用户点击"微信授权登录"按钮
2. 调用 `uni.login` 获取微信授权 `code`
3. 调用后端 `/app/wxLogin` 接口
4. 后续流程同上
#### 测试登录流程（仅开发环境）
1. 用户点击"测试账号登录"按钮
2. 使用测试账号密码登录
3. 后续流程同上
### 4. 登录状态管理
#### 状态恢复
- 应用启动时自动从本地缓存恢复用户信息
- 验证 `token` 是否有效
- 如果 `token` 失效，清除缓存但不跳转登录页
#### 状态检查
- 使用 `checkLogin()` 函数统一检查登录状态
- 检查 `token` 是否存在
- 检查 `hasLogin` 状态
- 如果未登录，自动打开授权弹窗
## 文件结构
```
ks-app-employment-service/
├── components/
│ └── WxAuthLogin/
│ └── WxAuthLogin.vue # 微信授权登录弹窗组件
├── pages/
│ └── index/
│ └── components/
│ └── index-one.vue # 首页组件（已修改）
├── stores/
│ └── useUserStore.js # 用户状态管理（已修改）
├── App.vue # 应用入口（已修改）
└── docs/
└── 微信授权登录功能说明.md # 本文档
```
## 核心代码说明
### 1. WxAuthLogin.vue 组件
这是一个可复用的微信授权登录弹窗组件，提供以下接口：
**Props**
- 无
**Events**
- `success` - 登录成功时触发
- `cancel` - 取消登录时触发
**Methods**
- `open()` - 打开弹窗
- `close()` - 关闭弹窗
**使用示例**
```vue
<template>
<WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess" />
</template>
<script setup>
import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
const wxAuthLoginRef = ref(null);
const handleLoginSuccess = () => {
console.log('登录成功');
// 执行登录后的操作
};
// 打开登录弹窗
const showLogin = () => {
wxAuthLoginRef.value?.open();
};
</script>
```
### 2. 登录检查函数
在 `index-one.vue` 中添加了统一的登录检查函数：
```javascript
// 登录检查函数
const checkLogin = () => {
const tokenValue = uni.getStorageSync('token') || '';
if (!tokenValue || !hasLogin.value) {
// 未登录，打开授权弹窗
wxAuthLoginRef.value?.open();
return false;
}
return true;
};
```
### 3. 点击事件处理
所有需要登录的功能都使用统一的检查逻辑：
```javascript
// 处理附近工作点击
const handleNearbyClick = () => {
if (checkLogin()) {
navTo('/pages/nearby/nearby');
}
};
// 处理服务功能点击
const handleServiceClick = (serviceType) => {
if (checkLogin()) {
navToService(serviceType);
}
};
// 处理职位详情点击
function nextDetail(job) {
if (checkLogin()) {
// 记录岗位类型，用作数据分析
if (job.jobCategory) {
const recordData = recommedIndexDb.JobParameter(job);
recommedIndexDb.addRecord(recordData);
}
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
}
}
```
### 4. 状态管理优化
在 `useUserStore.js` 中优化了 `logOut` 函数：
```javascript
const logOut = (redirect = true) => {
hasLogin.value = false;
token.value = ''
resume.value = {}
userInfo.value = {}
role.value = {}
uni.removeStorageSync('userInfo')
uni.removeStorageSync('token')
// 只有在明确需要跳转时才跳转到补全信息页
if (redirect) {
uni.redirectTo({
url: '/pages/complete-info/complete-info',
});
}
}
```
## 后端接口要求
### 1. 微信登录接口
**接口地址**: `/app/appLogin`
**请求方法**: `POST`
**请求参数**:
#### 微信小程序
```json
{
"code": "string", // 微信登录凭证
"encryptedData": "string", // 加密数据
"iv": "string" // 加密算法初始向量
}
```
#### H5/App
```json
{
"code": "string" // 微信登录凭证
}
```
**返回数据**:
```json
{
"token": "string", // 用户token
"msg": "string", // 返回消息
"code": 200 // 状态码
}
```
### 2. 获取用户信息接口
**接口地址**: `/app/user/resume`
**请求方法**: `GET`
**请求头**: `Authorization: Bearer {token}`
**返回数据**:
```json
{
"code": 200,
"data": {
"name": "string",
"phone": "string",
"jobTitle": ["string"],
"jobTitleId": "string",
// ... 其他用户信息
}
}
```
## 注意事项
1. **小程序配置**
- 需要在微信小程序后台配置服务器域名
- 需要申请手机号授权权限
2. **H5配置**
- 需要配置微信公众号的授权回调域名
- 需要引入微信JSSDK
3. **安全性**
- Token存储在本地缓存中，注意加密
- 敏感操作前需要重新验证token有效性
4. **用户体验**
- 登录弹窗不可通过点击遮罩关闭，确保用户必须做出选择
- 提供测试登录按钮方便开发调试
- 登录成功后自动刷新数据
5. **兼容性**
- 使用条件编译确保在不同平台上正常运行
- 小程序、H5、App使用不同的登录逻辑
## 测试建议
### 功能测试
1. 未登录状态点击"附近工作"，应弹出登录弹窗
2. 未登录状态点击九宫格任意服务，应弹出登录弹窗
3. 未登录状态点击职位列表，应弹出登录弹窗
4. 登录成功后，能够正常访问所有功能
5. 关闭登录弹窗后，不会自动跳转到登录页
### 登录流程测试
1. 微信小程序：测试手机号授权流程
2. H5：测试微信网页授权流程
3. 测试账号登录功能（开发环境）
4. 测试登录失败的错误提示
5. 测试用户取消授权的处理
### 状态管理测试
1. 测试应用重启后登录状态的恢复
2. 测试token失效后的处理
3. 测试退出登录功能
4. 测试多次登录的状态切换
## 更新日志
### v1.0.0 (2024-10-20)
- 创建微信授权登录弹窗组件
- 添加登录状态检查逻辑
- 优化用户状态管理
- 更新首页各功能的登录验证
- 完善登录流程和错误处理
## 开发者
- 开发时间: 2024-10-20
- 涉及模块: 登录模块、首页模块、用户状态管理

138
docs/编译器内存溢出解决方案.md
View File

@@ -1,138 +0,0 @@
# 编译器内存溢出解决方案
## 问题描述
编译时出现 `FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory` 错误，表示 Node.js 内存不足。
## 解决方案
### 方案一：增加 Node.js 内存限制（推荐）
#### 在 HBuilderX 中设置
1. **修改 HBuilderX 配置文件**
- 关闭 HBuilderX
- 找到 HBuilderX 安装目录
- 打开 `HBuilderX\plugins\node\node_modules\@dcloudio\vite-plugin-uni\dist` 目录
- 或者在项目根目录创建 `vue.config.js` 文件
2. **创建或修改项目根目录下的 `vue.config.js`**
```javascript
module.exports = {
transpileDependencies: [],
// 增加 Node.js 内存限制
configureWebpack: {
devServer: {
disableHostCheck: true
}
}
}
```
3. **修改 HBuilderX 启动配置**
- 找到 HBuilderX 安装目录
- 编辑 `HBuilderX.exe` 的启动参数
- 创建一个批处理文件 `start-hbuilderx.bat`：
```bat
@echo off
set NODE_OPTIONS=--max-old-space-size=8192
start "" "HBuilderX安装路径\HBuilderX.exe"
```
- 将内存设置为 8GB（8192MB），可根据实际情况调整为 4096、8192 或更大
#### 在命令行中运行（如果使用 CLI）
如果您使用命令行方式编译，可以设置环境变量：
**Windows PowerShell：**
```powershell
$env:NODE_OPTIONS="--max-old-space-size=8192"
```
**Windows CMD：**
```cmd
set NODE_OPTIONS=--max-old-space-size=8192
```
**永久设置（Windows 系统环境变量）：**
1. 右键"此电脑" → "属性" → "高级系统设置" → "环境变量"
2. 在"用户变量"或"系统变量"中新建变量：
- 变量名：`NODE_OPTIONS`
- 变量值：`--max-old-space-size=8192`
3. 重启 HBuilderX
### 方案二：清理缓存
1. **清理 HBuilderX 缓存**
- 在 HBuilderX 中：运行 → 清理项目缓存
- 或者手动删除 `unpackage` 目录
2. **删除 node_modules 并重新安装**
```powershell
Remove-Item -Recurse -Force node_modules
# 如果有 package.json，重新安装依赖
npm install
```
### 方案三：优化项目
1. **检查大文件**
- 检查 `static` 目录下是否有过大的图片或资源文件
- 当前项目中有 85 个 icon 图片，建议：
- 压缩图片文件
- 使用雪碧图或字体图标代替多个小图标
- 将不常用的资源移到云存储
2. **检查第三方库**
- 检查 `lib` 目录中的第三方库是否必需
- 当前已引入的库：
- dompurify@3.2.4es.js
- markdown-it.min.js
- highlight-uni.min.js
- lunar-javascript@1.7.2.js
- string-similarity.min.js
- 考虑按需引入或延迟加载
3. **优化编译配置**
在 `manifest.json` 中的 `h5.optimization` 已启用 `treeShaking`，这很好。
4. **分包加载**
- 已使用 `packageA` 分包，继续保持
- 考虑将更多页面移到分包中
### 方案四：升级 HBuilderX
确保使用最新版本的 HBuilderX，新版本通常有更好的内存管理。
## 推荐操作步骤
1. **立即执行：** 设置 `NODE_OPTIONS` 环境变量为 `--max-old-space-size=8192`
2. **清理缓存：** 在 HBuilderX 中清理项目缓存
3. **重启 HBuilderX：** 使用新的环境变量启动
4. **长期优化：** 压缩静态资源，优化第三方库引入
## 验证
设置完成后，重新编译项目，查看是否还会出现内存溢出错误。
## 参考资料
- [uni-app 官方文档 - 内存溢出问题](https://uniapp.dcloud.net.cn/tutorial/run/OOM.html)
- Node.js 内存限制说明：
- 默认限制：约 1.4GB（32位）或 1.7GB（64位）
- 建议设置：4096MB（4GB）或 8192MB（8GB）
- 最大可设置：取决于系统可用内存
## 常见问题
**Q: 设置后仍然内存溢出？**
A: 尝试增大内存限制值，如 `--max-old-space-size=16384`（16GB）
**Q: 如何检查当前 Node.js 内存限制？**
A: 在命令行运行：`node -e "console.log(require('v8').getHeapStatistics().heap_size_limit/(1024*1024))"`
**Q: 编译特别慢？**
A: 内存充足但编译慢，可能是 CPU 性能问题，考虑：
- 关闭不必要的后台程序
- 使用 SSD 硬盘
- 升级硬件配置

129
docs/自定义TabBar使用说明.md
View File

@@ -1,129 +0,0 @@
# 自定义TabBar使用说明
## 功能概述
本项目实现了基于用户类型的动态自定义TabBar，支持根据用户登录状态和类型显示不同的导航项：
- **未登录状态**：默认显示求职者tabbar（职位 + 招聘会 + AI+ + 消息 + 我的）
- **企业用户（userType=0）**：显示"发布岗位"导航
- **求职者用户（userType=1,2,3）**：显示"招聘会"导航
## 实现方案
### 1. 微信小程序原生自定义TabBar
在 `custom-tab-bar/` 目录下创建了微信小程序原生自定义TabBar组件：
- `index.js` - 组件逻辑，根据用户类型动态生成TabBar配置
- `index.wxml` - 模板文件
- `index.wxss` - 样式文件
- `index.json` - 组件配置文件
### 2. UniApp兼容的自定义TabBar组件
创建了 `components/CustomTabBar/CustomTabBar.vue` 组件，支持多端兼容：
- 支持微信小程序、H5、APP等多端
- 响应式设计，根据用户类型动态显示
- 支持消息徽章显示
- 支持页面跳转逻辑
### 3. 配置修改
在 `pages.json` 中启用了自定义TabBar：
```json
"tabBar": {
"custom": true,
// ... 其他配置
}
```
## 使用方法
### 1. 在页面中引入自定义TabBar
```vue
<template>
<view class="page">
<!-- 页面内容 -->
<!-- 自定义tabbar -->
<CustomTabBar :currentPage="0" />
</view>
</template>
```
### 2. 用户类型判断
组件会自动从 `useUserStore` 中获取用户信息，根据用户登录状态和 `userInfo.userType` 字段判断用户类型：
```javascript
// 用户类型说明
// 未登录: 默认显示求职者tabbar
// 0: 企业用户 - 显示"发布岗位"
// 1: 求职者 - 显示"招聘会"
// 2: 网格员 - 显示"招聘会"
// 3: 政府人员 - 显示"招聘会"
```
### 3. 动态切换用户类型
当用户登录状态或类型发生变化时，TabBar会自动更新：
```javascript
// 未登录状态：自动显示求职者tabbar
// 登录后根据用户类型显示对应tabbar
// 切换用户类型
userInfo.value.userType = 1; // 切换到求职者
uni.setStorageSync('userInfo', userInfo.value);
// 登出时清除用户信息，自动回到未登录状态
userStore.logOut(false);
```
## 页面配置
### 已配置的页面
- `pages/index/index.vue` - 首页（currentPage: 0）
- `pages/careerfair/careerfair.vue` - 招聘会页面（currentPage: 1）
- `pages/chat/chat.vue` - AI+页面（currentPage: 2）
- `pages/msglog/msglog.vue` - 消息页面（currentPage: 3）
- `pages/mine/mine.vue` - 我的页面（currentPage: 4）
### 测试页面
- `pages/test/tabbar-test.vue` - TabBar功能测试页面
## 技术特点
1. **响应式设计**：根据用户类型动态显示不同的导航项
2. **多端兼容**：支持微信小程序、H5、APP等平台
3. **消息徽章**：支持显示未读消息数量
4. **页面跳转**：智能判断tabBar页面和普通页面的跳转方式
5. **用户类型监听**：实时监听用户类型变化并更新TabBar
## 注意事项
1. 确保在 `pages.json` 中设置了 `"custom": true`
2. 每个页面的 `currentPage` 参数需要正确设置
3. 用户类型存储在 `userInfo.userType` 字段中
4. 组件会自动监听用户类型变化并更新显示
## 测试方法
1. 访问测试页面：`/pages/test/tabbar-test`
2. 切换不同的用户类型
3. 观察底部TabBar的变化
4. 测试页面跳转功能
## 故障排除
如果TabBar不显示或显示异常：
1. 检查 `pages.json` 中的 `custom: true` 配置
2. 确认用户信息是否正确存储
3. 检查组件是否正确引入
4. 查看控制台是否有错误信息

161
docs/进一步优化方案.md
View File

@@ -1,161 +0,0 @@
# 主包体积进一步优化方案
## 当前状态
- **优化前主包体积**: 2.74MB
- **第一次优化后**: 2.19MB (已减少 550KB)
- **目标**: < 1.5MB
- **还需减少**: 约 690KB
## 已完成的优化 ✅
### 1. 删除未使用的大文件 (868KB)
- ✅ `uni_modules/lime-echart/static/echarts.min.js` (567KB)
- ✅ `lib/lunar-javascript@1.7.2.js` (301KB)
### 2. 移动 train 图片到分包 (预计 400-500KB)
- ✅ 将 `static/images/train/` 目录移到 `packageB/static/images/train/`
- ✅ 更新所有引用路径
**已减少总计**: 约 1.27MB - 1.37MB
## 进一步优化建议
### 方案一：优化图片资源（预计减少 200-300KB）
#### 1.1 压缩主包中的大图片
需要压缩的图片文件：
- `static/icon/background2.png` - 检查大小
- `static/imgs/avatar.jpg` (48KB) → 目标: <25KB
- `static/imgs/fristEntry.png` - 检查大小
- 其他 `static/icon/` 目录下的图片
**工具推荐**:
- [TinyPNG](https://tinypng.com/) - PNG压缩
- [Squoosh](https://squoosh.app/) - 在线图片压缩
- [ImageOptim](https://imageoptim.com/) - 批量压缩
#### 1.2 将非首屏必需图片移到分包
- 将 `static/imgs/` 目录移到分包（如果只在特定页面使用）
- 检查 `static/icon/` 中哪些图标可以移到分包
### 方案二：优化 Markdown 相关库（预计减少 296KB）
#### 2.1 当前情况
- `lib/highlight/highlight-uni.min.js`: 203KB
- `lib/markdown-it.min.js`: 93KB
- 总计: 296KB
#### 2.2 使用范围
- 主包: `pages/chat/chat.vue` (主包页面)
- 分包: `packageA/pages/moreJobs/moreJobs.vue`
- 组件: `components/md-render/md-render.vue`
- Store: `stores/userChatGroupStore.js`
#### 2.3 优化方案
**方案A**: 将 chat 页面移到独立分包（推荐）
- 创建新分包 `packageChat`
- 将 `pages/chat/` 移到分包
- 将 markdown 相关库移到分包
- **预计减少**: 296KB + chat页面代码体积
**方案B**: 使用更轻量的代码高亮库
- 替换 `highlight-uni.min.js` 为更轻量的库
- 或移除代码高亮功能（如果非必需）
**方案C**: 按需加载
- 使用动态 import 按需加载 markdown 库
- 只在需要时加载
### 方案三：检查并优化 components 目录
#### 3.1 检查组件使用情况
需要检查的组件：
- `components/md-render/` - 如果只在 chat 使用，可移到分包
- `components/area-cascade-picker/` - 检查使用范围
- 其他大型组件
#### 3.2 优化策略
- 将只在分包使用的组件移到对应分包
- 将大型组件按需加载
### 方案四：检查 pages 目录
#### 4.1 可以移到分包的页面
检查以下页面是否可以移到分包：
- `pages/complete-info/` - 补全信息相关（可能可以移到 packageA）
- `pages/job/` - 发布岗位相关（可能可以移到 packageA）
- `pages/demo/` - 演示页面（可以删除或移到测试分包）
#### 4.2 优化策略
- 将非核心功能页面移到分包
- 删除测试/演示页面
### 方案五：清理未使用的 uni_modules
#### 5.1 检查列表
检查以下模块是否在主包使用：
- `custom-waterfalls-flow`
- `uni-data-select`
- `uni-dateformat`
- `uni-load-more`
- `uni-popup`
- `uni-steps`
- `uni-swipe-action`
- `uni-transition`
#### 5.2 优化策略
- 如果只在分包使用，可以考虑移除主包引用
- 使用 `easycom` 配置确保组件能正确加载
### 方案六：优化 common 目录
#### 6.1 检查文件
- `common/vendor.js` - 如果存在，检查是否可以优化
- `common/globalFunction.js` - 检查是否可以拆分
- 其他 common 文件
## 推荐执行顺序
### 优先级1：立即执行（预计减少 300-400KB）
1. ✅ 压缩主包中的大图片
2. ✅ 将 `pages/demo/` 删除或移到测试分包
3. ✅ 检查并清理未使用的 uni_modules
### 优先级2：中期执行（预计减少 296KB）
1. 将 chat 页面移到独立分包（推荐方案A）
2. 或使用更轻量的代码高亮库（方案B）
### 优先级3：长期优化
1. 优化 components 目录
2. 优化 pages 目录结构
3. 优化 common 目录
## 预期效果
| 优化项 | 预计减少 | 优先级 |
|--------|---------|--------|
| 压缩图片 | 200-300KB | 🔴 高 |
| 移动 chat 页面到分包 | 296KB+ | 🔴 高 |
| 删除 demo 页面 | 50-100KB | 🟡 中 |
| 清理 uni_modules | 100-200KB | 🟡 中 |
| 优化 components | 50-150KB | 🟢 低 |
**总计预计减少**: 696KB - 1046KB
**优化后主包体积**: 约 1.14MB - 1.49MB ✅
## 注意事项
1. **备份**: 在执行优化前，请先备份项目
2. **测试**: 每个优化步骤后都要进行完整测试
3. **引用路径**: 确保所有文件引用路径正确更新
4. **分包限制**: 注意微信小程序分包大小限制（单个分包不超过 2MB）
5. **主包限制**: 主包大小必须控制在 1.5MB 以内
## 验证方法
1. 使用微信开发者工具上传代码，查看主包体积
2. 使用代码依赖分析工具验证优化效果
3. 测试各个功能模块确保正常工作
4. 检查分包加载是否正常

429
docs/阿里图标库引入指南.md
View File

@@ -1,429 +0,0 @@
# 阿里图标库（iconfont）引入指南
## 📦 方式一：使用字体文件（推荐）
### 第一步：下载图标资源
1. 访问 [阿里图标库](https://www.iconfont.cn/)
2. 注册/登录账号
3. 搜索需要的图标，点击"添加入库"
4. 点击右上角购物车图标
5. 点击"添加至项目"（如果没有项目，先创建一个）
6. 进入"我的项目"
7. 点击"下载至本地"按钮
### 第二步：解压并复制文件
下载的压缩包中包含以下文件：
```
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2
iconfont.json
demo_index.html
demo.css
```
**需要的文件：**
- `iconfont.css` - 样式文件
- `iconfont.ttf` - 字体文件
- `iconfont.woff` - 字体文件
- `iconfont.woff2` - 字体文件
### 第三步：创建项目目录
在项目中创建 `static/iconfont/` 目录（如果不存在）：
```
ks-app-employment-service/
├── static/
│ ├── iconfont/ ← 新建此目录
│ │ ├── iconfont.css
│ │ ├── iconfont.ttf
│ │ ├── iconfont.woff
│ │ └── iconfont.woff2
│ └── ...
```
### 第四步：修改 CSS 文件
打开 `static/iconfont/iconfont.css`，修改字体文件路径：
**原始路径：**
```css
@font-face {
font-family: "iconfont";
src: url('iconfont.woff2?t=1234567890') format('woff2'),
url('iconfont.woff?t=1234567890') format('woff'),
url('iconfont.ttf?t=1234567890') format('truetype');
}
```
**修改为（相对路径）：**
```css
@font-face {
font-family: "iconfont";
src: url('./iconfont.woff2?t=1234567890') format('woff2'),
url('./iconfont.woff?t=1234567890') format('woff'),
url('./iconfont.ttf?t=1234567890') format('truetype');
}
```
**或修改为（绝对路径，推荐）：**
```css
@font-face {
font-family: "iconfont";
src: url('/static/iconfont/iconfont.woff2?t=1234567890') format('woff2'),
url('/static/iconfont/iconfont.woff?t=1234567890') format('woff'),
url('/static/iconfont/iconfont.ttf?t=1234567890') format('truetype');
}
```
### 第五步：在项目中引入
#### 方法 A：全局引入（App.vue）
在 `App.vue` 中引入：
```vue
<style>
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
/* 其他全局样式 */
@import '@/common/animation.css';
@import '@/common/common.css';
</style>
```
#### 方法 B：在 main.js 中引入
```javascript
// main.js
import './static/iconfont/iconfont.css'
```
### 第六步：使用图标
#### 使用方式 1：Unicode 方式
```vue
<template>
<view class="icon">&#xe600;</view>
</template>
<style>
.icon {
font-family: "iconfont" !important;
font-size: 32rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
```
#### 使用方式 2：Font Class 方式（推荐）
```vue
<template>
<view class="iconfont icon-home"></view>
<view class="iconfont icon-user"></view>
<view class="iconfont icon-search"></view>
</template>
<style scoped>
.iconfont {
font-size: 32rpx;
color: #333;
}
</style>
```
#### 使用方式 3：封装为组件
创建 `components/IconfontIcon/IconfontIcon.vue`：
```vue
<template>
<text class="iconfont" :class="iconClass" :style="iconStyle"></text>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
name: {
type: String,
required: true
},
size: {
type: [String, Number],
default: 32
},
color: {
type: String,
default: '#333'
}
})
const iconClass = computed(() => `icon-${props.name}`)
const iconStyle = computed(() => ({
fontSize: `${props.size}rpx`,
color: props.color
}))
</script>
<style scoped>
.iconfont {
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
```
**使用组件：**
```vue
<template>
<IconfontIcon name="home" :size="48" color="#13C57C" />
<IconfontIcon name="user" :size="36" color="#256BFA" />
</template>
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
</script>
```
---
## 📦 方式二：使用在线链接（不推荐小程序）
### 第一步：获取在线链接
1. 在阿里图标库"我的项目"中
2. 点击"Font class"
3. 点击"查看在线链接"
4. 复制 CSS 链接
### 第二步：引入在线 CSS
在 `App.vue` 中：
```vue
<style>
/* 注意：小程序不支持在线字体 */
@import url("//at.alicdn.com/t/c/font_xxxxx.css");
</style>
```
**⚠️ 注意：** 微信小程序不支持外部字体文件，必须使用方式一！
---
## 📦 方式三：使用 Symbol 方式（SVG）
### 第一步：获取 Symbol 代码
1. 在"我的项目"中
2. 点击"Symbol"
3. 点击"生成代码"
4. 复制生成的 JS 链接
### 第二步：下载 JS 文件
将 JS 文件下载到 `static/iconfont/iconfont.js`
### 第三步：引入并使用
在 `App.vue` 或需要的页面中：
```vue
<template>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
</template>
<script>
// 引入 Symbol 脚本
// 注意：需要在 main.js 中引入 iconfont.js
</script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
```
**⚠️ 注意：** 小程序对 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
<script setup>
import { ICONS } from '@/config/icons'
</script>
<template>
<IconfontIcon :name="ICONS.HOME" />
</template>
```
---
## 🔧 常见问题
### 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
<template>
<button class="login-btn">
<text class="iconfont icon-phone"></text>
<text>手机号登录</text>
</button>
</template>
<style scoped>
.login-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 40rpx;
background: #13C57C;
border-radius: 12rpx;
color: #fff;
}
.iconfont {
font-size: 32rpx;
margin-right: 12rpx;
}
</style>
```
---
## 🎨 推荐使用的图标
### 常用图标
- `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
- [ ] 已测试图标显示正常
- [ ] 已封装图标组件（可选）
- [ ] 已统一管理图标名称（可选）

407
docs/阿里图标库快速开始.md
View File

@@ -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` 的 `<style>` 标签中添加：
```vue
<style>
/* 引入阿里图标库 */
@import url("/static/iconfont/iconfont.css");
</style>
```
### Step 5: 开始使用 ✨
```vue
<template>
<!-- 直接使用 -->
<text class="iconfont icon-home"></text>
<!-- 或使用组件 -->
<IconfontIcon name="home" :size="48" color="#13C57C" />
</template>
```
---
## 二、推荐使用方式
### 方式 A：使用封装的组件（最推荐）👍
```vue
<template>
<IconfontIcon name="phone" :size="40" color="#13C57C" />
</template>
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
</script>
```
**优点：**
- ✅ 统一管理，易于维护
- ✅ 支持动态修改大小和颜色
- ✅ 语义清晰
- ✅ 支持点击事件
### 方式 B：使用配置常量（推荐）
```vue
<template>
<IconfontIcon
:name="ICONS.HOME"
:size="ICON_SIZES.LARGE"
:color="ICON_COLORS.PRIMARY"
/>
</template>
<script setup>
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
import { ICONS, ICON_SIZES, ICON_COLORS } from '@/config/icons'
</script>
```
**优点：**
- ✅ 统一图标名称
- ✅ 避免拼写错误
- ✅ IDE 自动补全
- ✅ 便于重构
### 方式 C：直接使用类名
```vue
<template>
<text class="iconfont icon-home" style="font-size: 32rpx; color: #333;"></text>
</template>
```
---
## 三、常用场景示例
### 场景1：导航栏图标
```vue
<template>
<view class="navbar">
<IconfontIcon name="arrow-left" :size="40" @click="goBack" />
<text class="title">页面标题</text>
<IconfontIcon name="share" :size="36" @click="share" />
</view>
</template>
<script setup>
const goBack = () => {
uni.navigateBack()
}
const share = () => {
// 分享逻辑
}
</script>
```
### 场景2：按钮图标
```vue
<template>
<button class="primary-btn">
<IconfontIcon name="phone" :size="32" color="#FFFFFF" />
<text>手机号登录</text>
</button>
</template>
<style>
.primary-btn {
display: flex;
align-items: center;
gap: 12rpx;
}
</style>
```
### 场景3：列表项图标
```vue
<template>
<view class="list-item">
<IconfontIcon name="location" :size="36" color="#13C57C" />
<text class="text">工作地点</text>
<IconfontIcon name="arrow-right" :size="28" color="#999" />
</view>
</template>
```
### 场景4：状态图标
```vue
<template>
<view class="status-box">
<IconfontIcon
:name="status.icon"
:size="64"
:color="status.color"
/>
<text>{{ status.text }}</text>
</view>
</template>
<script setup>
import { computed } from 'vue'
const orderStatus = ref('success')
const status = computed(() => {
const map = {
success: { icon: 'success', color: '#13C57C', text: '提交成功' },
error: { icon: 'error', color: '#F44336', text: '提交失败' },
loading: { icon: 'loading', color: '#256BFA', text: '处理中...' }
}
return map[orderStatus.value]
})
</script>
```
---
## 四、组件API说明
### IconfontIcon 组件
**Props:**
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| name | String | - | 图标名称（必填），如：'home' 或 'icon-home' |
| size | String/Number | 32 | 图标大小，单位rpx |
| color | String | - | 图标颜色，支持十六进制、rgb等 |
| bold | Boolean | false | 是否加粗 |
**Events:**
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| click | 点击图标时触发 | event |
**使用示例:**
```vue
<IconfontIcon
name="home"
:size="48"
color="#13C57C"
:bold="true"
@click="handleClick"
/>
```
---
## 五、配置说明
### 图标名称配置（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
<IconfontIcon name="home" />
```
3. **预设常用尺寸和颜色**
```javascript
import { ICON_SIZES, ICON_COLORS } from '@/config/icons'
```
4. **语义化命名**
```javascript
const ICONS = {
HOME: 'home', // ✅ 语义清晰
USER_CENTER: 'user', // ✅ 明确用途
}
```
### ❌ 不推荐做法
1. **硬编码图标名称**
```vue
<text class="iconfont icon-home"></text> <!-- ❌ 不推荐 -->
```
2. **使用在线链接（小程序）**
```css
@import url("//at.alicdn.com/xxx.css"); /* ❌ 小程序不支持 */
```
3. **直接使用 Unicode**
```vue
<text class="iconfont">&#xe600;</text> <!-- ❌ 不直观 -->
```
---
## 八、测试页面
已为你创建了测试页面，可以查看各种使用方式：
**路径:** `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`