mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
127 lines
2.1 KiB
Markdown
127 lines
2.1 KiB
Markdown
# 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. **兼容性**：注意不同浏览器的兼容性
|