1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-11 16:00:44 +08:00

refactor: 架构升级

This commit is contained in:
小莫唐尼
2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
+40
View File
@@ -0,0 +1,40 @@
# uni-app Skills 目录
不要一次全部加载,根据当前任务场景查找下表,只导入对应的 skill(读取其 `SKILL.md`),再按其中指引加载 references/examples。
大部分AI IDE 默认支持 skills目录,不识别可以在 `.claude/skills`等目录下引用该目录文件,用于指引 AI 搜索。
有不懂的地方可以微信群询问。我也在里面。skills不是必须的,不需要可以迁移到bak-skills中
## 按需导入速查表
| 任务场景 | 导入 skill | 路径 |
|---|---|---|
| uni-app 框架基础(项目结构、条件编译、pages.json/manifest.json 配置) | `uni-app` | `./uni-app/SKILL.md` |
| uni-app 内置组件 / uni-ui 组件 / 各类 API(网络、存储、设备等),逐组件逐 API 示例 | `uniapp-project` | `./uniapp-project/SKILL.md` |
| 一条命令创建 uni-app 新项目(CLI / HBuilderX | `uniapp-project-creator` | `./uniapp-project-creator/SKILL.md` |
| uni-app 小程序平台配置、组件与 API 兼容性 | `uniapp-mini-guide` | `./uniapp-mini-guide/SKILL.md` |
| 小程序/App 打包发布、平台限制 | `uniapp-mini-guide` | `./uniapp-mini-guide/SKILL.md` |
| uni-app 离线打包为原生 Android/iOS App(签名、证书、原生配置) | `uniapp-native-app` | `./uniapp-native-app/SKILL.md` |
| 开发 uni-app 原生插件(Android/iOS 原生模块、插件通信、发布) | `uniapp-native-plugin` | `./uniapp-native-plugin/SKILL.md` |
| 插件市场浏览、自动安装插件、第三方插件集成 | `uniapp-plugin` | `./uniapp-plugin/SKILL.md` |
| uniCloud 云开发(云数据库、云函数、云存储、datacom、权限) | `uniapp-cloud` | `./uniapp-cloud/SKILL.md` |
| uni-ad 广告变现(banner/激励视频/插屏等广告类型与事件) | `uniapp-ad` | `./uniapp-ad/SKILL.md` |
| 在 uni-app 中集成 uCharts 图表 | `uniapp-ucharts` | `./uniapp-ucharts/SKILL.md` |
| 在 uni-app 中集成 uView UI 组件库 | `uniapp-uview` | `./uniapp-uview/SKILL.md` |
| uView Pro(Vue 3 版)组件、工具、布局模板 | `uview-pro-vue3` | `./uview-pro-vue3/SKILL.md` |
| uni-app-x 内置组件 / APIVue 3 + TS + ViteUTS | `uniappx-project` | `./uniappx-project/SKILL.md` |
| 一条命令创建 uni-app-x 新项目 | `uniappx-project-creator` | `./uniappx-project-creator/SKILL.md` |
| 在 uni-app-x 中集成 uView Pro | `uniappx-uview-pro` | `./uniappx-uview-pro/SKILL.md` |
## 导入规则
1. **先匹配场景,再导入**:只读取命中场景的 `SKILL.md`,不预加载整个目录。
2. **一个任务可能命中多个 skill**:例如「uni-app 项目里用 uView 做图表」→ `uniapp-project` + `uniapp-uview`+ `uniapp-ucharts` 若涉及图表)。逐个按需导入。
3. **优先级**:本项目(unibest)是 uni-app + Vue3 + Vite 项目,日常开发默认命中 `uni-app` / `uniapp-project`;涉及 uni-app-x 的 skill 仅在明确开发 uni-app-x 时导入。
4. **skill 内部同样按需加载**`SKILL.md` 只是指引,其 references/、examples/、api/ 子文件按当前具体问题再读取,避免上下文膨胀。
## 区分易混淆项
- `uniapp-uview` vs `uview-pro-vue3` vs `uniappx-uview-pro`:分别对应 uView 1.x/2.xuni-app)、uView ProVue 3)、uView Prouni-app-x)。按项目技术栈选择。
- `uniapp-project-creator` vs `uniappx-project-creator`:创建 uni-app 项目用前者,创建 uni-app-x(UTS)项目用后者。
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 partme-ai
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+108
View File
@@ -0,0 +1,108 @@
---
name: uniapp-ad
description: A comprehensive skill for uni-ad monetization in uni-app. Use this skill to integrate ads, configure ad types, handle ad events, and follow official uni-ad documentation.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Integrate ads into uni-app
- Implement ad monetization
- Configure different ad types (banner, interstitial, rewarded video, etc.)
- Handle ad events (load, show, close, error)
- Optimize ad revenue
- Set up ad placement and timing
- Handle ad policies and compliance
## How to use this skill
To integrate ads:
1. **Identify the ad type** from the user's request:
- Banner ads → Use banner examples
- Interstitial ads → Use interstitial examples
- Rewarded video → Use rewarded video examples
- Native ads → Use native ad examples
2. **Load the appropriate example file** from the `examples/` directory:
- `examples/guide/` - Ad integration guide
- `examples/ad-types/` - Different ad type examples
- `examples/integration/` - Integration examples
3. **Load the appropriate API reference** from the `api/` directory:
- `api/ad-api.md` - uni-ad API reference
4. **Follow the specific instructions** in those files for integration
## Examples and Templates
### Examples
Located in `examples/`:
- **guide/** - Ad integration guide and setup
- **ad-types/** - Different ad type examples (banner, interstitial, rewarded video, etc.)
- **integration/** - Integration examples and best practices
### API Reference
Located in `api/`:
- **ad-api.md** - Complete uni-ad API reference
## Best Practices
1. **User experience**: Don't interrupt user experience with excessive ads
2. **Ad placement**: Place ads strategically for maximum revenue
3. **Loading**: Handle ad loading states properly
4. **Error handling**: Implement proper error handling for ad failures
5. **Compliance**: Follow ad policies and regulations
## Resources
- **Official Documentation**: https://uniapp.dcloud.net.cn/uni-ad/
## Keywords
uni-ad, 广告变现, banner广告, 激励视频, 插屏广告, ad monetization, ad integration
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,15 @@
# uni-ad API 参考
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 常用 API
- `uni.createRewardedVideoAd`
- `uni.createInterstitialAd`
- `uni.createBannerAd`
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,17 @@
# Banner 广告
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 示例
```vue
<template>
<ad unit-id="YOUR_AD_UNIT_ID" ad-type="banner"></ad>
</template>
```
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,18 @@
# 插屏广告
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 示例
```javascript
const interstitial = uni.createInterstitialAd({
adUnitId: 'YOUR_AD_UNIT_ID'
})
interstitial.show()
```
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,14 @@
# 原生广告
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 说明
- 原生广告需结合广告位与样式进行自定义渲染
- 注意广告标识与合规要求
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,18 @@
# 激励视频广告
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 示例
```javascript
const rewarded = uni.createRewardedVideoAd({
adUnitId: 'YOUR_AD_UNIT_ID'
})
rewarded.show()
```
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,20 @@
# uni-ad 接入概览
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 适用场景
- 在 uni-app 中进行广告变现
- 需要集成 banner、插屏、激励视频等广告类型
## 基本流程
1. 开通 uni-ad
2. 获取广告位 ID
3. 在页面中引入广告组件或 API
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,14 @@
# 广告位配置
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 配置要点
- 在平台配置广告位 ID
- 根据平台选择合适广告类型
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,23 @@
# 广告事件处理
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/uni-ad/
## 示例
```javascript
rewarded.onLoad(() => {
console.log('广告加载成功')
})
rewarded.onError(err => {
console.error('广告加载失败', err)
})
rewarded.onClose(res => {
console.log('广告关闭', res)
})
```
## 参考资源
- https://uniapp.dcloud.net.cn/uni-ad/
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 partme-ai
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+113
View File
@@ -0,0 +1,113 @@
---
name: uniapp-cloud
description: A comprehensive skill for uniCloud cloud development in the uni-app ecosystem. Use this skill when you need uniCloud project setup, cloud database CRUD, cloud functions, storage, or datacom components, following official uniCloud documentation.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Use uniCloud cloud development services
- Work with cloud databases (add, query, update, delete data)
- Create and deploy cloud functions
- Use cloud storage for file uploads and management
- Implement datacom components for data binding
- Integrate backend services with uni-app
- Set up uniCloud project and configuration
- Handle cloud database permissions and security
## How to use this skill
This skill is organized to match the official uniCloud documentation:
1. **Start with setup and project configuration**:
- `examples/guide/intro.md`
- `examples/guide/project-setup.md`
- `examples/guide/cloud-space.md`
2. **Choose the cloud capability**:
- Database → `examples/database/`
- Cloud functions → `examples/functions/`
- Storage → `examples/storage/`
- Datacom → `examples/datacom/`
- Security/permission → `examples/security/`
3. **Open the API reference**:
- `api/cloud-api.md`
**Important Notes**:
- This skill focuses on uniCloud integration and usage, not general backend frameworks
- Each example includes official documentation URL
- Follow official permission and security guidance for production
## Examples and Templates
### Examples
Located in `examples/`:
- **guide/** - Intro, project setup, cloud space creation
- **database/** - CRUD, query, index, permissions
- **functions/** - Function structure, deploy, call
- **storage/** - Upload, download, delete
- **datacom/** - datacom components and binding
- **security/** - permissions and security rules
## Best Practices
1. **Security**: Always set proper database permissions and rules
2. **Performance**: Use indexes for frequently queried fields
3. **Cost**: Optimize cloud function execution time
4. **Error handling**: Implement proper error handling for all cloud operations
5. **Data validation**: Validate data before saving to database
## Resources
- **Official Documentation**: https://doc.dcloud.net.cn/uniCloud/
- **Cloud Database**: https://doc.dcloud.net.cn/uniCloud/database.html
- **Cloud Functions**: https://doc.dcloud.net.cn/uniCloud/cf-functions.html
- **Cloud Storage**: https://doc.dcloud.net.cn/uniCloud/storage.html
## Keywords
unicloud, uniCloud, cloud development, cloud database, cloud functions, cloud storage, datacom, 云开发, 云数据库, 云函数, 云存储
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,121 @@
# uniCloud API 参考
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/
## 云数据库 API
### 获取数据库引用
```javascript
const db = uniCloud.database()
```
### 获取集合引用
```javascript
const collection = db.collection('users')
```
### 查询数据
```javascript
// 获取所有数据
collection.get().then(res => {
console.log(res.data)
})
// 条件查询
collection.where({
age: db.command.gt(18)
}).get().then(res => {
console.log(res.data)
})
// 分页查询
collection.skip(0).limit(10).get().then(res => {
console.log(res.data)
})
```
### 添加数据
```javascript
collection.add({
name: 'John',
age: 25
}).then(res => {
console.log(res.id)
})
```
### 更新数据
```javascript
collection.doc('doc-id').update({
age: 26
}).then(res => {
console.log('更新成功')
})
```
### 删除数据
```javascript
collection.doc('doc-id').remove().then(res => {
console.log('删除成功')
})
```
## 云函数 API
### 调用云函数
```javascript
uniCloud.callFunction({
name: 'function-name',
data: {
param1: 'value1'
}
}).then(res => {
console.log(res.result)
})
```
## 云存储 API
### 上传文件
```javascript
uniCloud.uploadFile({
filePath: 'path/to/file',
cloudPath: 'cloud/path/file.jpg'
}).then(res => {
console.log(res.fileID)
})
```
### 下载文件
```javascript
uniCloud.downloadFile({
fileID: 'cloud://xxx.jpg'
}).then(res => {
console.log(res.tempFilePath)
})
```
### 删除文件
```javascript
uniCloud.deleteFile({
fileList: ['cloud://xxx.jpg']
}).then(res => {
console.log('删除成功')
})
```
## 参考资源
- uniCloud API 文档:https://doc.dcloud.net.cn/uniCloud/client-sdk.html
@@ -0,0 +1,45 @@
# 云数据库 CRUD
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/database.html
## 新增数据
```javascript
const db = uniCloud.database()
const users = db.collection('users')
users.add({
name: 'Alice',
age: 20
}).then(res => {
console.log('新增 ID', res.id)
})
```
## 查询数据
```javascript
users.get().then(res => {
console.log(res.data)
})
```
## 更新数据
```javascript
users.doc('doc-id').update({
age: 21
})
```
## 删除数据
```javascript
users.doc('doc-id').remove()
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/database.html
@@ -0,0 +1,19 @@
# 云数据库索引
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/database.html
## 使用场景
- 提升高频查询性能
- 支持复合索引提升多条件查询效率
## 示例
- 在 uniCloud 控制台为集合创建索引
- 为常用的查询字段(如 userId、createdAt)建立索引
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/database.html
@@ -0,0 +1,23 @@
# 云数据库权限控制
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/
## 说明
- 通过数据库权限规则限制读写
- 配合用户身份(如用户登录态)实现访问控制
## 示例(规则示意)
```json
{
"read": true,
"write": "auth.uid == _id"
}
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/
@@ -0,0 +1,40 @@
# 云数据库查询
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/database.html
## 条件查询
```javascript
const db = uniCloud.database()
const users = db.collection('users')
users.where({
age: db.command.gt(18)
}).get().then(res => {
console.log(res.data)
})
```
## 排序与分页
```javascript
users.orderBy('createdAt', 'desc')
.skip(0)
.limit(10)
.get()
```
## 字段筛选
```javascript
users.field({
name: true,
age: true
}).get()
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/database.html
@@ -0,0 +1,18 @@
# datacom 组件与数据绑定
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/
## 使用场景
- 快速绑定云数据库数据
- 通过组件实现低代码数据展示
## 说明
在 uniCloud 体系中,datacom 组件用于快速构建数据列表、详情页等场景。使用时需关注组件配置、数据源与权限规则。
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/
@@ -0,0 +1,20 @@
# 云函数调用
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/cf-functions.html
## 前端调用示例
```javascript
uniCloud.callFunction({
name: 'getUser',
data: { userId: '123' }
}).then(res => {
console.log(res.result)
})
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/cf-functions.html
@@ -0,0 +1,25 @@
# 云函数创建
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/cf-functions.html
## 创建云函数
1. 在项目根目录创建 `cloudfunctions/`
2. 新建函数目录(如 `getUser`)。
3. 编写 `index.js` 入口。
```javascript
'use strict'
exports.main = async (event, context) => {
return {
code: 0,
data: 'Hello uniCloud'
}
}
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/cf-functions.html
@@ -0,0 +1,28 @@
# 云服务空间创建与关联
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/
## 创建服务空间
1. 登录 DCloud 开发者中心。
2. 进入 uniCloud 控制台。
3. 新建服务空间(选择阿里云或腾讯云)。
## 关联服务空间
在 HBuilderX 中:
1. 右键项目 → `uniCloud``关联云服务空间`
2. 选择服务空间与云服务商。
3. 关联完成后即可使用云数据库、云函数、云存储。
## 注意事项
- 不同云服务商的配额、费用与功能存在差异。
- 建议为不同环境(开发/测试/生产)创建独立空间。
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/
@@ -0,0 +1,104 @@
# uniCloud 云开发指南
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/
## 什么是 uniCloud
uniCloud 是 DCloud 联合阿里云、腾讯云,为 uni-app 开发者提供的基于 serverless 模式和 js 编程的云开发平台。
## 核心功能
### 1. 云数据库
- 无需自建数据库
- 自动扩容
- 支持 JSON 文档存储
- 支持关系型数据
### 2. 云函数
- 无需管理服务器
- 按量计费
- 支持 Node.js
- 自动扩缩容
### 3. 云存储
- 文件上传下载
- CDN 加速
- 图片处理
- 安全防护
### 4. 前端网页托管
- 静态网站托管
- CDN 加速
- 自定义域名
## 服务空间
### 创建服务空间
1. 登录 DCloud 开发者中心
2. 进入 uniCloud 控制台
3. 创建服务空间
4. 选择云服务商(阿里云/腾讯云)
### 关联服务空间
在 HBuilderX 中:
1. 右键项目 → uniCloud → 关联云服务空间
2. 选择服务空间
3. 选择云服务商
## 项目结构
```
my-uniapp-project/
├── cloudfunctions/ # 云函数目录
│ ├── function1/
│ │ ├── index.js
│ │ └── package.json
│ └── ...
├── uniCloud/
│ └── database/ # 数据库 schema
│ └── db_init.json
└── ...
```
## 快速开始
### 1. 创建服务空间
在 DCloud 开发者中心创建服务空间。
### 2. 关联服务空间
在 HBuilderX 中关联服务空间。
### 3. 初始化云数据库
```javascript
// 在 uniCloud 控制台创建数据表
// 或使用 db_init.json 初始化
```
### 4. 使用云数据库
```javascript
// 在页面中使用
const db = uniCloud.database()
const collection = db.collection('users')
collection.get().then(res => {
console.log(res.data)
})
```
## 参考资源
- uniCloud 文档:https://doc.dcloud.net.cn/uniCloud/
- 云数据库:https://doc.dcloud.net.cn/uniCloud/database.html
- 云函数:https://doc.dcloud.net.cn/uniCloud/cf-functions.html
@@ -0,0 +1,40 @@
# uniCloud 项目初始化
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/
## 使用场景
- 创建新 uni-app 项目并启用 uniCloud
- 为已有项目关联云服务空间
- 初始化云函数与数据库目录
## 步骤
1. **创建或打开项目**HBuilderX 或 CLI 项目均可)。
2. **启用 uniCloud**
- 在 HBuilderX 中右键项目 → `uniCloud``关联云服务空间`
3. **确认目录结构**
```
my-uniapp-project/
├── cloudfunctions/ # 云函数目录
├── uniCloud/ # 云数据库与存储配置
└── ...
```
4. **初始化云数据库**
- 使用 `uniCloud/database` 下的 schema 或控制台创建集合。
## 示例
```javascript
// 获取数据库引用
const db = uniCloud.database()
const collection = db.collection('users')
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/
@@ -0,0 +1,24 @@
# 权限与安全规则
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/
## 关键点
- 按最小权限原则配置读写规则
- 对敏感数据进行字段级控制
- 使用用户身份信息限制访问范围
## 示例(规则示意)
```json
{
"read": "auth.uid != null",
"write": "auth.uid == _id"
}
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/
@@ -0,0 +1,17 @@
# 云存储删除
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/storage.html
## 删除文件
```javascript
uniCloud.deleteFile({
fileList: ['cloud://xxx/xxx.png']
})
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/storage.html
@@ -0,0 +1,19 @@
# 云存储下载
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/storage.html
## 获取临时链接
```javascript
uniCloud.getTempFileURL({
fileList: ['cloud://xxx/xxx.png']
}).then(res => {
console.log(res.fileList)
})
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/storage.html
@@ -0,0 +1,20 @@
# 云存储上传
## 官方文档
参考官方文档:https://doc.dcloud.net.cn/uniCloud/storage.html
## 上传文件
```javascript
uniCloud.uploadFile({
filePath: '/static/logo.png',
cloudPath: 'images/logo.png'
}).then(res => {
console.log('fileID:', res.fileID)
})
```
## 参考资源
- https://doc.dcloud.net.cn/uniCloud/storage.html
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 partme-ai
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@@ -0,0 +1,87 @@
---
name: uniapp-mini-guide
description: A comprehensive skill for uni-app mini program development. Use when building uni-app mini programs, configuring mini program settings, or working with mini program components and APIs based on the official native support docs.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Build uni-app mini programs
- Configure mini program settings and capabilities
- Use mini program components and APIs within uni-app
- Understand native mini program limitations and compatibility
## How to use this skill
1. **Start with the overview**:
- `examples/guide/intro.md`
2. **Configure mini program settings**:
- `examples/guide/config.md`
3. **Check component and API references**:
- `examples/components/overview.md`
- `examples/api/overview.md`
## Examples and Templates
- `examples/guide/intro.md` - Mini program overview
- `examples/guide/config.md` - Configuration and capability setup
- `examples/components/overview.md` - Component references and usage
- `examples/api/overview.md` - API references and usage
## Best Practices
1. Follow mini program platform requirements and audits
2. Keep package size small and optimize assets
3. Validate API compatibility per platform
4. Use conditional compilation for platform-specific code
## Resources
- https://nativesupport.dcloud.net.cn/
## Keywords
uniapp, uni-app, mini program, 小程序, native support, components, api, 平台兼容
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,14 @@
# 小程序 API 概览
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/
## 说明
- 本节用于对接小程序平台 API 与 uni-app API 的兼容性说明
- 具体 API 能力请以官方文档为准
## 参考资源
- https://nativesupport.dcloud.net.cn/
@@ -0,0 +1,14 @@
# 小程序组件概览
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/
## 说明
- 本节用于对接小程序平台组件与 uni-app 组件的兼容性说明
- 具体组件能力请以官方文档为准
## 参考资源
- https://nativesupport.dcloud.net.cn/
@@ -0,0 +1,15 @@
# 小程序配置与能力
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/
## 配置重点
- 平台权限与 capability 配置
- 小程序审核所需配置项
- Manifest 与平台参数
## 参考资源
- https://nativesupport.dcloud.net.cn/
@@ -0,0 +1,20 @@
# uni 小程序开发概览
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/
## 适用场景
- 使用 uni-app 开发微信/支付宝/百度等小程序
- 需要了解小程序平台限制与能力
## 核心要点
- 小程序平台差异与兼容性说明
- 审核、发布与上线流程
- 性能与包体积优化
## 参考资源
- https://nativesupport.dcloud.net.cn/
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 partme-ai
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@@ -0,0 +1,105 @@
---
name: uniapp-native-app
description: A comprehensive skill for uni-app native app offline packaging. Use this skill to package uni-app as native Android/iOS apps, configure native app settings, handle signing, and follow official offline packaging documentation.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Package uni-app as native Android app
- Package uni-app as native iOS app
- Configure native app settings (manifest, permissions, etc.)
- Customize native app features
- Integrate native plugins
- Configure app signing and certificates
- Handle native app build and distribution
## How to use this skill
To package native apps:
1. **Identify the platform** from the user's request:
- Android → Use Android examples
- iOS → Use iOS examples
2. **Load the appropriate example file** from the `examples/` directory:
- `examples/guide/` - Native app packaging guide
- `examples/android/` - Android packaging examples
- `examples/ios/` - iOS packaging examples
3. **Load the appropriate template** from the `templates/` directory:
- `templates/build-config.md` - Build configuration templates
4. **Follow the specific instructions** in those files for packaging
## Examples and Templates
### Examples
Located in `examples/`:
- **guide/** - Offline packaging overview and setup
- **android/** - Android signing, keystore, build configs
- **ios/** - iOS signing, provisioning, build configs
### Templates
Located in `templates/`:
- **build-config.md** - Build configuration templates
## Best Practices
1. **Follow platform guidelines**: Adhere to Android and iOS development standards
2. **Optimize app size**: Minimize APK/IPA size
3. **Security**: Properly configure app signing and certificates
4. **Testing**: Test on real devices before release
## Resources
- **Official Documentation**: https://nativesupport.dcloud.net.cn/AppDocs/
## Keywords
native app, 原生App, Android打包, iOS打包, 离线打包, app packaging, native plugin
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,15 @@
# Android 打包配置
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 配置要点
- 包名(applicationId
- 版本号(versionCode/versionName
- 权限与应用签名
## 参考资源
- https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,15 @@
# Android Keystore 生成
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 示例命令
```bash
keytool -genkeypair -alias uniapp -keyalg RSA -keysize 2048 -validity 36500 -keystore uniapp.keystore
```
## 参考资源
- https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,15 @@
# Android 签名配置
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 关键步骤
1. 生成 keystore
2. 配置包名与签名信息
3. 打包 APK 并验证签名
## 参考资源
- https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,29 @@
# uni-app 原生App离线打包指南
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 什么是离线打包
离线打包是将 uni-app 项目打包成原生 Android 或 iOS 应用的过程。
## 打包流程
### Android 打包
1. 准备 Android 开发环境
2. 配置 manifest.json
3. 使用 Android Studio 打包
4. 签名和发布
### iOS 打包
1. 准备 iOS 开发环境
2. 配置 manifest.json
3. 使用 Xcode 打包
4. 签名和发布
## 参考资源
- App离线打包文档:https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,21 @@
# App 离线打包流程
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 概述
- 离线打包用于生成原生 Android/iOS 安装包
- 需配置 App 包名、证书、权限、图标等
## 流程要点
1. 准备 App 证书与包名
2. 配置 manifest.json
3. 构建离线资源包
4. 使用离线打包工具生成 APK/IPA
## 参考资源
- https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,14 @@
# iOS 描述文件配置
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 说明
- 生成并下载 Provisioning Profile
- 在打包工具中选择证书与描述文件
## 参考资源
- https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,15 @@
# iOS 签名配置
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 关键步骤
- 创建 App ID
- 配置证书与描述文件
- 使用证书打包 IPA
## 参考资源
- https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,18 @@
# 离线打包配置模板
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/AppDocs/
## 配置清单
- 应用名称
- 包名(AppID
- 版本号与构建号
- 图标与启动图
- 权限与能力
- 证书与签名配置
## 参考资源
- https://nativesupport.dcloud.net.cn/AppDocs/
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 partme-ai
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@@ -0,0 +1,105 @@
---
name: uniapp-native-plugin
description: A comprehensive skill for developing native plugins for uni-app. Use this skill when building Android/iOS native plugins, integrating native capabilities, or publishing plugins based on official native plugin docs.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Develop native Android plugins
- Develop native iOS plugins
- Integrate native functionality into uni-app
- Create custom native modules
- Extend uni-app with native capabilities
- Handle native plugin communication
- Package and distribute native plugins
## How to use this skill
To develop native plugins:
1. **Identify the platform** from the user's request:
- Android → Use Android plugin examples
- iOS → Use iOS plugin examples
2. **Load the appropriate example file** from the `examples/` directory:
- `examples/guide/` - Native plugin development guide
- `examples/android-plugin/` - Android plugin examples
- `examples/ios-plugin/` - iOS plugin examples
3. **Load the appropriate template** from the `templates/` directory:
- `templates/plugin-template.md` - Plugin development templates
4. **Follow the specific instructions** in those files for development
## Examples and Templates
### Examples
Located in `examples/`:
- **guide/** - Native plugin development guide
- **android-plugin/** - Android plugin development examples
- **ios-plugin/** - iOS plugin development examples
### Templates
Located in `templates/`:
- **plugin-template.md** - Plugin development templates
## Best Practices
1. **Follow platform guidelines**: Adhere to Android and iOS development standards
2. **Error handling**: Implement proper error handling and logging
3. **Documentation**: Provide clear documentation for plugin usage
4. **Testing**: Test plugins thoroughly on real devices
## Resources
- **Official Documentation**: https://nativesupport.dcloud.net.cn/NativePlugin/
## Keywords
native plugin, 原生插件, Android插件, iOS插件, plugin development, native module
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,14 @@
# Android 原生能力封装
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 示例
- 封装系统能力(定位、蓝牙、推送等)
- 暴露 JS 调用接口
## 参考资源
- https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,15 @@
# Android 插件工程初始化
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 步骤
1. 创建 Android 原生模块
2. 接入 uni-app 插件接口
3. 编写插件入口与配置
## 参考资源
- https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,14 @@
# JS Bridge 通信
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 说明
- 使用 JSBridge 在 JS 与原生层之间通信
- 设计统一的接口规范与参数结构
## 参考资源
- https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,31 @@
# uni-app 原生插件开发指南
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 什么是原生插件
原生插件是用原生代码(Android Java/Kotlin 或 iOS Objective-C/Swift)开发的插件,可以扩展 uni-app 的功能。
## 开发流程
### Android 插件
1. 创建 Android 插件项目
2. 实现插件功能
3. 配置插件信息
4. 打包插件
5. 集成到 uni-app 项目
### iOS 插件
1. 创建 iOS 插件项目
2. 实现插件功能
3. 配置插件信息
4. 打包插件
5. 集成到 uni-app 项目
## 参考资源
- 原生插件开发文档:https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,20 @@
# 原生插件结构与发布
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 目录结构
- plugin 代码
- JS Bridge 接口
- 配置与说明文档
## 发布要点
- 完善插件描述与使用说明
- 提供平台支持与版本兼容说明
## 参考资源
- https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,14 @@
# iOS 原生能力封装
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 示例
- 封装系统能力(摄像头、文件、推送等)
- 暴露 JS 调用接口
## 参考资源
- https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,15 @@
# iOS 插件工程初始化
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 步骤
1. 创建 iOS 原生模块
2. 接入 uni-app 插件接口
3. 编写插件入口与配置
## 参考资源
- https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,15 @@
# 原生插件模板
## 官方文档
参考官方文档:https://nativesupport.dcloud.net.cn/NativePlugin/
## 模板清单
- 插件描述与版本信息
- JS 接口定义
- Android/iOS 实现说明
## 参考资源
- https://nativesupport.dcloud.net.cn/NativePlugin/
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 partme-ai
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+108
View File
@@ -0,0 +1,108 @@
---
name: uniapp-plugin
description: A comprehensive skill for the uni-app plugin market and automatic plugin installation. Use this skill to browse plugins, auto-install plugins, configure plugin settings, and integrate third-party plugins based on the official plugin market docs.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Use plugins from the uni-app plugin market
- Automatically install plugins into projects
- Configure plugin settings
- Integrate third-party plugins
- Handle plugin dependencies
- Update and manage plugins
- Work with different plugin types (components, APIs, templates, etc.)
## How to use this skill
To use plugins:
1. **Identify the plugin type** from the user's request:
- Component plugins → Use component plugin examples
- API plugins → Use API plugin examples
- Template plugins → Use template plugin examples
2. **Load the appropriate example file** from the `examples/` directory:
- `examples/guide/` - Plugin usage guide
- `examples/plugin-types/` - Different plugin type examples
- `examples/installation/` - Plugin installation methods
3. **Load the appropriate template** from the `templates/` directory:
- `templates/plugin-usage.md` - Plugin usage templates
4. **Follow the specific instructions** in those files for plugin integration
## Examples and Templates
### Examples
Located in `examples/`:
- **guide/** - Plugin usage guide and best practices
- **plugin-types/** - Different plugin type examples
- **installation/** - Plugin installation methods and examples
### Templates
Located in `templates/`:
- **plugin-usage.md** - Plugin usage templates and examples
## Best Practices
1. **Choose reliable plugins**: Use plugins from trusted sources
2. **Check compatibility**: Ensure plugin compatibility with your uni-app version
3. **Read documentation**: Always read plugin documentation before use
4. **Update regularly**: Keep plugins updated to latest versions
5. **Handle dependencies**: Manage plugin dependencies properly
## Resources
- **Plugin Market**: https://ext.dcloud.net.cn/
- **Official Documentation**: https://uniapp.dcloud.net.cn/plugin/
## Keywords
plugin market, 插件市场, uni-app plugin, 插件安装, plugin integration, 插件使用
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,14 @@
# 插件市场使用概览
## 官方文档
参考官方文档:https://ext.dcloud.net.cn/
## 适用场景
- 从插件市场集成组件或能力
- 在项目中自动安装与管理插件
## 参考资源
- https://ext.dcloud.net.cn/
@@ -0,0 +1,15 @@
# HBuilderX 安装插件
## 官方文档
参考官方文档:https://ext.dcloud.net.cn/
## 步骤
1. HBuilderX 菜单 → 工具 → 插件安装
2. 搜索插件名称或 ID
3. 选择安装并导入项目
## 参考资源
- https://ext.dcloud.net.cn/
@@ -0,0 +1,15 @@
# 插件市场安装
## 官方文档
参考官方文档:https://ext.dcloud.net.cn/
## 步骤
1. 打开插件市场并选择插件
2. 点击“使用 HBuilderX 导入”
3. 在项目中完成插件依赖配置
## 参考资源
- https://ext.dcloud.net.cn/
@@ -0,0 +1,14 @@
# API 类插件
## 官方文档
参考官方文档:https://ext.dcloud.net.cn/
## 说明
- API 类插件扩展系统能力
- 需关注平台兼容性与权限配置
## 参考资源
- https://ext.dcloud.net.cn/
@@ -0,0 +1,14 @@
# 组件类插件
## 官方文档
参考官方文档:https://ext.dcloud.net.cn/
## 说明
- 组件类插件提供 UI 组件或页面模板
- 通常以 uni_modules 形式接入
## 参考资源
- https://ext.dcloud.net.cn/
@@ -0,0 +1,14 @@
# 模板类插件
## 官方文档
参考官方文档:https://ext.dcloud.net.cn/
## 说明
- 模板类插件提供项目模板或页面模板
- 用于快速创建项目或功能模块
## 参考资源
- https://ext.dcloud.net.cn/
@@ -0,0 +1,16 @@
# 插件使用模板
## 官方文档
参考官方文档:https://ext.dcloud.net.cn/
## 使用清单
- 插件安装方式
- 依赖与版本兼容
- 初始化与配置步骤
- 典型使用示例
## 参考资源
- https://ext.dcloud.net.cn/
@@ -0,0 +1,123 @@
---
name: uniapp-project-creator
description: Provides one-command project creation for uni-app using the official quickstart CLI, including project initialization, configuration, and template selection. Use when the user asks to create a uni-app project with a single command, needs to initialize a new uni-app project, or generate uni-app project structure.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Create a new uni-app project from scratch
- Initialize uni-app project structure and configuration files
- Set up development environment for uni-app
- Generate project templates with different configurations
- Configure manifest.json and pages.json files
- Create uni-app pages and components
- Set up uni-app project with HBuilderX or CLI
## How to use this skill
To create a uni-app project with a single command or via HBuilderX:
1. **Identify the project type** from the user's request:
- Standard uni-app project → Use Vue 2 or Vue 3 template
- HBuilderX project → Use HBuilderX creation method
- CLI project → Use Vue CLI or official CLI commands
2. **Load the appropriate example file** from the `examples/guide/` directory:
- `examples/guide/installation.md` - Installation and environment setup
- `examples/guide/quick-start.md` - Quick start guide
- `examples/guide/project-types.md` - Different project types and templates
3. **Load the appropriate template file** from the `templates/` directory:
- `templates/project-templates.md` - Project structure templates
- `templates/cli-commands.md` - CLI command templates
4. **Follow the specific instructions** in those files for project creation, structure, and configuration
5. **Generate the project structure** with proper files and configurations
**Important Notes**:
- This skill focuses on uni-app CLI quickstart and HBuilderX creation flows
- Use one command creation when the user wants "一句话创建"
- Ensure Vue 2/Vue 3 template choice matches the user's target stack
## Examples and Templates
### Examples
Located in `examples/guide/`:
- **installation.md** - Installation guide for uni-app development environment
- **quick-start.md** - Quick start guide for creating first uni-app project
- **project-types.md** - Different project types (Vue 2, Vue 3, TypeScript, etc.)
### Templates
Located in `templates/`:
- **project-templates.md** - Complete project structure templates
- **cli-commands.md** - CLI command templates for project creation
## API Reference
This skill focuses on project creation and initialization. For component and API references, see `uniapp-project-guide`.
## Best Practices
1. **Choose the right template**: Select Vue 2 or Vue 3 based on project requirements
2. **Configure properly**: Set up manifest.json and pages.json correctly
3. **Organize structure**: Follow standard uni-app directory structure
4. **Use CLI when possible**: CLI provides more flexibility than HBuilderX
5. **Version control**: Initialize git repository after project creation
## Resources
- **Official Documentation**: https://uniapp.dcloud.net.cn/quickstart-cli.html
- **HBuilderX**: https://www.dcloud.io/hbuilderx.html
- **Vue CLI**: https://cli.vuejs.org/
- **uni-app GitHub**: https://github.com/dcloudio/uni-app
## Keywords
uniapp, uni-app, project creator, project initialization, HBuilderX, Vue CLI, manifest.json, pages.json, uni-app setup, uni-app template, 创建项目, 项目初始化, 快速开始
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,119 @@
# uni-app 安装指南
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/quickstart-cli.html
## 安装方式
### 方式一:使用 HBuilderX(推荐新手)
HBuilderX 是 DCloud 官方提供的 IDE,内置 uni-app 开发环境。
**下载安装**
1. 访问 https://www.dcloud.io/hbuilderx.html
2. 下载 HBuilderX(标准版或 App 开发版)
3. 安装并启动 HBuilderX
**创建项目**
1. 文件 → 新建 → 项目
2. 选择 uni-app
3. 选择模板(默认模板、uni-ui 项目模板等)
4. 填写项目名称和路径
5. 点击创建
### 方式二:使用 Vue CLI(推荐有经验开发者)
**安装 Vue CLI**
```bash
# 全局安装 Vue CLI
npm install -g @vue/cli
# 检查版本
vue --version
```
**创建 uni-app 项目**
```bash
# 使用官方预设模板
vue create -p dcloudio/uni-preset-vue my-project
# 或使用 degit(更快)
npx degit dcloudio/uni-preset-vue my-project
```
**选择 Vue 版本**
- Vue 2:稳定版本,兼容性好
- Vue 3:最新版本,性能更好
### 方式三:使用官方 CLIuni-app CLI
```bash
# 安装 uni-app CLI
npm install -g @dcloudio/uvm
uvm
# 创建项目
npx degit dcloudio/uni-preset-vue my-project
```
## 环境要求
### Node.js 版本
- **推荐版本**Node.js 14.x 或更高版本
- **最低版本**Node.js 12.x
```bash
# 检查 Node.js 版本
node --version
# 检查 npm 版本
npm --version
```
### 其他工具
- **微信开发者工具**:用于开发微信小程序
- **Android Studio**:用于开发 Android App
- **Xcode**:用于开发 iOS App(仅 macOS
## 验证安装
创建项目后,验证安装是否成功:
```bash
cd my-project
npm install
npm run dev:h5
```
如果浏览器自动打开并显示 uni-app 欢迎页面,说明安装成功。
## 常见问题
### 1. npm 安装慢
使用国内镜像:
```bash
npm config set registry https://registry.npmmirror.com
```
### 2. Vue CLI 版本问题
确保使用最新版本:
```bash
npm update -g @vue/cli
```
### 3. HBuilderX 无法创建项目
检查 HBuilderX 版本,确保是最新版本。
## 下一步
安装完成后,参考 `quick-start.md` 开始创建第一个项目。
@@ -0,0 +1,216 @@
# uni-app 项目类型
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/quickstart-cli.html
## 项目类型
### 1. Vue 2 项目
**特点**
- 使用 Vue 2.x
- 使用 Options API
- 稳定成熟,兼容性好
**创建方式**
```bash
# 使用 Vue CLI
vue create -p dcloudio/uni-preset-vue my-vue2-project
# 选择 Vue 2
```
**适用场景**
- 需要兼容旧版本 Vue 的项目
- 团队熟悉 Vue 2 语法
- 需要稳定性的项目
### 2. Vue 3 项目
**特点**
- 使用 Vue 3.x
- 支持 Composition API 和 Options API
- 性能更好,包体积更小
**创建方式**
```bash
# 使用 Vue CLI
vue create -p dcloudio/uni-preset-vue my-vue3-project
# 选择 Vue 3
```
**适用场景**
- 新项目推荐使用
- 需要更好的性能
- 需要使用 Composition API
### 3. TypeScript 项目
**特点**
- 使用 TypeScript
- 类型安全
- 更好的代码提示
**创建方式**
```bash
# 使用 Vue CLI,选择 TypeScript
vue create -p dcloudio/uni-preset-vue my-ts-project
# 选择 TypeScript
```
**项目结构**
```
my-ts-project/
├── src/
│ ├── pages/
│ ├── components/
│ ├── App.vue
│ └── main.ts # TypeScript 入口文件
├── tsconfig.json # TypeScript 配置
└── ...
```
**适用场景**
- 大型项目
- 需要类型安全
- 团队使用 TypeScript
### 4. uni-ui 项目模板
**特点**
- 预装 uni-ui 组件库
- 包含常用组件示例
- 快速开发
**创建方式**
在 HBuilderX 中:
1. 文件 → 新建 → 项目
2. 选择 uni-ui 项目模板
**适用场景**
- 需要快速开发 UI
- 使用 uni-ui 组件库
- 需要组件示例
### 5. 空项目模板
**特点**
- 最基础的项目结构
- 不包含示例代码
- 完全自定义
**创建方式**
```bash
# 使用 degit
npx degit dcloudio/uni-preset-vue#empty my-empty-project
```
**适用场景**
- 需要完全自定义
- 从零开始开发
- 学习项目结构
## 模板选择建议
### 新手推荐
1. **HBuilderX + 默认模板**:最简单,适合学习
2. **Vue 2 项目**:语法简单,文档丰富
### 有经验开发者推荐
1. **Vue 3 + TypeScript**:现代化,性能好
2. **Vue CLI 创建**:更灵活,可定制
### 企业项目推荐
1. **Vue 3 + TypeScript**:类型安全,可维护性好
2. **uni-ui 模板**:快速开发,组件丰富
## 项目配置
### manifest.json 配置
不同项目类型的基本配置相同,但可以根据需要调整:
```json
{
"name": "my-app",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
}
}
}
```
### pages.json 配置
所有项目类型的 pages.json 结构相同:
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
```
## 迁移指南
### Vue 2 升级到 Vue 3
参考官方迁移指南:https://v3-migration.vuejs.org/
主要变化:
- 使用 Composition API
- 生命周期钩子变化
- 响应式 API 变化
### JavaScript 迁移到 TypeScript
1. 安装 TypeScript 依赖
2. 添加 `tsconfig.json`
3. 将 `.js` 文件改为 `.ts`
4. 添加类型定义
## 参考资源
- Vue 2 文档:https://v2.cn.vuejs.org/
- Vue 3 文档:https://cn.vuejs.org/
- TypeScript 文档:https://www.typescriptlang.org/
- uni-app 文档:https://uniapp.dcloud.net.cn/
@@ -0,0 +1,272 @@
# uni-app 快速开始
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/quickstart-cli.html
## 创建第一个项目
### 一句话创建(CLI
```bash
# Vue 2 项目
npx degit dcloudio/uni-preset-vue my-uniapp
# Vue 3 + Vite 项目
npx degit dcloudio/uni-preset-vue#vite-ts my-uniapp
```
### 使用 HBuilderX
1. **打开 HBuilderX**
2. **文件 → 新建 → 项目**
3. **选择项目类型**
- uni-app
- 选择模板(默认模板、uni-ui 项目模板等)
4. **填写项目信息**
- 项目名称:my-first-uniapp
- 项目路径:选择保存位置
5. **点击创建**
### 使用 Vue CLI
```bash
# 创建项目
vue create -p dcloudio/uni-preset-vue my-first-uniapp
# 进入项目目录
cd my-first-uniapp
# 安装依赖
npm install
# 运行到 H5
npm run dev:h5
# 运行到微信小程序
npm run dev:mp-weixin
```
### 使用官方 CLI
```bash
# 使用 degit 创建项目
npx degit dcloudio/uni-preset-vue my-first-uniapp
# 进入项目目录
cd my-first-uniapp
# 安装依赖
npm install
# 运行项目
npm run dev:h5
```
## 项目结构
创建后的项目结构:
```
my-first-uniapp/
├── pages/ # 页面目录
│ ├── index/
│ │ └── index.vue # 首页
│ └── ...
├── components/ # 组件目录
├── static/ # 静态资源
├── uni_modules/ # uni_modules 插件
├── App.vue # 应用入口
├── main.js # 入口文件
├── manifest.json # 应用配置
├── pages.json # 页面路由配置
└── uni.scss # 全局样式
```
## 运行项目
### H5 平台
```bash
npm run dev:h5
```
浏览器会自动打开 `http://localhost:8080`
### 微信小程序
```bash
npm run dev:mp-weixin
```
项目会编译到 `dist/dev/mp-weixin`,使用微信开发者工具打开该目录。
### App 平台
```bash
# 使用 HBuilderX 运行
# 或使用 CLI
npm run dev:app-plus
```
## 创建第一个页面
1. **在 `pages` 目录下创建页面文件夹**
```
pages/
└── hello/
└── hello.vue
```
2. **创建页面文件 `hello.vue`**
```vue
<template>
<view class="container">
<text class="title">Hello uni-app!</text>
<button @click="handleClick">点击我</button>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello uni-app!'
}
},
methods: {
handleClick() {
uni.showToast({
title: '按钮被点击了',
icon: 'success'
})
}
},
onLoad() {
console.log('页面加载')
}
}
</script>
<style scoped>
.container {
padding: 20px;
text-align: center;
}
.title {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
</style>
```
3. **在 `pages.json` 中注册页面**
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/hello/hello",
"style": {
"navigationBarTitleText": "Hello"
}
}
]
}
```
4. **页面跳转**
```javascript
// 在 index.vue 中
uni.navigateTo({
url: '/pages/hello/hello'
})
```
## 创建第一个组件
1. **在 `components` 目录下创建组件**
```
components/
└── my-button/
└── my-button.vue
```
2. **组件代码**
```vue
<template>
<button class="my-button" @click="handleClick">
{{ text }}
</button>
</template>
<script>
export default {
name: 'MyButton',
props: {
text: {
type: String,
default: '按钮'
}
},
methods: {
handleClick() {
this.$emit('click')
}
}
}
</script>
<style scoped>
.my-button {
background-color: #007aff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
}
</style>
```
3. **在页面中使用**
```vue
<template>
<view>
<my-button text="点击我" @click="handleButtonClick"></my-button>
</view>
</template>
<script>
import MyButton from '@/components/my-button/my-button.vue'
export default {
components: {
MyButton
},
methods: {
handleButtonClick() {
console.log('按钮被点击')
}
}
}
</script>
```
## 下一步
- 学习 uni-app 组件:参考 `uniapp-project`
- 学习 uni-app API:参考 `uniapp-project`
- 配置项目:参考 `templates/project-templates.md`
@@ -0,0 +1,294 @@
# uni-app CLI 命令模板
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/quickstart-cli.html
## 项目创建命令
### 使用 Vue CLI
```bash
# 安装 Vue CLI(如果未安装)
npm install -g @vue/cli
# 创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue my-project
# 选择 Vue 版本
# - Vue 2
# - Vue 3
```
### 使用 degit(推荐,更快)
```bash
# 创建 Vue 2 项目
npx degit dcloudio/uni-preset-vue my-project
# 创建 Vue 3 项目
npx degit dcloudio/uni-preset-vue#vite-ts my-project
# 创建空项目
npx degit dcloudio/uni-preset-vue#empty my-project
```
### 使用官方 CLI
```bash
# 安装 uni-app CLI
npm install -g @dcloudio/uvm
# 创建项目
npx degit dcloudio/uni-preset-vue my-project
```
## 项目运行命令
### 开发环境
```bash
# H5 平台
npm run dev:h5
# 微信小程序
npm run dev:mp-weixin
# 支付宝小程序
npm run dev:mp-alipay
# 百度小程序
npm run dev:mp-baidu
# 字节跳动小程序
npm run dev:mp-toutiao
# QQ 小程序
npm run dev:mp-qq
# 快手小程序
npm run dev:mp-kuaishou
# App(需要 HBuilderX
npm run dev:app-plus
# 快应用
npm run dev:quickapp-webview
```
### 生产环境
```bash
# H5 平台
npm run build:h5
# 微信小程序
npm run build:mp-weixin
# 支付宝小程序
npm run build:mp-alipay
# 百度小程序
npm run build:mp-baidu
# 字节跳动小程序
npm run build:mp-toutiao
# QQ 小程序
npm run build:mp-qq
# 快手小程序
npm run build:mp-kuaishou
# App(需要 HBuilderX
npm run build:app-plus
# 快应用
npm run build:quickapp-webview
```
## 常用命令
### 安装依赖
```bash
# 安装项目依赖
npm install
# 或使用 yarn
yarn install
# 或使用 pnpm
pnpm install
```
### 清理构建
```bash
# 清理 dist 目录
npm run clean
# 或手动删除
rm -rf dist
```
### 代码检查
```bash
# ESLint 检查
npm run lint
# 自动修复
npm run lint:fix
```
## 一键创建项目脚本
### 创建 Vue 2 项目
```bash
#!/bin/bash
# create-vue2-project.sh
PROJECT_NAME=$1
if [ -z "$PROJECT_NAME" ]; then
echo "Usage: ./create-vue2-project.sh <project-name>"
exit 1
fi
echo "Creating Vue 2 uni-app project: $PROJECT_NAME"
npx degit dcloudio/uni-preset-vue $PROJECT_NAME
cd $PROJECT_NAME
npm install
echo "Project created successfully!"
echo "Run 'npm run dev:h5' to start development server"
```
### 创建 Vue 3 项目
```bash
#!/bin/bash
# create-vue3-project.sh
PROJECT_NAME=$1
if [ -z "$PROJECT_NAME" ]; then
echo "Usage: ./create-vue3-project.sh <project-name>"
exit 1
fi
echo "Creating Vue 3 uni-app project: $PROJECT_NAME"
npx degit dcloudio/uni-preset-vue#vite-ts $PROJECT_NAME
cd $PROJECT_NAME
npm install
echo "Project created successfully!"
echo "Run 'npm run dev:h5' to start development server"
```
## 快速命令别名
`~/.bashrc``~/.zshrc` 中添加:
```bash
# uni-app 快速创建
alias uniapp-create="npx degit dcloudio/uni-preset-vue"
# uni-app 运行 H5
alias uniapp-dev-h5="npm run dev:h5"
# uni-app 运行微信小程序
alias uniapp-dev-weixin="npm run dev:mp-weixin"
# uni-app 构建 H5
alias uniapp-build-h5="npm run build:h5"
# uni-app 构建微信小程序
alias uniapp-build-weixin="npm run build:mp-weixin"
```
使用:
```bash
# 创建项目
uniapp-create my-project
# 运行 H5
uniapp-dev-h5
# 构建微信小程序
uniapp-build-weixin
```
## 项目初始化完整流程
```bash
# 1. 创建项目
npx degit dcloudio/uni-preset-vue my-project
# 2. 进入项目目录
cd my-project
# 3. 安装依赖
npm install
# 4. 初始化 Git(可选)
git init
git add .
git commit -m "Initial commit"
# 5. 运行项目
npm run dev:h5
```
## 多平台同时运行
```bash
# 使用 concurrently 同时运行多个平台
npm install -g concurrently
# 同时运行 H5 和微信小程序
concurrently "npm run dev:h5" "npm run dev:mp-weixin"
```
## 自定义构建命令
`package.json` 中添加:
```json
{
"scripts": {
"dev": "npm run dev:h5",
"build": "npm run build:h5",
"dev:all": "concurrently \"npm run dev:h5\" \"npm run dev:mp-weixin\"",
"build:all": "npm run build:h5 && npm run build:mp-weixin"
}
}
```
## 常见问题解决
### 端口被占用
```bash
# 修改端口(在 vite.config.js 或 webpack 配置中)
# 或使用环境变量
PORT=3000 npm run dev:h5
```
### 清除缓存
```bash
# 清除 node_modules 和重新安装
rm -rf node_modules package-lock.json
npm install
# 清除构建缓存
rm -rf dist .cache
```
## 参考资源
- Vue CLI 文档:https://cli.vuejs.org/
- npm 文档:https://docs.npmjs.com/
- uni-app CLI 文档:https://uniapp.dcloud.net.cn/quickstart-cli.html
@@ -0,0 +1,501 @@
# uni-app 项目模板
## 官方文档
参考官方文档:https://uniapp.dcloud.net.cn/quickstart-cli.html
## 标准项目结构
```
my-uniapp-project/
├── pages/ # 页面目录
│ ├── index/
│ │ └── index.vue # 首页
│ └── ...
├── components/ # 组件目录
│ └── ...
├── static/ # 静态资源
│ ├── images/
│ ├── icons/
│ └── ...
├── uni_modules/ # uni_modules 插件
├── utils/ # 工具函数
│ ├── request.js # 网络请求封装
│ └── ...
├── api/ # API 接口
│ └── ...
├── store/ # 状态管理(Vuex/Pinia
│ └── ...
├── App.vue # 应用入口
├── main.js # 入口文件
├── manifest.json # 应用配置
├── pages.json # 页面路由配置
├── uni.scss # 全局样式
└── package.json # 项目依赖
```
## manifest.json 模板
### 基础配置
```json
{
"name": "my-uniapp",
"appid": "",
"description": "uni-app 项目",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"modules": {},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
"ios": {},
"sdkConfigs": {}
}
},
"quickapp": {},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash",
"base": "/"
}
},
"vueVersion": "2"
}
```
### Vue 3 配置
```json
{
"name": "my-uniapp-vue3",
"appid": "",
"description": "uni-app Vue 3 项目",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"vueVersion": "3",
"app-plus": {
"usingComponents": true,
"compilerVersion": 3
},
"h5": {
"router": {
"mode": "hash",
"base": "/"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
## pages.json 模板
### 基础配置
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
```
### 带 TabBar 配置
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/category/category",
"style": {
"navigationBarTitleText": "分类"
}
},
{
"path": "pages/cart/cart",
"style": {
"navigationBarTitleText": "购物车"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "首页"
},
{
"pagePath": "pages/category/category",
"iconPath": "static/tab-category.png",
"selectedIconPath": "static/tab-category-current.png",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/tab-cart.png",
"selectedIconPath": "static/tab-cart-current.png",
"text": "购物车"
},
{
"pagePath": "pages/user/user",
"iconPath": "static/tab-user.png",
"selectedIconPath": "static/tab-user-current.png",
"text": "我的"
}
]
}
}
```
## 页面模板
### Vue 2 页面模板
```vue
<template>
<view class="container">
<text class="title">{{ title }}</text>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello uni-app'
}
},
onLoad(options) {
console.log('页面加载', options)
},
onShow() {
console.log('页面显示')
},
onReady() {
console.log('页面初次渲染完成')
},
onHide() {
console.log('页面隐藏')
},
onUnload() {
console.log('页面卸载')
},
methods: {
// 方法
}
}
</script>
<style scoped>
.container {
padding: 20px;
}
.title {
font-size: 18px;
color: #333;
}
</style>
```
### Vue 3 页面模板(Composition API
```vue
<template>
<view class="container">
<text class="title">{{ title }}</text>
</view>
</template>
<script setup>
import { ref, onLoad, onShow, onReady, onHide, onUnload } from '@dcloudio/uni-app'
const title = ref('Hello uni-app')
onLoad((options) => {
console.log('页面加载', options)
})
onShow(() => {
console.log('页面显示')
})
onReady(() => {
console.log('页面初次渲染完成')
})
onHide(() => {
console.log('页面隐藏')
})
onUnload(() => {
console.log('页面卸载')
})
</script>
<style scoped>
.container {
padding: 20px;
}
.title {
font-size: 18px;
color: #333;
}
</style>
```
## 组件模板
### Vue 2 组件模板
```vue
<template>
<view class="my-component">
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
name: 'MyComponent',
props: {
message: {
type: String,
default: 'Hello'
}
},
data() {
return {
// 数据
}
},
methods: {
// 方法
}
}
</script>
<style scoped>
.my-component {
padding: 10px;
}
</style>
```
### Vue 3 组件模板(Composition API
```vue
<template>
<view class="my-component">
<text>{{ message }}</text>
</view>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
message: {
type: String,
default: 'Hello'
}
})
const emit = defineEmits(['update', 'delete'])
// 响应式数据
const count = ref(0)
// 方法
const handleClick = () => {
emit('update', 'new value')
}
</script>
<style scoped>
.my-component {
padding: 10px;
}
</style>
```
## App.vue 模板
### Vue 2 App.vue
```vue
<template>
<view id="app">
<!-- 应用内容 -->
</view>
</template>
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/* 全局样式 */
</style>
```
### Vue 3 App.vue
```vue
<template>
<view id="app">
<!-- 应用内容 -->
</view>
</template>
<script setup>
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
onLaunch(() => {
console.log('App Launch')
})
onShow(() => {
console.log('App Show')
})
onHide(() => {
console.log('App Hide')
})
</script>
<style>
/* 全局样式 */
</style>
```
## main.js 模板
### Vue 2 main.js
```javascript
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
```
### Vue 3 main.js
```javascript
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
```
## 使用说明
1. 根据项目类型选择合适的模板
2. 复制模板代码到对应文件
3. 根据项目需求修改配置
4. 添加页面和组件
@@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
+157
View File
@@ -0,0 +1,157 @@
---
name: uniapp-ucharts
description: A comprehensive skill for integrating and using uCharts with UniApp projects. This skill focuses on UniApp-specific integration, configuration, and platform-specific considerations when using uCharts in UniApp applications. Use this skill whenever the user needs to integrate uCharts into UniApp projects, configure UniApp-specific settings, or handle platform differences.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Integrate uCharts into UniApp projects
- Configure UniApp projects to work with uCharts (pages.json, manifest.json, easycom)
- Handle platform-specific behaviors when using uCharts in UniApp (H5, mini-program, App, nvue)
- Use UniApp features (navigation, APIs, lifecycle) with uCharts components
- Build cross-platform UniApp applications with uCharts charts
- Configure easycom for automatic uCharts component import in UniApp
- Handle navigation and routing with uCharts in UniApp
- Optimize UniApp projects using uCharts
- Deploy uCharts-based UniApp applications to multiple platforms
## How to use this skill
This skill is organized to match UniApp integration patterns and the official UniApp plugin structure (https://ext.dcloud.net.cn/plugin?id=271). When working with uCharts in UniApp:
1. **Install and setup** uCharts in UniApp project:
- Load `examples/getting-started/installation.md` for installation in UniApp
- Load `examples/getting-started/project-setup.md` for UniApp project configuration
- Load `examples/getting-started/easycom-config.md` for easycom configuration
2. **Integrate with UniApp features**:
- Load `examples/integration/pages-config.md` for pages.json configuration
- Load `examples/integration/manifest-config.md` for manifest.json configuration
- Load `examples/integration/navigation.md` for navigation with uCharts
- Load `examples/integration/uni-api.md` for using UniApp APIs with uCharts
3. **Handle platform-specific behaviors**:
- Load `examples/platform-specific/h5.md` for H5 platform considerations
- Load `examples/platform-specific/miniprogram.md` for mini-program considerations
- Load `examples/platform-specific/app.md` for App platform considerations
- Load `examples/platform-specific/nvue.md` for nvue considerations
4. **Advanced integration**:
- Load `examples/advanced/custom-theme.md` for theme customization in UniApp
- Load `examples/advanced/build-optimization.md` for build optimization
- Load `examples/advanced/multi-platform.md` for multi-platform deployment
5. **Reference the API documentation** when needed:
- `api/integration-api.md` - UniApp and uCharts integration API
- `api/config-api.md` - Configuration API reference
6. **Use templates** for quick start:
- `templates/basic-uniapp-project.md` - Basic UniApp project with uCharts
- `templates/pages-template.md` - Pages configuration template
- `templates/manifest-template.md` - Manifest configuration template
**Important Notes**:
- This skill focuses on UniApp integration, not uCharts API documentation
- Always configure easycom in pages.json for automatic component import
- Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code
- Test on all target platforms (H5, mini-programs, App) before deployment
- Use rpx units for responsive sizing in UniApp
## Examples and Templates
### Getting Started
- **Installation**: `examples/getting-started/installation.md` - How to install uCharts in UniApp projects
- **Project Setup**: `examples/getting-started/project-setup.md` - Setting up UniApp project with uCharts
- **Easycom Config**: `examples/getting-started/easycom-config.md` - Configuring easycom for automatic component import
### Integration
- **Pages Config**: `examples/integration/pages-config.md` - Configuring pages.json with uCharts
- **Manifest Config**: `examples/integration/manifest-config.md` - Configuring manifest.json for uCharts
- **Navigation**: `examples/integration/navigation.md` - Navigation and routing with uCharts
- **UniApp API**: `examples/integration/uni-api.md` - Using UniApp APIs with uCharts components
### Platform-Specific
- **H5**: `examples/platform-specific/h5.md` - H5 platform considerations with uCharts
- **Mini-Program**: `examples/platform-specific/miniprogram.md` - Mini-program considerations with uCharts
- **App**: `examples/platform-specific/app.md` - App platform considerations with uCharts
- **nvue**: `examples/platform-specific/nvue.md` - nvue considerations with uCharts
### Advanced
- **Custom Theme**: `examples/advanced/custom-theme.md` - Customizing themes in UniApp projects
- **Build Optimization**: `examples/advanced/build-optimization.md` - Optimizing UniApp builds with uCharts
- **Multi-Platform**: `examples/advanced/multi-platform.md` - Multi-platform deployment strategies
### Templates
- **Basic Project**: `templates/basic-uniapp-project.md` - Basic UniApp project structure with uCharts
- **Pages Template**: `templates/pages-template.md` - pages.json configuration template
- **Manifest Template**: `templates/manifest-template.md` - manifest.json configuration template
## API Reference
- **Integration API**: `api/integration-api.md` - UniApp and uCharts integration API reference
- **Config API**: `api/config-api.md` - Configuration API reference for UniApp projects
## Best Practices
1. **Use easycom**: Configure easycom in pages.json for automatic uCharts component import
2. **Platform Testing**: Test on all target platforms (H5, mini-programs, App) before deployment
3. **Use rpx Units**: Use rpx for responsive sizing in UniApp, px for fixed sizes
4. **Canvas Support**: Ensure canvas is properly supported on target platforms
5. **Manifest Configuration**: Properly configure manifest.json for each platform
6. **Conditional Compilation**: Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code
7. **Performance**: Optimize for each platform's specific requirements
8. **Data Format**: Ensure data format is compatible with uCharts requirements
9. **Lifecycle Management**: Properly handle UniApp page lifecycle with uCharts instances
10. **Memory Management**: Clean up chart instances in onUnload lifecycle
## Resources
- **Official UniApp Plugin**: https://ext.dcloud.net.cn/plugin?id=271
- **UniApp Documentation**: https://uniapp.dcloud.net.cn/
- **UniApp API Reference**: https://uniapp.dcloud.net.cn/api/
## Keywords
uniapp, ucharts, uniapp charts, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异, 图表, canvas, 图表组件, UniApp 图表, 跨平台图表, 小程序图表, App 图表
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,167 @@
# Configuration API
## 配置 API
UniApp + uCharts 项目的配置文件 API 参考。
### pages.json 配置
#### easycom 配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
#### pages 配置
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "default" | "custom",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" | "white",
"backgroundColor": "#f5f5f5",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
}
]
}
```
#### globalStyle 配置
```json
{
"globalStyle": {
"navigationBarTextStyle": "black" | "white",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### manifest.json 配置
#### 基本配置
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false
}
```
#### H5 配置
```json
{
"h5": {
"router": {
"mode": "hash" | "history",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
}
}
}
```
#### 微信小程序配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
}
}
```
#### App 配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"distribute": {
"android": {
"permissions": []
},
"ios": {}
}
}
}
```
### uni.scss 配置
```scss
/* uni.scss */
/* 自定义变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### App.vue 配置
```vue
<style lang="scss">
/* 全局样式 */
page {
background-color: #f5f5f5;
}
</style>
```
### main.js 配置
#### Vue 2
```javascript
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
#### Vue 3
```javascript
import { createSSRApp } from 'vue'
import App from './App'
export function createApp() {
const app = createSSRApp(App)
return { app }
}
```
@@ -0,0 +1,153 @@
# Integration API
## UniApp 与 uCharts 整合 API
UniApp 与 uCharts 整合使用的 API 参考。
### easycom 配置 API
```json
{
"easycom": {
"autoscan": boolean,
"custom": {
"qiun-data-charts": "string"
}
}
}
```
### pages.json API
```json
{
"pages": [
{
"path": "string",
"style": {
"navigationBarTitleText": "string",
"navigationStyle": "default" | "custom",
"navigationBarBackgroundColor": "string",
"navigationBarTextStyle": "black" | "white",
"enablePullDownRefresh": boolean,
"onReachBottomDistance": number
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black" | "white",
"navigationBarTitleText": "string",
"navigationBarBackgroundColor": "string",
"backgroundColor": "string"
}
}
```
### manifest.json API
```json
{
"name": "string",
"appid": "string",
"versionName": "string",
"versionCode": "string",
"transformPx": boolean,
"app-plus": {
"usingComponents": boolean,
"nvueStyleCompiler": "uni-app" | "weex"
},
"h5": {
"router": {
"mode": "hash" | "history",
"base": "string"
}
},
"mp-weixin": {
"appid": "string",
"setting": {
"urlCheck": boolean,
"es6": boolean,
"enhance": boolean,
"postcss": boolean,
"minified": boolean
},
"usingComponents": boolean
}
}
```
### UniApp API 与 uCharts 配合
#### 导航 API
```javascript
// 页面跳转
uni.navigateTo({
url: 'string',
success: function,
fail: function,
complete: function
})
// 页面返回
uni.navigateBack({
delta: number
})
```
#### 网络请求 API
```javascript
uni.request({
url: 'string',
method: 'GET' | 'POST' | 'PUT' | 'DELETE',
data: object,
header: object,
success: function,
fail: function,
complete: function
})
```
#### 存储 API
```javascript
// 存储数据
uni.setStorage({
key: 'string',
data: any,
success: function,
fail: function
})
// 获取数据
uni.getStorage({
key: 'string',
success: function,
fail: function
})
```
### 条件编译 API
```javascript
// #ifdef 平台名称
// 平台特定代码
// #endif
// #ifndef 平台名称
// 非平台特定代码
// #endif
// #ifdef H5
// H5 平台代码
// #endif
// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif
// #ifdef APP-PLUS
// App 平台代码
// #endif
```
@@ -0,0 +1,100 @@
# Build Optimization
## 构建优化
优化 UniApp + uCharts 项目的构建和性能。
### 代码分割
使用条件编译减少代码体积:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
<!-- #endif -->
</view>
</template>
```
### 组件按需引入
虽然 easycom 会自动引入,但可以优化:
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
### 图表数据优化
```vue
<script>
export default {
data() {
return {
chartData: {},
opts: {
// 优化配置
enableScroll: false,
dataLabel: false,
legend: {
show: false
}
}
}
},
methods: {
// 数据采样,减少数据量
sampleData(data, maxPoints = 100) {
if (data.length <= maxPoints) {
return data
}
const step = Math.ceil(data.length / maxPoints)
return data.filter((_, index) => index % step === 0)
}
}
}
</script>
```
### 打包配置
在 manifest.json 中配置打包选项:
```json
{
"mp-weixin": {
"setting": {
"minified": true,
"postcss": true
}
},
"h5": {
"optimization": {
"treeShaking": {
"enable": true
}
}
}
}
```
### 注意事项
1. **条件编译**:使用条件编译减少代码体积
2. **数据优化**:合理控制数据量,避免过大
3. **配置优化**:合理配置图表选项,提高性能
4. **打包配置**:正确配置打包选项
5. **性能测试**:在不同平台测试性能
@@ -0,0 +1,117 @@
# Custom Theme
## 自定义主题
在 UniApp 项目中自定义 uCharts 主题。
### 配置主题颜色
在图表配置中设置主题颜色:
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: true
}
}
}
}
}
</script>
```
### 使用 SCSS 变量
`uni.scss` 中定义主题变量:
```scss
/* uni.scss */
$chart-primary-color: #409EFF;
$chart-success-color: #67C23A;
$chart-warning-color: #E6A23C;
$chart-error-color: #F56C6C;
```
在组件中使用:
```vue
<script>
export default {
data() {
return {
opts: {
color: [
'#409EFF', // 使用主题变量
'#67C23A',
'#E6A23C',
'#F56C6C'
]
}
}
}
}
</script>
```
### 条件编译主题
不同平台可以使用不同主题:
```vue
<script>
export default {
data() {
return {
opts: {
// #ifdef H5
color: ['#409EFF', '#67C23A'],
// #endif
// #ifdef MP-WEIXIN
color: ['#07c160', '#ff976a'],
// #endif
// #ifdef APP-PLUS
color: ['#007AFF', '#34C759'],
// #endif
padding: [15, 15, 0, 15],
enableScroll: false
}
}
}
}
</script>
```
### 注意事项
1. **颜色配置**:使用合理的颜色搭配
2. **平台差异**:使用条件编译处理平台差异
3. **主题一致性**:保持应用主题一致性
4. **可读性**:确保图表颜色具有良好的可读性
5. **测试验证**:在不同平台测试主题效果
@@ -0,0 +1,105 @@
# Multi-Platform Deployment
## 多平台部署
UniApp + uCharts 项目支持多平台部署的策略和注意事项。
### 平台差异处理
使用条件编译处理平台差异:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>App 平台内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
opts: {
// #ifdef H5
// H5 平台配置
enableScroll: true,
// #endif
// #ifdef MP-WEIXIN
// 微信小程序配置
enableScroll: false,
// #endif
// #ifdef APP-PLUS
// App 平台配置
enableScroll: false,
// #endif
color: ['#409EFF'],
padding: [15, 15, 0, 15]
}
}
}
}
</script>
```
### 统一 API 封装
封装统一的 API 调用:
```javascript
// utils/api.js
export function request(url, options = {}) {
return new Promise((resolve, reject) => {
uni.request({
url,
...options,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
})
})
}
```
### 平台特定配置
在 manifest.json 中配置各平台:
```json
{
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "your-appid"
},
"app-plus": {
"usingComponents": true
}
}
```
### 注意事项
1. **条件编译**:使用条件编译处理平台差异
2. **API 统一**:封装统一的 API 调用
3. **配置管理**:正确配置各平台参数
4. **测试验证**:在各平台测试功能
5. **文档记录**:记录平台差异和注意事项
@@ -0,0 +1,196 @@
# Easycom Configuration
## Easycom 配置
easycom 是 UniApp 的自动引入机制,配置后可以自动引入 uCharts 组件,无需手动 import。
### 基本配置
`pages.json` 中配置 easycom
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
### 配置说明
- `autoscan: true`:开启自动扫描
- `custom`:自定义规则
- `qiun-data-charts`:组件名称
- `@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue`:组件路径
### 使用示例
配置后,可以直接使用组件,无需引入:
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF']
}
}
}
}
</script>
```
### 完整 pages.json 示例
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### 自定义组件路径
如果 uCharts 安装在不同位置,需要调整路径:
#### npm 安装
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/node_modules/@qiun/ucharts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
#### uni_modules 安装
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
### 禁用 easycom
如果不想使用 easycom,可以手动引入:
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
export default {
components: {
qiunDataCharts
},
data() {
return {
chartData: {},
opts: {}
}
}
}
</script>
```
### 验证配置
创建测试页面验证 easycom 是否生效:
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed'],
series: [{
name: '数据',
data: [120, 200, 150]
}]
},
opts: {
color: ['#409EFF']
}
}
}
}
</script>
```
如果图表正常显示且无报错,说明 easycom 配置成功。
## 注意事项
1. **路径必须正确**:确保组件路径与实际安装位置一致
2. **组件名称**uCharts 组件名称为 `qiun-data-charts`
3. **重启项目**:修改 easycom 配置后需要重启项目
4. **优先级**easycom 优先级高于手动引入
5. **性能**:easycom 不会影响性能,按需加载组件
@@ -0,0 +1,226 @@
# Installation | 安装
## Instructions
This example demonstrates how to install uCharts in UniApp projects via DCloud plugin marketplace (plugin ID: 271).
### Key Concepts
- Installing uCharts via DCloud plugin marketplace
- Installing via npm
- Project structure setup
- Component import methods
- Easycom configuration
### Example: Install via DCloud Plugin Marketplace (Recommended)
**Official Plugin**: https://ext.dcloud.net.cn/plugin?id=271
```bash
# 1. Open HBuilderX
# 2. Go to Tools -> Plugin Installation
# 3. Search for "uCharts" or enter plugin ID: 271
# 4. Click "Import Plugin"
# 5. Plugin will be installed to uni_modules/qiun-data-charts directory
```
**Project Structure After Installation:**
```
project-root/
├── uni_modules/
│ └── qiun-data-charts/
│ ├── components/
│ │ └── qiun-data-charts/
│ └── ...
├── pages/
├── pages.json
└── manifest.json
```
### Example: Install via npm
```bash
# Install uCharts package
npm install @qiun/ucharts
# Or using yarn
yarn add @qiun/ucharts
```
**Import in Component:**
```javascript
// pages/chart/chart.vue
import uCharts from '@qiun/ucharts'
export default {
onReady() {
// Use uCharts here
}
}
```
### Example: Manual Installation
```bash
# 1. Download from DCloud plugin marketplace
# 2. Extract to project root
# 3. Ensure uni_modules/qiun-data-charts/ exists
```
## UniApp 项目配置
### 1. 引入 uCharts
在页面中引入 uCharts 组件:
```vue
<template>
<view class="chart-container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
}
}
</script>
```
### 2. 配置 easycom(推荐)
`pages.json` 中配置 easycom,实现组件自动引入:
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
// ... 页面配置
]
}
```
### 3. 验证安装
创建测试页面验证安装是否成功:
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: 'dash',
dashLength: 2
}
}
}
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 400px;
}
</style>
```
如果图表正常显示,说明安装成功。
## 目录结构
安装后的项目结构:
```
uniapp-project/
├── uni_modules/
│ └── qiun-data-charts/ # uCharts 插件
│ ├── components/ # 组件目录
│ └── ucharts/ # uCharts 核心文件
├── pages/ # 页面目录
├── static/ # 静态资源
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
### Example: Verify Installation
```vue
<!-- pages/index/index.vue -->
<template>
<view>
<qiun-data-charts type="line" :chartData="chartData" />
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [35, 36, 31, 33, 13]
}]
}
}
}
}
</script>
```
### Key Points
- Install via DCloud plugin marketplace for easiest integration
- Plugin ID: 271
- Component will be in `uni_modules/qiun-data-charts/components/qiun-data-charts/`
- Configure easycom in pages.json for automatic import
- Test installation by using the component in a page
- Ensure canvas is supported on target platforms
@@ -0,0 +1,246 @@
# Project Setup
## UniApp 项目配置
配置 UniApp 项目以正确使用 uCharts。
### 项目结构
标准的 UniApp + uCharts 项目结构:
```
uniapp-project/
├── uni_modules/
│ └── qiun-data-charts/ # uCharts 插件
├── pages/ # 页面目录
│ ├── index/
│ │ └── index.vue
│ └── ...
├── components/ # 自定义组件
├── static/ # 静态资源
├── utils/ # 工具函数
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
### App.vue 配置
```vue
<template>
<view id="app">
<!-- 应用根组件 -->
</view>
</template>
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/* 全局样式 */
page {
background-color: #f5f5f5;
}
</style>
```
### main.js 配置
```javascript
import App from './App'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
```
### pages.json 配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### uni.scss 配置
```scss
/* uni.scss */
/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### manifest.json 配置要点
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
## 开发环境配置
### HBuilderX 配置
1. **启用 Canvas 支持**
- 确保项目支持 Canvas
- 检查平台是否支持 Canvas
2. **配置编译器**
- 工具 → 选项 → HBuilderX → 编译器
- 确保启用相关编译选项
### 条件编译
使用条件编译处理平台差异:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台特有内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序特有内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>App 平台特有内容</view>
<!-- #endif -->
</view>
</template>
```
## 验证配置
创建测试页面验证配置是否正确:
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: 'dash',
dashLength: 2
}
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 400px;
padding: 20rpx;
}
</style>
```
## 注意事项
1. **easycom 必须配置**:否则需要手动引入组件
2. **Canvas 支持**:确保目标平台支持 Canvas
3. **容器高度**:图表容器必须有明确的高度
4. **数据格式**:确保数据格式符合 uCharts 要求
5. **平台测试**:在不同平台测试图表功能
6. **性能优化**:注意图表性能,避免过多图表
@@ -0,0 +1,163 @@
# Manifest Configuration
## manifest.json 配置
`manifest.json` 是 UniApp 的应用配置文件,需要正确配置以支持 uCharts 在不同平台运行。
### 基本配置
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
### H5 平台配置
```json
{
"h5": {
"router": {
"mode": "hash",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
},
"publicPath": "/",
"template": "index.html"
}
}
```
### 微信小程序配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
}
```
### App 平台配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
]
},
"ios": {}
}
}
}
```
### 完整配置示例
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "UniApp + uCharts 项目",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app"
},
"h5": {
"router": {
"mode": "hash"
},
"devServer": {
"port": 8080
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
}
}
```
## 关键配置说明
### usingComponents
所有平台都需要设置 `"usingComponents": true`,以支持组件使用。
### transformPx
建议设置为 `false`,使用 rpx 单位进行响应式布局。
### Canvas 支持
uCharts 依赖 Canvas,确保目标平台支持 Canvas:
- **H5**:完全支持 Canvas
- **小程序**:支持 Canvas,但可能有性能限制
- **App**:支持 Canvas,但 nvue 可能有限制
## 注意事项
1. **usingComponents**:必须设置为 true
2. **平台差异**:不同平台对 Canvas 的支持可能有差异
3. **AppID**:小程序平台需要配置对应的 AppID
4. **权限配置**:根据功能需求配置相应权限
5. **版本号**:正确配置版本号和版本名称
6. **Canvas 兼容性**:注意不同平台的 Canvas 兼容性
@@ -0,0 +1,165 @@
# Navigation
## 导航和路由
在 UniApp 中使用 uCharts 组件进行页面导航和路由管理。
### 使用 UniApp 导航 API
#### 页面跳转
```javascript
// 保留当前页面,跳转到应用内的某个页面
uni.navigateTo({
url: '/pages/chart/chart?type=line'
})
// 关闭当前页面,跳转到应用内的某个页面
uni.redirectTo({
url: '/pages/chart/chart?type=bar'
})
// 返回上一页面
uni.navigateBack({
delta: 1
})
```
#### 使用按钮进行跳转
```vue
<template>
<view>
<button @click="goToChart">查看图表</button>
</view>
</template>
<script>
export default {
methods: {
goToChart() {
uni.navigateTo({
url: '/pages/chart/chart?type=line'
})
}
}
}
</script>
```
### 页面传参
#### 传递参数
```javascript
// 跳转并传递参数
uni.navigateTo({
url: '/pages/chart/chart?type=line&title=折线图'
})
```
#### 接收参数
```vue
<template>
<view>
<qiun-data-charts
:type="chartType"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartType: 'line',
chartData: {},
opts: {}
}
},
onLoad(options) {
this.chartType = options.type || 'line'
this.loadChartData()
},
methods: {
loadChartData() {
// 根据 chartType 加载对应的图表数据
}
}
}
</script>
```
### TabBar 导航
#### 使用原生 TabBar
```json
{
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#409EFF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/chart/chart",
"text": "图表"
}
]
}
}
```
### 图表页面导航示例
```vue
<template>
<view class="container">
<view class="nav-buttons">
<button @click="goToChart('line')">折线图</button>
<button @click="goToChart('bar')">柱状图</button>
<button @click="goToChart('pie')">饼图</button>
</view>
<qiun-data-charts
:type="chartType"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartType: 'line',
chartData: {},
opts: {}
}
},
methods: {
goToChart(type) {
uni.navigateTo({
url: `/pages/chart/chart?type=${type}`
})
}
}
}
</script>
```
## 注意事项
1. **路径格式**:路径必须以 `/` 开头
2. **参数传递**URL 参数需要编码
3. **页面栈**:注意页面栈限制(最多 10 层)
4. **数据加载**:跳转后及时加载图表数据
5. **性能优化**:避免频繁跳转导致性能问题
@@ -0,0 +1,152 @@
# Pages Configuration
## pages.json 配置
在 UniApp 项目中,`pages.json` 是页面配置文件,需要正确配置以使用 uCharts。
### 基本配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### 图表页面配置
```json
{
"pages": [
{
"path": "pages/chart/chart",
"style": {
"navigationBarTitleText": "图表",
"navigationBarBackgroundColor": "#409EFF",
"navigationBarTextStyle": "white",
"backgroundColor": "#f5f5f5"
}
}
]
}
```
### 下拉刷新配置
如果图表页面需要下拉刷新:
```json
{
"pages": [
{
"path": "pages/chart/chart",
"style": {
"navigationBarTitleText": "图表",
"enablePullDownRefresh": true
}
}
]
}
```
页面中处理下拉刷新:
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
onPullDownRefresh() {
// 刷新图表数据
this.loadChartData()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
},
methods: {
loadChartData() {
// 加载图表数据
}
}
}
</script>
```
### 完整示例
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/chart/line",
"style": {
"navigationBarTitleText": "折线图"
}
},
{
"path": "pages/chart/bar",
"style": {
"navigationBarTitleText": "柱状图"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
## 注意事项
1. **easycom 配置**:必须在 pages.json 中配置 easycom
2. **路径正确性**:确保组件路径正确
3. **样式配置**:合理配置页面样式
4. **平台差异**:注意不同平台的配置差异
5. **性能优化**:合理配置下拉刷新和上拉加载
@@ -0,0 +1,246 @@
# UniApp API Integration
## UniApp API 与 uCharts 整合
在 UniApp 项目中使用 UniApp API 与 uCharts 组件配合使用。
### 网络请求
#### 使用 uni.request 获取图表数据
```javascript
// 获取图表数据
uni.request({
url: 'https://api.example.com/chart-data',
method: 'GET',
data: {
type: 'line'
},
success: (res) => {
this.chartData = res.data
},
fail: (err) => {
console.error('请求失败', err)
}
})
```
#### 配合 uCharts 使用
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
onLoad() {
this.loadChartData()
},
methods: {
loadChartData() {
uni.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = {
categories: res.data.categories,
series: res.data.series
}
}
})
}
}
}
</script>
```
### 存储 API
#### 缓存图表数据
```javascript
// 保存图表数据
uni.setStorage({
key: 'chartData',
data: this.chartData,
success: () => {
console.log('保存成功')
}
})
// 获取缓存的图表数据
uni.getStorage({
key: 'chartData',
success: (res) => {
this.chartData = res.data
}
})
```
### 页面生命周期
#### 配合 uCharts 使用
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
onLoad() {
// 页面加载时获取数据
this.loadChartData()
},
onShow() {
// 页面显示时刷新数据
this.loadChartData()
},
onPullDownRefresh() {
// 下拉刷新
this.loadChartData()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
},
methods: {
loadChartData() {
uni.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
}
}
}
</script>
```
### 条件编译
#### 平台特定 API
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
methods: {
loadChartData() {
// #ifdef H5
// H5 平台特定代码
fetch('/api/chart-data')
.then(res => res.json())
.then(data => {
this.chartData = data
})
// #endif
// #ifdef MP-WEIXIN
// 微信小程序特定代码
wx.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
// #ifdef APP-PLUS
// App 平台特定代码
plus.net.XMLHttpRequest({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
}
}
}
</script>
```
### 动态更新图表
```vue
<template>
<view>
<button @click="updateChart">更新图表</button>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
methods: {
updateChart() {
// 更新图表数据
uni.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
}
}
}
</script>
```
## 注意事项
1. **API 兼容性**:注意不同平台 API 的兼容性
2. **数据格式**:确保数据格式符合 uCharts 要求
3. **错误处理**:始终处理 API 调用的错误情况
4. **条件编译**:使用条件编译处理平台差异
5. **性能优化**:合理使用缓存,避免频繁请求
@@ -0,0 +1,106 @@
# App Platform
## App 平台注意事项
在 App 平台(iOS/Android)使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
]
},
"ios": {}
}
}
}
```
### Canvas 支持
App 平台支持 Canvas,但 nvue 页面可能有限制。
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15]
}
}
}
}
</script>
```
### 条件编译
使用条件编译处理 App 平台特定逻辑:
```vue
<template>
<view>
<!-- #ifdef APP-PLUS -->
<view>App 平台特有内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
methods: {
loadChartData() {
// #ifdef APP-PLUS
// App 平台特定代码
plus.net.XMLHttpRequest({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
}
}
}
</script>
```
### 注意事项
1. **Canvas 支持**App 平台支持 Canvas,但 nvue 可能有限制
2. **权限配置**:根据功能需求配置相应权限
3. **性能优化**App 平台需要注意性能优化
4. **打包配置**:正确配置打包参数
5. **版本号**:正确配置版本号和版本名称
@@ -0,0 +1,126 @@
# H5 Platform
## H5 平台注意事项
在 H5 平台使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"h5": {
"router": {
"mode": "hash",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
},
"publicPath": "/",
"template": "index.html"
}
}
```
### Canvas 支持
H5 平台完全支持 Canvas,可以使用所有 uCharts 功能。
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false
}
}
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 400px;
}
</style>
```
### 响应式布局
H5 平台可以使用媒体查询:
```vue
<style lang="scss" scoped>
.container {
width: 100%;
/* #ifdef H5 */
@media (min-width: 768px) {
max-width: 1200px;
margin: 0 auto;
}
/* #endif */
}
</style>
```
### 条件编译
使用条件编译处理 H5 平台特定逻辑:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台特有内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
methods: {
loadChartData() {
// #ifdef H5
// H5 平台特定代码
fetch('/api/chart-data')
.then(res => res.json())
.then(data => {
this.chartData = data
})
// #endif
}
}
}
</script>
```
### 注意事项
1. **Canvas 支持**H5 平台完全支持 Canvas
2. **性能优化**:H5 平台可以使用更多 Web API 优化性能
3. **响应式设计**:可以使用媒体查询实现响应式布局
4. **调试工具**:可以使用浏览器开发者工具调试
5. **兼容性**:注意不同浏览器的兼容性
@@ -0,0 +1,140 @@
# Mini-Program Platform
## 小程序平台注意事项
在微信小程序等小程序平台使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
}
}
```
### Canvas 支持
小程序平台支持 Canvas,但需要注意性能限制。
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false
}
}
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 400rpx;
}
</style>
```
### 条件编译
使用条件编译处理小程序平台特定逻辑:
```vue
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序特有内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
methods: {
loadChartData() {
// #ifdef MP-WEIXIN
// 微信小程序特定代码
wx.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
}
}
}
</script>
```
### 性能优化
小程序平台需要注意性能:
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
:canvas-id="canvasId"
/>
</view>
</template>
<script>
export default {
data() {
return {
canvasId: 'chart-canvas',
chartData: {},
opts: {
// 优化配置
enableScroll: false,
dataLabel: false
}
}
}
}
</script>
```
### 注意事项
1. **Canvas 性能**:小程序平台 Canvas 性能有限,注意优化
2. **数据量**:避免过大的数据量
3. **代码包大小**:注意小程序代码包大小限制
4. **AppID 配置**:必须在 manifest.json 中配置正确的 AppID
5. **URL 检查**:开发时可以关闭 urlCheck
@@ -0,0 +1,91 @@
# nvue Platform
## nvue 平台注意事项
在 nvue 页面使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"app-plus": {
"nvueStyleCompiler": "uni-app",
"nvue": {
"flex-direction": "column"
}
}
}
```
### Canvas 限制
nvue 平台对 Canvas 的支持可能有限,需要注意:
```vue
<template>
<view class="container">
<!-- #ifndef APP-PLUS-NVUE -->
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
<!-- #endif -->
<!-- #ifdef APP-PLUS-NVUE -->
<view class="nvue-tip">nvue 平台可能不支持 Canvas 图表</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
}
}
</script>
<style scoped>
.container {
flex-direction: column;
padding: 20rpx;
}
.nvue-tip {
padding: 20rpx;
text-align: center;
color: #909399;
}
</style>
```
### 样式限制
nvue 平台样式有限制:
```vue
<style lang="scss" scoped>
.container {
/* nvue 支持的样式 */
flex-direction: column;
padding: 20rpx;
/* nvue 不支持的样式需要条件编译 */
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
}
</style>
```
### 注意事项
1. **Canvas 限制**nvue 平台对 Canvas 的支持可能有限
2. **样式限制**nvue 不支持所有 CSS 属性
3. **条件编译**:使用条件编译处理兼容性问题
4. **性能**nvue 性能更好,但功能有限
5. **替代方案**:考虑使用其他图表方案或条件编译
@@ -0,0 +1,206 @@
# Basic UniApp Project Template
## 基础 UniApp 项目模板
这是一个基础的 UniApp + uCharts 项目模板。
### 项目结构
```
uniapp-ucharts-project/
├── uni_modules/
│ └── qiun-data-charts/ # uCharts 插件
├── pages/
│ ├── index/
│ │ └── index.vue
│ └── ...
├── static/ # 静态资源
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
### App.vue
```vue
<template>
<view id="app">
<!-- 应用根组件 -->
</view>
</template>
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/* 全局样式 */
page {
background-color: #f5f5f5;
}
</style>
```
### main.js
```javascript
import App from './App'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
```
### pages.json
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### uni.scss
```scss
/* uni.scss */
/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### manifest.json
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
### pages/index/index.vue
```vue
<template>
<view class="container">
<view class="chart-wrapper">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: 'dash',
dashLength: 2
}
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx;
}
.chart-wrapper {
width: 100%;
height: 400px;
background-color: #ffffff;
border-radius: 8rpx;
padding: 20rpx;
}
</style>
```
@@ -0,0 +1,86 @@
# Manifest Configuration Template
## manifest.json 配置模板
UniApp + uCharts 项目的 manifest.json 配置模板。
### 完整模板
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "UniApp + uCharts 项目",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
]
},
"ios": {}
}
},
"h5": {
"router": {
"mode": "hash",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
},
"publicPath": "/",
"template": "index.html"
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"mp-qq": {
"usingComponents": true
},
"quickapp": {},
"vueVersion": "2"
}
```
### 使用说明
1. **appid**:小程序平台需要配置对应的 AppID
2. **usingComponents**:所有平台都需要设置为 true
3. **transformPx**:建议设置为 false,使用 rpx
4. **vueVersion**:指定 Vue 版本(2 或 3
5. **平台配置**:根据目标平台配置相应参数
@@ -0,0 +1,74 @@
# Pages Configuration Template
## pages.json 配置模板
UniApp + uCharts 项目的 pages.json 配置模板。
### 完整模板
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#409EFF",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/chart/line",
"style": {
"navigationBarTitleText": "折线图",
"enablePullDownRefresh": true
}
},
{
"path": "pages/chart/bar",
"style": {
"navigationBarTitleText": "柱状图"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#409EFF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png"
},
{
"pagePath": "pages/chart/chart",
"text": "图表",
"iconPath": "static/tab-chart.png",
"selectedIconPath": "static/tab-chart-current.png"
}
]
}
}
```
### 使用说明
1. **easycom 配置**:必须配置,用于自动引入 uCharts 组件
2. **pages 配置**:配置所有页面路径和样式
3. **globalStyle**:配置全局样式
4. **tabBar**:配置底部导航栏(可选)
+156
View File
@@ -0,0 +1,156 @@
---
name: uniapp-uview
description: A comprehensive skill for integrating and using uView UI with UniApp projects. This skill focuses on UniApp-specific integration, configuration, and platform-specific considerations when using uView UI in UniApp applications. Use this skill whenever the user needs to integrate uView UI into UniApp projects, configure UniApp-specific settings, or handle platform differences.
license: Complete terms in LICENSE.txt
---
## When to use this skill
Use this skill whenever the user wants to:
- Integrate uView UI into UniApp projects
- Configure UniApp projects to work with uView UI (pages.json, manifest.json, easycom)
- Handle platform-specific behaviors when using uView in UniApp (H5, mini-program, App, nvue)
- Use UniApp features (navigation, APIs, lifecycle) with uView components
- Build cross-platform UniApp applications with uView UI components
- Configure easycom for automatic uView component import in UniApp
- Handle navigation and routing with uView in UniApp
- Optimize UniApp projects using uView UI
- Deploy uView-based UniApp applications to multiple platforms
## How to use this skill
This skill is organized to match UniApp integration patterns and the official UniApp plugin structure (https://ext.dcloud.net.cn/plugin?id=1593). When working with uView UI in UniApp:
1. **Install and setup** uView UI in UniApp project:
- Load `examples/getting-started/installation.md` for installation in UniApp
- Load `examples/getting-started/project-setup.md` for UniApp project configuration
- Load `examples/getting-started/easycom-config.md` for easycom configuration
2. **Integrate with UniApp features**:
- Load `examples/integration/pages-config.md` for pages.json configuration
- Load `examples/integration/manifest-config.md` for manifest.json configuration
- Load `examples/integration/navigation.md` for navigation with uView
- Load `examples/integration/uni-api.md` for using UniApp APIs with uView
3. **Handle platform-specific behaviors**:
- Load `examples/platform-specific/h5.md` for H5 platform considerations
- Load `examples/platform-specific/miniprogram.md` for mini-program considerations
- Load `examples/platform-specific/app.md` for App platform considerations
- Load `examples/platform-specific/nvue.md` for nvue considerations
4. **Advanced integration**:
- Load `examples/advanced/custom-theme.md` for theme customization in UniApp
- Load `examples/advanced/build-optimization.md` for build optimization
- Load `examples/advanced/multi-platform.md` for multi-platform deployment
5. **Reference the API documentation** when needed:
- `api/integration-api.md` - UniApp and uView integration API
- `api/config-api.md` - Configuration API reference
6. **Use templates** for quick start:
- `templates/basic-uniapp-project.md` - Basic UniApp project with uView
- `templates/pages-template.md` - Pages configuration template
- `templates/manifest-template.md` - Manifest configuration template
**Important Notes**:
- This skill focuses on UniApp integration, not uView UI API documentation
- uView UI supports both Vue 2 and Vue 3, use appropriate syntax
- Always configure easycom in pages.json for automatic component import
- Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code
- Test on all target platforms (H5, mini-programs, App) before deployment
- Use rpx units for responsive sizing in UniApp
## Examples and Templates
### Getting Started
- **Installation**: `examples/getting-started/installation.md` - How to install uView UI in UniApp projects
- **Project Setup**: `examples/getting-started/project-setup.md` - Setting up UniApp project with uView
- **Easycom Config**: `examples/getting-started/easycom-config.md` - Configuring easycom for automatic component import
### Integration
- **Pages Config**: `examples/integration/pages-config.md` - Configuring pages.json with uView
- **Manifest Config**: `examples/integration/manifest-config.md` - Configuring manifest.json for uView
- **Navigation**: `examples/integration/navigation.md` - Navigation and routing with uView
- **UniApp API**: `examples/integration/uni-api.md` - Using UniApp APIs with uView components
### Platform-Specific
- **H5**: `examples/platform-specific/h5.md` - H5 platform considerations with uView
- **Mini-Program**: `examples/platform-specific/miniprogram.md` - Mini-program considerations with uView
- **App**: `examples/platform-specific/app.md` - App platform considerations with uView
- **nvue**: `examples/platform-specific/nvue.md` - nvue considerations with uView
### Advanced
- **Custom Theme**: `examples/advanced/custom-theme.md` - Customizing themes in UniApp projects
- **Build Optimization**: `examples/advanced/build-optimization.md` - Optimizing UniApp builds with uView
- **Multi-Platform**: `examples/advanced/multi-platform.md` - Multi-platform deployment strategies
### Templates
- **Basic Project**: `templates/basic-uniapp-project.md` - Basic UniApp project structure with uView
- **Pages Template**: `templates/pages-template.md` - pages.json configuration template
- **Manifest Template**: `templates/manifest-template.md` - manifest.json configuration template
## API Reference
- **Integration API**: `api/integration-api.md` - UniApp and uView integration API reference
- **Config API**: `api/config-api.md` - Configuration API reference for UniApp projects
## Best Practices
1. **Use easycom**: Configure easycom in pages.json for automatic uView component import
2. **Platform Testing**: Test on all target platforms (H5, mini-programs, App)
3. **Use rpx Units**: Use rpx for responsive sizing in UniApp, px for fixed sizes
4. **SCSS Support**: Ensure SCSS is properly configured in UniApp project
5. **Manifest Configuration**: Properly configure manifest.json for each platform
6. **Conditional Compilation**: Use conditional compilation for platform-specific code
7. **Performance**: Optimize for each platform's specific requirements
8. **Navigation**: Use UniApp navigation API with uView components
## Resources
- **Official Plugin**: https://ext.dcloud.net.cn/plugin?id=1593
- **UniApp Documentation**: https://uniapp.dcloud.net.cn/
- **uView UI**: https://www.uviewui.com/
## Keywords
uniapp, uview, uview-ui, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
2. **配置文件格式**:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
3. **环境变量**:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
4. **依赖冲突**:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
5. **性能陷阱**:大数据量场景下注意性能优化,避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
@@ -0,0 +1,187 @@
# Configuration API
## 配置 API
UniApp + uView 项目的配置文件 API 参考。
### pages.json 配置
#### easycom 配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}
}
```
#### pages 配置
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "default" | "custom",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" | "white",
"backgroundColor": "#f5f5f5",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
}
]
}
```
#### globalStyle 配置
```json
{
"globalStyle": {
"navigationBarTextStyle": "black" | "white",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
#### tabBar 配置
```json
{
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#409EFF",
"borderStyle": "black" | "white",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png"
}
]
}
}
```
### manifest.json 配置
#### 基本配置
```json
{
"name": "uniapp-uview-project",
"appid": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false
}
```
#### H5 配置
```json
{
"h5": {
"router": {
"mode": "hash" | "history",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
}
}
}
```
#### 微信小程序配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
}
}
```
#### App 配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"distribute": {
"android": {
"permissions": []
},
"ios": {}
}
}
}
```
### uni.scss 配置
```scss
/* 引入 uView 主题变量 */
@import "uview-ui/theme.scss";
/* 自定义变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### App.vue 配置
```vue
<style lang="scss">
/* 引入 uView 基础样式 */
@import "uview-ui/index.scss";
</style>
```
### main.js 配置
#### Vue 2
```javascript
import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'
Vue.use(uView)
```
#### Vue 3
```javascript
import { createSSRApp } from 'vue'
import App from './App'
import uView from 'uview-ui'
export function createApp() {
const app = createSSRApp(App)
app.use(uView)
return { app }
}
```
@@ -0,0 +1,179 @@
# Integration API
## UniApp 与 uView 整合 API
UniApp 与 uView UI 整合使用的 API 参考。
### easycom 配置 API
```json
{
"easycom": {
"autoscan": boolean,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}
}
```
### pages.json API
```json
{
"pages": [
{
"path": "string",
"style": {
"navigationBarTitleText": "string",
"navigationStyle": "default" | "custom",
"navigationBarBackgroundColor": "string",
"navigationBarTextStyle": "black" | "white",
"enablePullDownRefresh": boolean,
"onReachBottomDistance": number
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black" | "white",
"navigationBarTitleText": "string",
"navigationBarBackgroundColor": "string",
"backgroundColor": "string"
},
"tabBar": {
"color": "string",
"selectedColor": "string",
"borderStyle": "black" | "white",
"backgroundColor": "string",
"list": [
{
"pagePath": "string",
"text": "string",
"iconPath": "string",
"selectedIconPath": "string"
}
]
}
}
```
### manifest.json API
```json
{
"name": "string",
"appid": "string",
"versionName": "string",
"versionCode": "string",
"transformPx": boolean,
"app-plus": {
"usingComponents": boolean,
"nvueStyleCompiler": "uni-app" | "weex"
},
"h5": {
"router": {
"mode": "hash" | "history",
"base": "string"
}
},
"mp-weixin": {
"appid": "string",
"setting": {
"urlCheck": boolean,
"es6": boolean,
"enhance": boolean,
"postcss": boolean,
"minified": boolean
},
"usingComponents": boolean
}
}
```
### UniApp API 与 uView 配合
#### 导航 API
```javascript
// 页面跳转
uni.navigateTo({
url: 'string',
success: function,
fail: function,
complete: function
})
// 页面返回
uni.navigateBack({
delta: number
})
// TabBar 跳转
uni.switchTab({
url: 'string'
})
```
#### 网络请求 API
```javascript
uni.request({
url: 'string',
method: 'GET' | 'POST' | 'PUT' | 'DELETE',
data: object,
header: object,
success: function,
fail: function,
complete: function
})
```
#### 存储 API
```javascript
// 存储数据
uni.setStorage({
key: 'string',
data: any,
success: function,
fail: function
})
// 获取数据
uni.getStorage({
key: 'string',
success: function,
fail: function
})
// 移除数据
uni.removeStorage({
key: 'string',
success: function,
fail: function
})
```
### 条件编译 API
```javascript
// #ifdef 平台名称
// 平台特定代码
// #endif
// #ifndef 平台名称
// 非平台特定代码
// #endif
// #ifdef H5
// H5 平台代码
// #endif
// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif
// #ifdef APP-PLUS
// App 平台代码
// #endif
```
@@ -0,0 +1,97 @@
# Build Optimization
## 构建优化
优化 UniApp + uView 项目的构建和性能。
### 代码分割
使用条件编译减少代码体积:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<u-button>H5 按钮</u-button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<u-button>小程序按钮</u-button>
<!-- #endif -->
</view>
</template>
```
### 组件按需引入
虽然 easycom 会自动引入,但可以优化:
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}
}
```
### 图片优化
```vue
<template>
<view>
<!-- 使用 webp 格式(H5 -->
<!-- #ifdef H5 -->
<image src="/static/image.webp"></image>
<!-- #endif -->
<!-- 使用 png 格式(小程序) -->
<!-- #ifdef MP-WEIXIN -->
<image src="/static/image.png"></image>
<!-- #endif -->
</view>
</template>
```
### 样式优化
```vue
<style lang="scss" scoped>
/* 使用 scoped 避免样式污染 */
.container {
/* 样式 */
}
</style>
```
### 打包配置
在 manifest.json 中配置打包选项:
```json
{
"mp-weixin": {
"setting": {
"minified": true,
"postcss": true
}
},
"h5": {
"optimization": {
"treeShaking": {
"enable": true
}
}
}
}
```
### 注意事项
1. **条件编译**:使用条件编译减少代码体积
2. **图片优化**:使用合适的图片格式和大小
3. **样式优化**:使用 scoped 避免样式污染
4. **打包配置**:正确配置打包选项
5. **性能测试**:在不同平台测试性能
@@ -0,0 +1,96 @@
# Custom Theme
## 自定义主题
在 UniApp 项目中自定义 uView UI 主题。
### 修改主题变量
`uni.scss` 中修改主题变量:
```scss
/* uni.scss */
@import "uview-ui/theme.scss";
/* 自定义主题变量 */
$u-type-primary: #409EFF;
$u-type-success: #67C23A;
$u-type-warning: #E6A23C;
$u-type-error: #F56C6C;
$u-type-info: #909399;
/* 自定义其他变量 */
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #C0C4CC;
$u-border-color: #E4E7ED;
$u-bg-color: #F3F4F6;
```
### 使用 SCSS 变量
在组件中使用主题变量:
```vue
<template>
<view class="custom-button">自定义按钮</view>
</template>
<style lang="scss" scoped>
.custom-button {
background-color: $u-type-primary;
color: #ffffff;
padding: 20rpx 40rpx;
border-radius: 8rpx;
}
</style>
```
### 全局样式覆盖
`App.vue` 中覆盖全局样式:
```vue
<style lang="scss">
@import "uview-ui/index.scss";
/* 覆盖 uView 默认样式 */
.u-button {
border-radius: 8rpx;
}
.u-input {
border-radius: 8rpx;
}
</style>
```
### 条件编译主题
不同平台可以使用不同主题:
```scss
/* uni.scss */
@import "uview-ui/theme.scss";
/* #ifdef H5 */
$u-type-primary: #409EFF;
/* #endif */
/* #ifdef MP-WEIXIN */
$u-type-primary: #07c160;
/* #endif */
/* #ifdef APP-PLUS */
$u-type-primary: #007AFF;
/* #endif */
```
### 注意事项
1. **变量名称**:使用正确的变量名称
2. **引入顺序**:先引入 uView 主题,再覆盖变量
3. **作用域**:注意变量的作用域
4. **平台差异**:使用条件编译处理平台差异
5. **测试验证**:在不同平台测试主题效果
@@ -0,0 +1,97 @@
# Multi-Platform Deployment
## 多平台部署
UniApp + uView 项目支持多平台部署的策略和注意事项。
### 平台差异处理
使用条件编译处理平台差异:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>App 平台内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
methods: {
handlePlatform() {
// #ifdef H5
// H5 平台代码
// #endif
// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif
// #ifdef APP-PLUS
// App 平台代码
// #endif
}
}
}
</script>
```
### 统一 API 封装
封装统一的 API 调用:
```javascript
// utils/api.js
export function request(url, options = {}) {
return new Promise((resolve, reject) => {
uni.request({
url,
...options,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
})
})
}
```
### 平台特定配置
在 manifest.json 中配置各平台:
```json
{
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "your-appid"
},
"app-plus": {
"usingComponents": true
}
}
```
### 注意事项
1. **条件编译**:使用条件编译处理平台差异
2. **API 统一**:封装统一的 API 调用
3. **配置管理**:正确配置各平台参数
4. **测试验证**:在各平台测试功能
5. **文档记录**:记录平台差异和注意事项
@@ -0,0 +1,170 @@
# Easycom Configuration
## Easycom 配置
easycom 是 UniApp 的自动引入机制,配置后可以自动引入 uView 组件,无需手动 import。
### 基本配置
`pages.json` 中配置 easycom
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}
}
```
### 配置说明
- `autoscan: true`:开启自动扫描
- `custom`:自定义规则
- `^u-(.*)`:匹配以 `u-` 开头的组件名
- `uview-ui/components/u-$1/u-$1.vue`:组件路径,`$1` 是匹配的内容
### 使用示例
配置后,可以直接使用组件,无需引入:
```vue
<template>
<view>
<!-- 直接使用,无需 import -->
<u-button type="primary">按钮</u-button>
<u-input v-model="value" placeholder="请输入"></u-input>
<u-form :model="form">
<u-form-item label="用户名">
<u-input v-model="form.username"></u-input>
</u-form-item>
</u-form>
</view>
</template>
<script>
export default {
data() {
return {
value: '',
form: {
username: ''
}
}
}
}
</script>
```
### 完整 pages.json 示例
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### 自定义组件路径
如果 uView 安装在不同位置,需要调整路径:
#### npm 安装
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "node_modules/uview-ui/components/u-$1/u-$1.vue"
}
}
}
```
#### uni_modules 安装
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uni_modules/uview-ui/components/u-$1/u-$1.vue"
}
}
}
```
### 禁用 easycom
如果不想使用 easycom,可以手动引入:
```vue
<template>
<view>
<u-button>按钮</u-button>
</view>
</template>
<script>
import uButton from 'uview-ui/components/u-button/u-button.vue'
export default {
components: {
uButton
}
}
</script>
```
### 验证配置
创建测试页面验证 easycom 是否生效:
```vue
<template>
<view class="container">
<u-button type="primary" @click="test">测试 Easycom</u-button>
</view>
</template>
<script>
export default {
methods: {
test() {
console.log('Easycom 配置成功!')
}
}
}
</script>
```
如果按钮正常显示且无报错,说明 easycom 配置成功。
## 注意事项
1. **路径必须正确**:确保组件路径与实际安装位置一致
2. **组件名称**uView 组件都以 `u-` 开头
3. **重启项目**:修改 easycom 配置后需要重启项目
4. **优先级**easycom 优先级高于手动引入
5. **性能**:easycom 不会影响性能,按需加载组件
@@ -0,0 +1,171 @@
# Installation
## 在 UniApp 项目中安装 uView UI
uView UI 是专为 UniApp 设计的 UI 组件库,需要正确集成到 UniApp 项目中。
### 方式一:通过 DCloud 插件市场安装(推荐)
1. 访问 DCloud 插件市场:https://ext.dcloud.net.cn/plugin?id=1593
2. 在 HBuilderX 中:
- 打开项目
- 点击"工具" → "插件安装"
- 搜索 "uView UI" 或直接输入插件 ID: 1593
- 点击"导入插件"
3. 插件会自动导入到 `uni_modules/uview-ui` 目录
### 方式二:通过 npm 安装
```bash
npm install uview-ui
```
安装后,uView UI 位于 `node_modules/uview-ui` 目录。
### 方式三:手动下载安装
1. 从 GitHub 下载:https://github.com/umicro/uView
2. 将下载的文件解压到项目的 `uni_modules/uview-ui` 目录
## UniApp 项目配置
### 1. 在 main.js 中引入
```javascript
// main.js
import App from './App'
import uView from 'uview-ui'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uView)
return {
app
}
}
// #endif
// #ifndef VUE3
import Vue from 'vue'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
```
### 2. 在 App.vue 中引入样式
```vue
<!-- App.vue -->
<style lang="scss">
/* 引入 uView 基础样式 */
@import "uview-ui/index.scss";
</style>
```
### 3. 在 uni.scss 中引入主题变量(可选)
```scss
/* uni.scss */
@import "uview-ui/theme.scss";
```
### 4. 配置 easycom(重要)
`pages.json` 中配置 easycom,实现组件自动引入:
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
},
"pages": [
// ... 页面配置
]
}
```
### 5. 验证安装
创建测试页面 `pages/index/index.vue`
```vue
<template>
<view class="container">
<u-button type="primary">uView 按钮</u-button>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 20rpx;
}
</style>
```
如果按钮正常显示,说明安装成功。
## 目录结构
安装后的项目结构:
```
uniapp-project/
├── uni_modules/
│ └── uview-ui/ # uView UI 插件
│ ├── components/ # 组件目录
│ ├── index.scss # 基础样式
│ └── theme.scss # 主题变量
├── pages/ # 页面目录
├── static/ # 静态资源
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
## 注意事项
1. **SCSS 支持**:确保项目支持 SCSS,在 HBuilderX 中创建项目时选择支持 SCSS
2. **easycom 配置**:必须配置 easycom,否则需要手动引入每个组件
3. **路径问题**:如果使用 npm 安装,注意路径可能需要调整
4. **版本兼容**:确保 uView UI 版本与 UniApp 版本兼容
5. **Vue 版本**uView UI 支持 Vue 2 和 Vue 3,注意对应的使用方式
## 常见问题
### 组件找不到
- 检查 easycom 配置是否正确
- 检查组件名称是否正确(u-button, u-input 等)
- 检查是否在 main.js 中注册了 uView
### 样式不生效
- 检查是否在 App.vue 中引入了 `uview-ui/index.scss`
- 检查 style 标签是否设置了 `lang="scss"`
- 检查项目是否支持 SCSS
### 主题变量不生效
- 检查是否在 uni.scss 中引入了 `uview-ui/theme.scss`
- 检查变量名称是否正确
- 检查 SCSS 语法是否正确
@@ -0,0 +1,264 @@
# Project Setup
## UniApp 项目配置
配置 UniApp 项目以正确使用 uView UI。
### 项目结构
标准的 UniApp + uView 项目结构:
```
uniapp-project/
├── uni_modules/
│ └── uview-ui/ # uView UI 插件
├── pages/ # 页面目录
│ ├── index/
│ │ └── index.vue
│ └── ...
├── components/ # 自定义组件
├── static/ # 静态资源
├── utils/ # 工具函数
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
### App.vue 配置
```vue
<template>
<view id="app">
<!-- 应用根组件 -->
</view>
</template>
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/* 引入 uView 基础样式 */
@import "uview-ui/index.scss";
/* 全局样式 */
page {
background-color: #f5f5f5;
}
</style>
```
### main.js 配置
#### Vue 2 项目
```javascript
import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
#### Vue 3 项目
```javascript
import { createSSRApp } from 'vue'
import App from './App'
import uView from 'uview-ui'
export function createApp() {
const app = createSSRApp(App)
app.use(uView)
return {
app
}
}
```
### pages.json 配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "首页"
}
]
}
}
```
### uni.scss 配置
```scss
/* uni.scss */
/* 引入 uView 主题变量 */
@import "uview-ui/theme.scss";
/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### manifest.json 配置要点
```json
{
"name": "uniapp-uview-project",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
## 开发环境配置
### HBuilderX 配置
1. **启用 SCSS 支持**
- 创建项目时选择支持 SCSS
- 或在项目设置中启用 SCSS 编译
2. **配置编译器**
- 工具 → 选项 → HBuilderX → 编译器
- 确保启用 SCSS 编译
### 条件编译
使用条件编译处理平台差异:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台特有内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序特有内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>App 平台特有内容</view>
<!-- #endif -->
</view>
</template>
```
## 验证配置
创建测试页面验证配置是否正确:
```vue
<template>
<view class="container">
<u-navbar title="测试页面"></u-navbar>
<view class="content">
<u-button type="primary" @click="test">测试按钮</u-button>
<u-toast ref="uToast"></u-toast>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
test() {
this.$u.toast('配置成功!')
}
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
background-color: #f5f5f5;
}
.content {
padding: 20rpx;
}
</style>
```
## 注意事项
1. **easycom 必须配置**:否则需要手动引入每个组件
2. **SCSS 必须支持**uView 依赖 SCSS
3. **路径正确性**:确保引入路径正确
4. **版本兼容**:确保 UniApp 和 uView 版本兼容
5. **平台测试**:在不同平台测试功能
@@ -0,0 +1,216 @@
# Manifest Configuration
## manifest.json 配置
`manifest.json` 是 UniApp 的应用配置文件,需要正确配置以支持 uView UI 在不同平台运行。
### 基本配置
```json
{
"name": "uniapp-uview-project",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
### H5 平台配置
```json
{
"h5": {
"router": {
"mode": "hash",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
},
"publicPath": "/",
"template": "index.html"
}
}
```
### 微信小程序配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
}
```
### App 平台配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"modules": {},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
]
},
"ios": {},
"sdkConfigs": {}
}
}
}
```
### 支付宝小程序配置
```json
{
"mp-alipay": {
"usingComponents": true
}
}
```
### 百度小程序配置
```json
{
"mp-baidu": {
"usingComponents": true
}
}
```
### 字节跳动小程序配置
```json
{
"mp-toutiao": {
"usingComponents": true
}
}
```
### QQ 小程序配置
```json
{
"mp-qq": {
"usingComponents": true
}
}
```
### 完整配置示例
```json
{
"name": "uniapp-uview-project",
"appid": "",
"description": "UniApp + uView UI 项目",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app"
},
"h5": {
"router": {
"mode": "hash"
},
"devServer": {
"port": 8080
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"mp-qq": {
"usingComponents": true
},
"quickapp": {},
"vueVersion": "3"
}
```
## 关键配置说明
### usingComponents
所有平台都需要设置 `"usingComponents": true`,以支持组件使用。
### transformPx
建议设置为 `false`,使用 rpx 单位进行响应式布局。
### vueVersion
指定 Vue 版本:
- `"2"` - Vue 2
- `"3"` - Vue 3
## 注意事项
1. **usingComponents**:必须设置为 true
2. **平台差异**:不同平台有不同的配置项
3. **AppID**:小程序平台需要配置对应的 AppID
4. **权限配置**:根据功能需求配置相应权限
5. **版本号**:正确配置版本号和版本名称

Some files were not shown because too many files have changed in this diff Show More