跨平台应用开发进阶(四十二)vue与nvue页面设计方案探究
文章目录
- 一、前言
- 二、选择方案
- 2.1 CSS注意事项
- 三、快速上手
- 3.1 新建 nvue 页面
- 3.2 开发 nvue 页面
- 3.3 调试 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：
nvue API：仅支持 App 端，uni-app 编译模式也可使用。使用前需先引入对应模块，参考：模块引入 API- uni API
- plus API：仅支持 App 端。
3.3 调试 nvue 页面
HBuilderX 内置了 weex 调试工具的强化版，包括审查界面元素、看 log、debug 打断点，详见。
四、拓展阅读
- nvue原生渲染