跨平台应用开发进阶(四十二)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原生渲染
跨平台应用开发进阶(四十二)vue与nvue页面设计方案探究相关推荐
- 跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案
文章目录 一.前言 二.优化建议 三.实施方案 3.1 优化项目结构,减小项目组包体积 3.2 去除项目冗余字体文件 3.2.1 字体筛选 3.2.2 字体压缩 3.3 gzip压缩 3.4 ETag ...
- 跨平台应用开发进阶(四十五)uni-app集成企微客服实战
文章目录 一.前言 二.功能实现 2.1 环境准备 2.2 代码层面 2.3 拓展工具 三.拓展阅读 一.前言 应用运营过程中,考虑接入企业微信客服功能,大致看了下官方接入文档,并不困难,引入代码量也 ...
- 跨平台应用开发进阶(四十三)一文走近网络层抓包工具:WhireShark
文章目录 一.前言 二.条件过滤 三.字段含义 四.TCP连接 4.1 三次握手示例 五.色彩规则 六.分析方法 6.1 Packet size limited during capture 6.2 ...
- 跨平台应用开发进阶(三十):uni-app 实现集成火山视频直播服务
文章目录 一.前言 二.技术实现 2.1 web-view组件在app中的窗体关系和plus.webview操作方式 三.双向通信 3.1 uni-app与内嵌网页通信 3.2 内嵌网页向uni-ap ...
- 跨平台应用开发进阶(四十一)使用Xcode打包 iOS 应用 archive 时四种证书的区别详解
文章目录 一.archive 四种模式 二.相同点 三.安装方式区别 四.iOS开发者账号(企业版)申请攻略 4.1 苹果开发者账号类型 4.2 企业版开发者账号的优势是什么? 4.3 企业版开发者账 ...
- 跨平台应用开发进阶(三十八)uni-app前端监控方案:基调听云APP探究
文章目录 一.前言 二.产品介绍 2.1 工作原理 2.1.1 Android平台工作原理 2.1.2 iOS平台工作原理 三.项目集成 3.1 Android集成 3.2 iOS集成 四.答疑解惑 ...
- 【Visual C++】游戏开发笔记四十二 浅墨DirectX教程之十 游戏输入控制利器 DirectInput专场
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...
- 【Visual C++】游戏开发笔记四十二 浅墨DirectX教程之十 游戏输入控制利器:DirectInput专场...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/zhmxy555/article/details/8547531 作者:毛星云(浅墨) ...
- 【Visual C++】游戏开发笔记四十二 浅墨DirectX教程之十 游戏输入控制利器:DirectInput专场
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8547531 作者:毛星云(浅墨 ...
最新文章
- 实战SSM_O2O商铺_14【商铺注册】View层之验证码kaptcha组件
- Docker技术实践——中级篇
- coreldraw错误代码14001_CorelDRAW文件损坏的几种解决方法
- C语言——猴子吃桃问题
- angularJS开发碰到的问题
- python 数学计算库_Python标准库——数学运算
- python二维向量运算_python中二维数组的Elementwise与or或运算
- python学习笔记(xlsxwriter模块使用)
- Otter CTF (取证专项赛)WP兼volatility取证工具运用技巧
- js给页面添加随机像素噪声背景
- 2021版小新Pro14 Ubuntu 20.04 配置指南
- python猴子偷桃问题_java猴子偷桃问题
- Easy Connect 当前IE代理启用了自动配置脚本,不允许使用CS客户端登录
- win2003 R2 SP2 x64 可用密钥
- Photo Shop教程(adobe的官方入门视频)
- 成长型思维和固定型思维
- elasticsearch5.0.0中的percolator类型和percolate查询
- 读书笔记之——《谷歌和亚马逊如何做产品》
- 计算机在旅游方面的应用,浅谈旅游专业在《计算机应用基础》设计中的思考
- 适配器模式 : 农村小伙娶乌克兰美女语言不通 翻译软件立功