一、 为什么要使用nvue
小程序和App的vue页面,主体是webview渲染的。为了提升性能,小程序和App的vue页面下部分ui元素,比如导航栏、tabbar、video、map使用了原生控件(详见: 原生组件使用说明)。这种方式被称为混合渲染。虽然提升了性能,但原生组件带来了其他问题:
- 前端组件无法覆盖原生控件的层级问题。
- 原生组件不能嵌入特殊前端组件(如scroll-view,swiper)。
- 原生控件无法灵活自定义。
- 无法对原生组件设置 CSS 动画
- 无法定义原生组件为 position: fixed;
- 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。
为了解决webview渲染中原生组件层级最高的限制,uni-app提供了 cover-view 和 cover-image 组件,让其覆盖在原生组件上。App端还提供了2种方案:plus.nativeObj.view、subNVue。此外app-nvue 不涉及层级问题,天然所有组件都是同层渲染。因此有如下方法解决层级覆盖问题:
- cover-view:只能覆盖原生组件,不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map,但无法覆盖原生导航栏、tabbar、web-view。
- plus.nativeObj.view:简称nview,它是一个原生的类画布的控件,其实cover-view也是用plus.nativeObj.view封装的。详见: API文档, 它的api很底层,开发比较复杂;不支持动画;不支持内部滚动。
- subNVue:subNVue是把weex渲染的原生子窗体,覆盖在vue页面上,它解决了plus.nativeObj.view的所有不足,提供了最强大的层级问题解决方案。详见: uni-app subNVue 原生子窗体开发指南
二、nvue不同编译模式介绍
三、nvue页面编译模式差异
四、开发nvue页面
1. 组件标签
- weex编译模式下: 详见weex内置组件
2. css样式
- 只能使用类选择器,并且不能组合嵌套
- 只能使用flex布局,默认全部容器均为 display: flex; flex-direction: column;
- weex编译模式下:使用px单位; uni-app编译模式下:使用upx单位
五、vue与nvue页面通信( 见:原生子窗体开发指南 和 页面通讯指南)
六、nvue发送网络请求
注意: 不能使用FlyIO,仅仅能使用自带的 uni.request 方法
created() {
uni.request({
url: '接口地址', //仅为示例,并非真实接口地址。
method:"GET",
success: function(res) {
console.log( res ); // 服务器返回的数据
}
});
},