mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
92 lines
1.5 KiB
Markdown
92 lines
1.5 KiB
Markdown
# 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. **替代方案**：考虑使用其他图表方案或条件编译
|