mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -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. **性能优化**：合理使用缓存，避免频繁请求
|
||||
Reference in New Issue
Block a user