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端纯原生渲染模式    }    }

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

页面滚动

本机开发没有页面滚动的概念。页面内容高于屏幕高度时不会自动滚动。只有一些组件可以滚动（列表、瀑布、滚动视图/滚动器）。要滚动内容，需要在可滚动组件下进行设置。这不符合前端开发的习惯。因此，当 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);//得到数据});