uni-app之nvue的使用详解

一、 为什么要使用nvue

小程序和App的vue页面，主体是webview渲染的。为了提升性能，小程序和App的vue页面下部分ui元素，比如导航栏、tabbar、video、map使用了原生控件（详见: 原生组件使用说明）。这种方式被称为混合渲染。虽然提升了性能，但原生组件带来了其他问题：

1. 前端组件无法覆盖原生控件的层级问题。
2. 原生组件不能嵌入特殊前端组件(如scroll-view，swiper)。
3. 原生控件无法灵活自定义。
4. 无法对原生组件设置 CSS 动画
5. 无法定义原生组件为 position: fixed；
6. 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域。

为了解决webview渲染中原生组件层级最高的限制，uni-app提供了 cover-view 和 cover-image 组件，让其覆盖在原生组件上。App端还提供了2种方案：plus.nativeObj.view、subNVue。此外app-nvue 不涉及层级问题，天然所有组件都是同层渲染。因此有如下方法解决层级覆盖问题:

1. cover-view：只能覆盖原生组件，不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map，但无法覆盖原生导航栏、tabbar、web-view。
2. plus.nativeObj.view：简称nview，它是一个原生的类画布的控件，其实cover-view也是用plus.nativeObj.view封装的。详见: API文档， 它的api很底层，开发比较复杂；不支持动画；不支持内部滚动。
3. subNVue：subNVue是把weex渲染的原生子窗体，覆盖在vue页面上，它解决了plus.nativeObj.view的所有不足，提供了最强大的层级问题解决方案。详见: uni-app subNVue 原生子窗体开发指南

二、nvue不同编译模式介绍

三、nvue页面编译模式差异

四、开发nvue页面

1. 组件标签

1. weex编译模式下： 详见weex内置组件

2. css样式

1. 只能使用类选择器，并且不能组合嵌套
2. 只能使用flex布局，默认全部容器均为 display: flex; flex-direction: column;
3. weex编译模式下：使用px单位; uni-app编译模式下：使用upx单位

五、vue与nvue页面通信( 见:原生子窗体开发指南 和 页面通讯指南)

六、nvue发送网络请求

注意： 不能使用FlyIO，仅仅能使用自带的 uni.request 方法

created() {
       
    uni.request({
       
        url: '接口地址', //仅为示例，并非真实接口地址。  
        method:"GET",  
        success: function(res) {
       
            console.log( res ); // 服务器返回的数据
        }  
    });  
},