weex、nvue、uni-app 和 nvue开发与vue开发的常见区别

古城微笑少年丶 2022-10-31 00:48 18阅读 0赞

**什么是 Weex ？**  
Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。  
“Weex” 的发音是 /wiːks/, 和 “Weeks” 同音  
(支持原生和vue并写，原生渲染，但是组件库不完善，仅支持编写app)

uni-app App端内置 weex 渲染引擎，提供了原生渲染能力。  
uni-app 里根据编译配置不同，可以使用 weex 的组件，也可以使用小程序组件(即uni-app组件)  
nvue 相当于给 weex 补充了大量 uni-app 的组件和api，以及丰富的 Plus API、Native.js、原生插件

**nvue的组件和API写法与vue页面一致，其内置组件还比vue页面内置组件增加了更多。但nvue在css的写法限制较多，具体如下：**

*  nvue的css仅支持flex布局，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
 *  nvue的css，在选择器方面支持的较少，只支持简单的class=“classA”。 class 进行绑定时只支持数组语法。
 *  有些web的css属性在nvue里无法支持，比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念

**纯原生渲染模式**  
uni-app在App端，支持vue页面和nvue页面混搭、互相跳转。也支持纯nvue原生渲染。  
启用纯原生渲染模式，可以减少App端的包体积、减少使用时的内存占用。因为webview渲染模式的相关模块将被移除

**如果不指定该值，默认是不启动纯原生渲染的。**

// manifest.json    
    {    
        // ...    
         /* App平台特有配置 */    
        "app-plus": {    
            "renderer": "native", //App端纯原生渲染模式
        }    
    }

**nvue开发与vue开发的常见区别**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/3d48047b48374f6eba6b1870c778c4b3.png