uni-app进阶之Weex/nvu

Weex/nvue

Nvue CSS只支持flex layout，这是WebView CSS语法的子集。这是因为操作系统本机布局不支持flex以外的web布局。当然，flex足以安排各种页面，但需要调整写作方法。
Nvue CSS只支持简单的类，对选择器的支持较少。
类仅在绑定时支持数组语法。
nvue中不支持某些web CSS属性，例如背景图像。但是，可以使用图像组件和层次结构来实现类似于web中的背景效果。因为本地开发中没有web这样的背景地图概念

纯原生渲染模式

在应用程序方面，uni app支持混合Vue页面和nvue页面，并支持相互跳转。还支持纯nvue本机渲染。
启用纯本机渲染模式可以减少应用程序端的包体积并减少内存使用。因为WebView渲染模式的相关模块将被删除。
在JSON源代码视图的“app plus”下的manifest配置“renderer”：“native”，这意味着在应用程序端启用纯本机渲染模式。页面JSON注册的Vue页面将被忽略，Vue组件也将由本机呈现引擎呈现。
如果未指定此值，则默认情况下不会启动纯本机渲染。

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

	weex编译模式	uni-app编译模式
平台	仅App	所有端，包含小程序和H5
组件	weex组件如div	uni-app组件如view
生命周期	只支持weex生命周期	支持所有uni-app生命周期
JS API	weex API、uni API、Plus API	weex API、uni API、Plus API
单位	750px是屏幕宽度，wx是固定像素单位	750rpx是屏幕宽度，px是固定像素单位
全局样式	手动引入	app.vue的样式即为全局样式
页面滚动	必须给页面套或组件	默认支持页面滚动

页面滚动

本机开发没有页面滚动的概念。页面内容高于屏幕高度时不会自动滚动。只有一些组件可以滚动（列表、瀑布、滚动视图/滚动器）。要滚动内容，需要在可滚动组件下进行设置。这不符合前端开发的习惯。因此，当nvue编译为uni app模式时，会自动为页面的外层设置一个滚动条。如果页面内容过高，它将自动滚动。（组件不会嵌套，带有回收列表的页面也不会嵌套）。您可以设置为不自动设置。

{  "path": "",  "style": {    "disableScroll": true // 不嵌套 scroller  }}

<template>    <div @click="test">        <text>点击页面发送数据</text>    </div></template><script>    export default {        methods: {            test(e) {                uni.postMessage({test: "数据",value:"数据"});            }        }    }</script>

在Vue webview中使用plus。Postmessagetouninview（数据，nvueid）发送消息。数据为JSON格式（键值对的值仅支持字符串），nvueid是nvue所在的WebView的ID，WebView的ID获取方法参考：$getappwebview（）。
参考nvue中的globalevent模块以侦听plusmessage事件，如下所示：

const globalEvent = weex.requireModule('globalEvent');globalEvent.addEventListener("plusMessage", e => {  console.log(e.data);//得到数据});