一   
    
    
    
、介绍

uni-app App 端内置了一个基于 weex 改进的原生渲染引擎    
    
    
    ，提供了原生渲染能力    
    
    
    。

在 App 端    


     


     


     


，如果使用 vue 页面




 




 




 




，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)   

   

   

   ，则使用原生渲染    


     


     


     


。一个 App 中可以同时使用两种页面     

     

     

     

，比如首页使用 nvue




  




  




  




，二级页使用 vue 页面
  


  


  


  ，官网 hello uni-app 示例就是如此




 




 




 




。

虽然 nvue 也可以多端编译     
     
     
     
，输出 H5 和小程序 




   




   




   




，但 nvue 的 css 写法受限

 



 



 



 ，所以如果不开发 App                    ，不需要使用 nvue   

   

   

   。

二


     


     


     


    、新建 nvue 页面

在项目下新建 nvue 页面：

不管是 vue 页面还是 nvue 页面  




    




    




    




，都需要在 pages.json 中注册     

     

     

     

。在 HBuilderX 中新建页面是会自动注册




  




  




  




。

如果一个页面路由下同时有 vue 页面和 nvue 页面

















，即出现同名的 vue 和 nvue 文件
  


  


  


  。那么在 App 端                    ，会仅使用 nvue 页面   



     



     



     



，同名的 vue 文件将不会被编译到 App 端     
     
     
     
。而在非 App 端


















，会优先使用 vue 页面 




   




   




   




。

如果不同名    
    
    
    ，只有 nvue 页面    


     


     


     


，则在非 app 端




 




 




 




，只有 uni-app 编译模式的 nvue 文件才会编译

 



 



 



 。

三 




 




 




 


、开发

nvue 页面结构同 vue, 由 template   

   

   

   

、style

     

     

     

   、script 构成                    。

四
  




  




  




  

、nvue 开发与 vue 开发的常见区别

nvue 页面控制显隐只可以使用 v-if 不可以使用 v-show  




    




    




    




。 nvue 页面只能使用 flex 布局   

   

   

   ，不支持其他布局方式

















。页面开发前     

     

     

     

，首先想清楚这个页面的纵向内容有什么




  




  




  




，哪些是要滚动的
  


  


  


  ，然后每个纵向内容的横轴排布有什么     
     
     
     
，按 flex 布局设计好界面                    。 nvue 页面的布局排列方向默认为竖排（column） 




   




   




   




，如需改变布局方向

 



 



 



 ，可以在 manifest.json -> app-plus

-> nvue -> flex-direction 节点下修改                    ，仅在 uni-app 模式下生效   



     



     



     



。 nvue页面编译为 H5  


  


  


  


、小程序时  




    




    




    




，会做一件 css 默认值对齐的工作


















。因为 weex 渲染引擎只支持 flex

















，并且默认 flex 方向是垂直    
    
    
    。而 H5 和小程序端                    ，使用 web 渲染   



     



     



     



，默认不是 flex


















，并且设置 display:flex 后    
    
    
    ，它的 flex 方向默认是水平而不是垂直的    


     


     


     


。所以 nvue 编译为 H5 
     
     
     
  、小程序时    


     


     


     


，会自动把页面默认布局设为 flex

   




   




   




   
、方向为垂直




 




 




 




。当然开发者手动设置后会覆盖默认设置   

   

   

   。 文字内容




 




 




 




，必须 



 



 



 



、只能在

组件下     

     

     

     

。不能在 <div>                  、<view> 的 text 区域里直接写文字




  




  




  




。否则即使渲染了   

   

   

   ，也无法绑定js里的变量
  


  


  


  。

只有text标签可以设置字体大小     

     

     

     

，字体颜色     
     
     
     
。 布局不能使用百分比


    




    




    




    、没有媒体查询 




   




   




   




。 nvue 切换横竖屏时可能导致样式出现问题




  




  




  




，建议有 nvue 的页面锁定手机方向

 



 



 



 。 支持的css有限
  


  


  


  ，不过并不影响布局出你需要的界面     
     
     
     
，flex还是非常强大的                    。 不支持背景图  




    




    




    




。但可以使用image组件和层级来实现类似web中的背景效果

















。因为原生开发本身也没有web这种背景图概念                    。 css选择器支持的比较少 




   




   




   




，只能使用 class 选择器   



     



     



     



。 nvue 的各组件在安卓端默认是透明的

 



 



 



 ，如果不设置background-color                    ，可能会导致出现重影的问题


















。 class 进行绑定时只支持数组语法    
    
    
    。 Android端在一个页面内使用大量圆角边框会造成性能问题  




    




    




    




，尤其是多个角的样式还不一样的话更耗费性能    


     


     


     


。应避免这类使用




 




 




 




。 nvue页面没有bounce回弹效果

















，只有几个列表组件有bounce效果                    ，包括 list



















、recycle-list                  、waterfall   

   

   

   。 原生开发没有页面滚动的概念   



     



     



     



，页面内容高过屏幕高度并不会自动滚动


















，只有部分组件可滚动（list


     



     



     



     、waterfall


















、scroll-view/scroller）    
    
    
    ，要滚的内容需要套在可滚动组件下     

     

     

     

。这不符合前端开发的习惯    


     


     


     


，所以在 nvue 编译为 uni-app模式时




 




 




 




，给页面外层自动套了一个 scroller   

   

   

   ，页面内容过高会自动滚动




  




  




  




。（组件不会套     

     

     

     

，页面有recycle-list时也不会套）
  


  


  


  。后续会提供配置




  




  




  




，可以设置不自动套     
     
     
     
。 在 App.vue 中定义的全局js变量不会在 nvue 页面生效 




   




   




   




。globalData和vuex是生效的

 



 



 



 。 App.vue 中定义的全局 css
  


  


  


  ，对 nvue 和 vue 页面同时生效                    。如果全局 css 中有些 css 在 nvue 下不支持     
     
     
     
，编译时控制台会报警 




   




   




   




，建议把这些不支持的css包裹在条件编译 (opens new window) 里

 



 



 



 ，APP-PLUS-NVUE 不能在 style 中引入字体文件  




    




    




    




。如果是本地字体                    ，可以用plus.io的API转换路径

















。 目前不支持在 nvue 页面使用 typescript/ts                    。 强烈建议在nvue页面使用原生导航栏   



     



     



     



。nvue 的渲染速度再快  




    




    




    




，也没有原生导航栏快


















。原生排版引擎解析json 绘制原生导航栏耗时很少

















，而解析 nvue 的 js 绘制整个页面的耗时要大的多                    ，尤其在新页面进入动画期间   



     



     



     



，对于复杂页面


















，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏    
    
    
    。