创建 nVue 页面

新建 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 文件才会编译。

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

index.nvue:

						
<template>
  <view>

  </view>
</template>

<script>

</script>

<style>

</style>
						
					
  • template 模板写法、数据绑定同 vue。组件支持2种模式:
    • weex 组件,同 weex 写法。
    • uni-app 组件,同 uni-app 写法。
    • App 端 nvue 专用组件。
  • style 由于采用原生渲染,并非所有浏览器的 css 均支持,布局模型只支持 flex 布局,虽然不会造成某些界面布局无法实现,但写法要注意。
  • script 写法同 vue,并支持3种API:
    • nvue API:仅支持 App 端,uni-app 编译模式也可使用。使用前需先引入对应模块。
    • uni API。
    • plus API:仅支持App端。

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

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

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

  • nvue 页面控制显隐只可以使用 v-if 不可以使用 v-show。
  • nvue 页面只能使用 flex 布局,不支持其他布局方式。页面开发前,首先想清楚这个页面的纵向内容有什么,哪些是要滚动的,然后每个纵向内容的横轴排布有什么,按 flex 布局设计好界面。
  • nvue 页面的布局排列方向默认为竖排(column),如需改变布局方向,可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改,仅在 uni-app 模式下生效。