2024年Web前端最全跨平台应用开发进阶(四十二)nvue页面设计方案探究(2)，蚂蚁金服二面

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

文章目录

• • 一、前言
    • 二、选择方案
    • • 2.1 CSS注意事项
    • 三、快速上手
    • • 3.1 新建 nvue 页面
        • 3.2 开发 nvue 页面
        • 3.3 调试 nvue 页面
        • 3.4 应用场景
    • 四、拓展阅读

一、前言

在应用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 应用场景

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

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；