跨平台应用开发进阶(四十二)nvue页面设计方案探究

一、前言

在应用uni-app跨平台技术栈进行app开发过程中，uni-app官网支持两种页面设计方案：vue与nvue，不少同学在应用过程中，会搞不清楚两者的区别，而不知如何选择，甚至可能产生错误的应用方式。

二、选择方案

uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染 。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面。

注意⚠️：

• 虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果你不开发 App，那么不需要使用 nvue。
• nvue 页面控制显隐只可以使用v-if不可以使用v-show。

2.1 CSS注意事项

• nvue的css仅支持flex布局，是webview css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然，flex足以排布出各种页面，只是写法需要适应。有关APP中flex布局用法详参《ReactNative进阶（四十四）：Mobile App 适配性优化》《Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局》。

• 注意⚠️：文档中未说明的 flexbox 属性均不支持：如 order、flex-grow 、flex-shrink 、 flex-basis、align-content、align-self 等。在 nvue中，Flexbox 是默认且唯一的布局模型，所以不需要手动为元素添加 display: flex; 属性。

• class 进行绑定时只支持数组语法。

• 不支持媒体查询；

• 不能在 style 中引入字体文件；

• 不能使用百分比布局，如width：100%;

• 不支持在css里写背景图background-image，但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念。

• 使用image标签，支持使用base64，不支持svg格式图片。

• nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题；

• 文字内容，必须只能在text组件下，text组件不能换行写内容，否则会出现无法去除的周边空白；

• 只有text标签可以设置字体大小，字体颜色。

三、快速上手

3.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 文件才会编译。

3.2 开发 nvue 页面

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

• template： 模板写法、数据绑定同 vue。
• style ：由于采用原生渲染，并非所有浏览器的 css 均支持，布局模型只支持 flex 布局，虽然不会造成某些界面布局无法实现，但写法要注意。详见：样式
• script：写法同 vue，并支持 3 种 API：

1. nvue API ：仅支持 App 端，uni-app 编译模式也可使用。使用前需先引入对应模块，参考：模块引入 API
2. uni API
3. plus API：仅支持 App 端。

3.3 调试 nvue 页面

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

3.4 应用场景

在平时开发过程中，经常会遇到各种层级覆盖和原生界面自定义的问题：

• 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。
• 弹出层内部元素可滚动,
• 在地图、视频等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录。

通过webview嵌套H5时，若需要在APP实现弹窗效果，考虑到页面层级问题。此时，可通过subNvue实现。

subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体。

通过获取subNVue实例的方式来设置子窗体样式。

1. 通过 id 获取 nvue 子窗体

   const subNVue = uni.getSubNVueById('设置的id')  

2. 打开 nvue 子窗体

   // 第一个参数子窗体动画效果
   // 第二个参数持续时间
   // 第三个参数修改样式函数
   subNVue.show('slide-in-left', 300, () => {
   	// 修改子窗体样式，同pages.json的style配置
   	subNvue.setStyle({
   		top: '0',
   		right: '0',
   		width: '100%',
   		height: '20px'
   	});
   });

3. 关闭 nvue 子窗体

   subNVue.hide('fade-out', 300)

通过以下方式设置子窗体样式:

	subNVue.setStyle({  
	    top: '100px',  
	    left: '20px',  
	    width: '100px',  
	    height = '50px',  
	})

四、拓展阅读

• nvue原生渲染
• subNvue官方文档