创新互联UNI-APP教程：uni-app使用Weex/nvue的注意事项

一般情况建议使用uni-app模式，除非历史weex代码较多，需要逐步过渡。同时注意weex编译模式的切换是项目级的，不支持同项目下某个nvue页面使用weex模式，另一个nvue页面使用uni-app模式。

在 manifest.json 中修改2种编译模式，manifest.json -> app-plus -> nvueCompiler 切换编译模式。

nvueCompiler 有两个值：

• weex
• uni-app

// manifest.json    
{    
    // ...    
     /* App平台特有配置 */    
    "app-plus": {    
        "nvueCompiler":"uni-app" //是否启用 uni-app 模式  
    }    
}

如果没有在manifest里明确配置，默认是weex模式。这是为了向下兼容。

weex 编译模式不支持 onNavigationBarButtonTap 生命周期函数的写法。在 nvue 中监听原生标题栏按钮点击事件，详见：uni.onNavigationBarButtonTap。

weex编译模式不支持onShow生命周期，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果。

weex 编译模式不支持vuex。

nvue 的页面跳转，与 weex 不同，仍然遵循 uni-app 的路由模型。vue 页面和 nvue 页面之间不管怎么跳转，都遵循这个模型。包括 nvue 页面跳向 nvue 页面。每个页面都需要在 pages.json 中注册，调用 uni-app 的 路由 API 进行跳转。

原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（list、waterfall、scroll-view/scroller），要滚得内容需要套在可滚动组件下。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 scroller，页面内容过高会自动滚动。（组件不会套，页面有recycle-list时也不会套）。 可以设置不自动套。

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

weex 编译模式下支持使用 weex ui ，例子见：https://ext.dcloud.net.cn/plugin?id=442。但相比uni-app插件市场及官方uni ui而言，weex语法的组件生态还是比较欠缺的。

快速上手

1. 新建 nvue 页面

在HBuilderX的 uni-app 项目中，新建页面，弹出界面右上角可以选择是建立vue页面还是nvue页面，或者2个同时建。

不管是vue页面还是nvue页面，都需要在pages.json中注册。如果在HBuilderX中新建页面是会自动注册的，如果使用其他编辑器，则需要自行在pages.json里注册。

如果一个页面路由下同时有vue页面和nvue页面，即出现同名的vue和nvue文件。那么在App端，会仅使用nvue页面，同名的vue文件将不会被编译到App端。而在非App端，会优先使用vue页面。

如果不同名，只有nvue页面，则在非app端，只有uni-app编译模式的nvue文件才会编译。

2. 开发 nvue 页面

nvue 页面结构同 vue, 由 template、style、script 构成。

• template： 模板写法、数据绑定同 vue。组件支持2种模式，1、 weex 组件，同weex写法，参考：weex 内置组件；2、uni-app组件，同uni-app写法。
• style：由于采用原生渲染，并非所有浏览器的 css 均支持，布局模型只支持 flex 布局，虽然不会造成某些界面布局无法实现，但写法要注意。详见：weex 样式
• script：写法同 vue，并支持3种API：weex API ：仅支持App端，uni-app编译模式也可使用。使用前需先引入对应模块，参考：weex 模块引入uni API：https://uniapp.dcloud.io/api/READMEplus API：仅支持App端。http://www.html5plus.org/doc/h5p.html

3. 调试 nvue 页面

HBuilderX内置了weex调试工具的强化版，包括审查界面元素、看log、debug打断点，详见

nvue 和 vue 相互通讯

在 uni-app 中，nvue 和 vue 页面可以混搭使用。

推荐使用uni.$on,uni.$emit的方式进行页面通讯，旧的通讯方式（uni.postMessage及plus.webview.postMessageToUniNView）不再推荐使用。

通讯实现方式

// 接收信息的页面
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    console.log('标题：' + data.title)
    console.log('内容：' + data.content)
})  

// 发送信息的页面
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是title',  
    content: '我是content'  
});

使用此页面通讯时注意事项：要在页面卸载前，使用 uni.$off 移除事件监听器。参考

nvue 向 vue 通讯（已过期，推荐使用上面的uni.$on、uni.$emit）

步骤：

1. 在 nvue 使用 uni.postMessage(data) 发送数据通讯，data 为 JSON 格式（键值对的值仅支持String）。
2. 在 App.vue 里使用 onUniNViewMessage 进行监听。

代码示例:

//test.nvue

//App.vue

vue 向 nvue 通讯（已过期，推荐使用上面的uni.$on、uni.$emit）

步骤：

1. 在 vue 里使用 plus.webview.postMessageToUniNView(data,nvueId) 发送消息，data 为 JSON 格式（键值对的值仅支持String），nvueId 为 nvue 所在 webview 的 id，webview的 id 获取方式参考：$getAppWebview()。
2. 在 nvue 里引用 globalEvent 模块监听 plusMessage 事件，如下：

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

代码示例：

//index.nvue

vue 和 nvue 共享的变量和数据

除了通信事件，vue 和 nvue 页面之间还可以共享变量和存储。 uni-app提供的共享变量和数据的方案如下：

1. vuex:

自HBuilderX 2.2.5起，nvue支持vuex。这是vue官方的状态管理工具。

注意：

• 不支持直接引入store使用，可以使用mapState、mapGetters、mapMutations等辅助方法或者使用this.$store

2. uni.storage:

vue和nvue页面可以使用相同的uni.storage存储。这个存储是持久化的。 比如登陆状态可以保存在这里。

App端还支持plus.sqlite，也是共享通用的。

3. globalData:

小程序有globalData机制，这套机制在uni-app里也可以使用，全端通用。 在App.vue文件里定义globalData，如下：

