vue与nvue页面设计方案探究

举报
SHQ5785 发表于 2023/04/01 10:33:33 2023/04/01
【摘要】 一、前言在应用uni-app跨平台设计方案进行app开发过程中,uni-app官网支持两种页面设计方案:vue与nvue,不少同学在应用过程中,会搞不清楚两者的区别,而不知如何选择,甚至可能产生错误的应用方式。 二、选择方案uni-app App 端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力。在 App 端,如果使用 vue 页面,则使用 webview 渲染;如果使...

一、前言

在应用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 打断点,详见

四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。