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,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. **替代方案**:考虑使用其他图表方案或条件编译
|
||||
Reference in New Issue
Block a user