js中操作globalData的方式如下： getApp().globalData.text = 'test'

如果需要把globalData的数据绑定到页面上，可在页面的onShow声明周期里进行变量重赋值。

nvue 里使用 BindingX

uni-app是逻辑层和视图层分离的。此时会产生两层通信成本。比如拖动视图层的元素，如果在逻辑层不停接收事件，因为通信损耗会产生不顺滑的体验。

BindingX是weex提供的一种预描述交互语法。由原生解析BindingX规则，按此规则处理视图层的交互和动效。不再实时去js逻辑层运行和通信。

BindingX类似一种强化版的css，运行性能高，但没有js那样足够强的编程灵活性。

uni-app 内置了 BindingX，可在 nvue 中使用 BindingX 完成复杂的动画效果。

• 从HBuilderX 2.3.4起，uni-app 编译模式可直接引用uni.requireNativePlugin('bindingx')模块，weex 模式还需使用 npm 方式引用。
• BindingX demo示例可参考 BindingX 示例 里 vue 的相关示例，将实验田里的 vue 代码拷贝到 nvue 文件里即可。

代码示例

注意

• 暂时不要在expression内使用origin

nvue 里使用 HTML5Plus API

• nvue页面可直接使用plus的API，并且不需要等待plus ready。

nvue 里不支持的 uni-app API

nvue 支持大部分 uni-app API ，下面只列举目前还不支持的 API 。

动画

滚动

绘画

canvas API使用，详见canvas文档。

节点布局交互

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

基于原生引擎的渲染，虽然还是前端技术栈，但和web开发肯定是有区别的。

• nvue 页面只能使用 flex 布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。
• 原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（list、waterfall、scroll-view/scroller），要滚得内容需要套在可滚动组件下。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 scroller，页面内容过高会自动滚动。（组件不会套，页面有recycle-list时也不会套）。后续会提供配置，可以设置不自动套。
• 文字内容，必须、只能在组件下。不能在
  、的text区域里直接写文字。否则即使渲染了，也无法绑定js里的变量。
• 只有text标签可以设置字体大小，字体颜色。
• 布局不能使用百分比、没有媒体查询。
• nvue 切换横竖屏时可能导致样式出现问题，建议有 nvue 的页面锁定手机方向。
• 支持的css有限，不过并不影响布局出你需要的界面，flex还是非常强大的。详见
• 不支持背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
• css选择器支持的比较少，只能使用 class 选择器。详见weex的样式文档
• class 进行绑定时只支持数组语法。
• nvue页面没有bounce回弹效果，只有几个列表组件有bounce效果，包括 list、recycle-list、waterfall。
• Android端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用。
• nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题。
• 在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalData和vuex是生效的。
• App.vue 中定义的全局css，对nvue和vue页面同时生效。如果全局css中有些css在nvue下不支持，编译时控制台会报警，建议把这些不支持的css包裹在条件编译里，APP-PLUS-NVUE
• 不能在 style 中引入字体文件，nvue 中字体图标的使用参考：weex 加载自定义字体。如果是本地字体，可以用plus.io的API转换路径。
• 目前不支持在 nvue 页面使用 typescript/ts。
• nvue 页面关闭原生导航栏时，想要模拟状态栏，可以参考：https://ask.dcloud.net.cn/article/35111。但是，仍然强烈建议在nvue页面使用原生导航栏。nvue的渲染速度再快，也没有原生导航栏快。原生排版引擎解析json绘制原生导航栏耗时很少，而解析nvue的js绘制整个页面的耗时要大的多，尤其在新页面进入动画期间，对于复杂页面，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。
• 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、方向为垂直。当然开发者手动设置后会覆盖默认设置。

下面有些正确和错误的写法示例对比：

• 选择器仅支持class 选择器 ```css

/ 错误 /

#id {} .a .b .c {} .a > .b {}

/ 正确 / .class {}

- border 不支持简写

```css

/* 错误 */
.class {
    border: 1px red solid;
}

/* 正确 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

• background 不支持简写

/* 错误 */
.class {
    background: red;
}

/* 正确 */
.class {
    background-color: red;
}

• nvue的uni-app编译模式下，App.vue 中的样式，会编译到每个 nvue文件。对于共享样式，如果有不合法属性控制台会给出警告，可以通过条件编译APP-PLUS-NVUE屏蔽 App 中的警告。 ``css /* 错误 */ /* 控制台警告： WARNING:borderis not a standard property name (may not be supported) WARNING:-webkit-transform` is not a standard property name (may not be supported) */ .class { border: 1px red solid; -webkit-transform: scaleY(.5); }

/ 正确 / .class { border-width: 1px; border-style: solid; border-color: red; / #ifndef APP-PLUS-NVUE / -webkit-transform: scaleY(.5); / #endif/ }

## Android平台阴影(box-shadow)问题

Android平台weex对阴影样式(`box-shadow`)支持不完善，如设置圆角边框时阴影样式显示不正常、设置动画时在`Android7`上显示不正常等。为解决这些问题，从HBuilderX 2.4.7起，新增`elevation`属性（组件的属性，不是css样式）设置组件的层级，`Number`类型，层级值越大阴影越明显，阴影效果也与组件位置有关，越靠近页面底部阴影效果越明显

**用法**

```html

注意

• 为了避免elevation属性的阴影效果与阴影样式(box-shadow)冲突，设置elevation属性后box-shadow样式失效
• 使用elevation需要阴影元素的父元素大于阴影范围，否则会对阴影进行裁剪

本文题目：创新互联UNI-APP教程：uni-app使用Weex/nvue的注意事项
分享路径：http://www.shufengxianlan.com/qtweb/news12/24212.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联