Nvue特性相关 | uView - 多平台快速开发的UI框架

# Nvue特性相关

前言：uView在1.x版本，只有部分组件支持nvue，不推荐在nvue项目中使用，目前uView研发组正在研发2.0版本，将会全面兼容nvue，我们在这里做一个专题，列出一些nvue上的坑，希望能帮助到您。

# Text组件

我们在vue中，可以将文本相关的内容放到view或者text组件，这都是没问题的，但是在nvue中，需要动态响应(双向绑定)的内容，必须放在text标签，如果放在view可以正常显示，但是无法双向绑定。
在nvue中，文本的样式无法继承父元素的颜色(color)，必须具体到给每一个text元素定义类名，在通过指定的类名给赋予颜色值，其他类似出现不能继承父组件的情况，也可参考此做法。
在nvue中，text组件不能换行写内容，否则会出现无法去除的周边空白内容(类似被加上了padding或者margin的效果)，如下：

<!-- nvue中错误写法 -->
<text>
    桃花潭水深千尺
</text>

<!-- nvue中正确写法 -->
<text>不及汪伦送我情</text>

# 事件冒泡

weex事件冒泡相关文档 —— 事件冒泡 (opens new window)

在weex原文中，需要给给页面(组件)根元素设置bubble="true"才能产生事件冒泡机制，但是在uni-app的nvue中，已自动加上类似bubble="true"的操作，无需用户额外干预，自动就会获得事件冒泡的机制。另外，在nvue中，我们可以通过如下方式阻止事件冒泡：

<template>
    <view @tap="parentClick">
        <text @tap="childClick">
    </view>
</template>

<script>
    export default {
        methods: {
            childClick(e) {
                console.log('内部被点击')
                e.stopPropagation()
            },
            parentClick() {
                console.log('父元素将不会捕获冒泡事件')
            }
        }
    }
</script>

# line-height

在nvue中，line-height与字体大小font-size无关，如果赋予数值，单位默认为px，这意味着不可以如下使用：

.box {
    /* vue正常，nvue中会导致行高只有1px */
    line-height: 1;
}

# 样式穿透

在weex(nvue)中有如此描述：在 Weex 里，每一个 Vue 组件的样式都是 scoped (opens new window)，这说明vue中的的/deep/和::v-deep在nvue中都是无效，修改子组件样式只能通过传参进行，而不能进行样式穿透。

# 字体引入不能加引号

nvue下，font-family的字体引入，不能加引号，否则会导致字体图标无法显示，如下：

/* 错误写法 */
font-family: 'uicon-iconfont';

/* 正确写法 */
font-family: uicon-iconfont;

# Nvue不支持全局Mixin，Prototype

在nvue中，不支持在类似main.js中进行全局mixin，如有需要，可以在每一个nvue文件中，独立引入使用，如下：

// main.js中如下写法nvue页面无效
Vue.mixin({...})

// 可以在页面中进行mixin，比如test.nvue中
export default {
    mixins: [...]
}

// 另外，nvue页面中，定义在main.js中的Vue.propertype无效
Vue.propertype.xxx = xxx;

# Scss中的:export无效

在vue中，我们可以通过*.scss中使用:export (opens new window)进行变量导出，供js和css共同使用变量，但是nvue中不支持此写法，请勿使用。

# transition属性不能简写

在vue中，我们可以很方便的简写transition属性，但是nvue中，必须分开写才有效，如下：

weex文档关于transition的描述 (opens new window)

/* 如下写法，vue有效，nvue无效 */
transition: opacity 0.3s ease-in;

/* nvue页面需要拆分成如下写法 */
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease-in;

# box-shadow

据关于weex关于box-shadow文档 (opens new window)描述，weex不支持android上的box-shadow属性，但是经实测，在nvue(uni-app改良后台的weex)上android，是支持的box-shadow属性效果的。

需要说明的是，在IOS上，目前(2020-10-30)不允许将box-shadow值设置为none，否则会出现锐利的高亮白色边框，由于nvue支持rgba透明度，我们可以通过如下方式实现类似none的效果：

.box {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)
}

# border-radius

在weex文档中有明确的说明 (opens new window)，border-radius支持简写形式，但是在nvue的android端，border-radius必须分开写才有效，如下：

/* nvue下，安卓不支持此写法 */
.box {
    border-radius: 10px;
}

/* 必须如下写法才能兼容 */
.box {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

# 关于<template/> 和 <block/>

以下文字取自uni-app文档原文，点此查看 (opens new window)：

`<template/>` 和 `<block/>` 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。  
`<block/>` 在不同的平台表现存在一定差异，推荐统一使用 `<template/>`。

上面说，二者不会在页面做任何的渲染，但是在nvue中，<block/>确确实实被渲染成为一个<block/>元素，由于nvue默认flex布局，且为 column竖向布局，这可能会导致<block/>标签下存在多个其他元素时，这些元素会竖向排列，您不得不额外对<block/>元素设置样式，所以我们建议只要是nvue的场景，一律使用<template/>而不是<block/> 标签

← 注意事项更新日志 →