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:
@@ -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 内置组件 / API(Vue 3 + TS + Vite,UTS) | `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.x(uni-app)、uView Pro(Vue 3)、uView Pro(uni-app-x)。按项目技术栈选择。
|
||||
- `uniapp-project-creator` vs `uniappx-project-creator`:创建 uni-app 项目用前者,创建 uni-app-x(UTS)项目用后者。
|
||||
@@ -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,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.
|
||||
@@ -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.
|
||||
@@ -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:最新版本,性能更好
|
||||
|
||||
### 方式三:使用官方 CLI(uni-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.
|
||||
@@ -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**:配置底部导航栏(可选)
|
||||
@@ -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
Reference in New Issue
Block a user