一   
    
    
 、介绍

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 绘制整个页面的耗时要大的多               ，尤其在新页面进入动画期间   



     



     



  ，对于复杂页面













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