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 ); // 服务器返回的数据
        }  
    });  
},  

你可能感兴趣的:(uni-app)