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

Posted No Silver Bullet

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨平台应用开发进阶(四十二)vue与nvue页面设计方案探究相关的知识,希望对你有一定的参考价值。

文章目录

一、前言

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

二、选择方案

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

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

注意⚠️:

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

2.1 CSS注意事项

  • nvuecss仅支持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 页面,即出现同名的 vuenvue 文件。那么在 App 端,会仅使用 nvue 页面,同名的 vue 文件将不会被编译到 App 端。而在非 App 端,会优先使用 vue 页面。

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

3.2 开发 nvue 页面

nvue 页面结构同 vue, 由 templatestylescript 构成。

  • 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 打断点,详见

四、拓展阅读

以上是关于跨平台应用开发进阶(四十二)vue与nvue页面设计方案探究的主要内容,如果未能解决你的问题,请参考以下文章

Vue教程(四十二)路由懒加载

VUE开发--Excel组件(四十二)

跨平台应用开发进阶(四十九)由环境切换引发的页面通讯机制思考

跨平台应用开发进阶(四十九)由环境切换引发的页面通讯机制思考

跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案

跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案