前言:使用uni-app有一段时间了,一直处于需要时才去对应搜索的阶段,最近想提高代码开发效率,准备梳理、重构一下脑袋中的知识体系。
关于版本与框架
目前uView尚未支持VUE3.0版本(nvue也尚未支持VUE3.0)
如何查看uview2版本?
代码中添加后查看
console.log(uni.$u.config.v)
如何升级更新uview2?
版本升级 · uView-UI v2.x常见问题整理 · 看云 (kancloud.cn)
npm update uview-ui
uni-app的工程文件目录
使用uniapp要注意的一些变化
组件/标签的变化
以前是html标签,比如<div>
,现在是小程序组件,比如<view>
。 那么标签
和组件
有什么区别,不都是用尖括号包围起来一段英文吗? 其实标签是老的概念,标签属于浏览器内置的东西。但组件,是可以自由扩展的。 类似你可以把一段js封装成函数或模块,你也可以把一个ui控件封装成一个组件。
uni-app
参考小程序规范,提供了一批内置组件。
下为html标签和uni-app内置组件的映射表:
- div 改成 view(opens new window)
- span、font 改成 text(opens new window)
- a 改成 navigator(opens new window)
- img 改成 image(opens new window)
- input (opens new window)仅仅是输入框。 原html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:radio组件 (opens new window)、checkbox组件 (opens new window)、时间选择 (opens new window)、日期选择 (opens new window)、图片选择 (opens new window)、视频选择 (opens new window)、多媒体文件选择(含图片视频) (opens new window)、通用文件选择 (opens new window)。
- form (opens new window)、button (opens new window)、label (opens new window)、textarea (opens new window)、canvas (opens new window)、video (opens new window)这些还在。
- select 改成 picker(opens new window)
- iframe 改成 web-view(opens new window)
- ul、li没有了,都用view替代。做列表一般使用uList组件(opens new window)
- audio 不再推荐使用,改成api方式,背景音频api文档 (opens new window)其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签,比如把div编译成view。但不推荐这种用法,调试H5端时容易混乱。
除了改动外,新增了一批手机端常用的新组件
-
scroll-view 可区域滚动视图容器(opens new window)
-
swiper 可滑动区域视图容器(opens new window)
-
icon 图标(opens new window)
-
progress 进度条(opens new window)
-
slider 滑块指示器(opens new window)
-
switch 开关选择器(opens new window)
-
camera 相机(opens new window)
-
live-player 直播(opens new window)
-
cover-view 可覆盖原生组件的视图容器(opens new window)
cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,则需要使用cover-view组件。详见层级介绍(opens new window)
除了内置组件,还有很多开源的扩展组件,把常用操作都进行封装,DCloud建立了插件市场收录这些扩展组件,详见插件市场
-
js api的变化
因为uni-app的api是参考小程序的,所以和浏览器的js api有很多不同,如
- alert,confirm 改成 uni.showmodel(opens new window)
- ajax 改成 uni.request(opens new window)
- cookie、session 没有了,local.storage 改成 uni.storage
uniapp中的布局及样式注意点
布局:flex布局Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
容器属性:
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 项目属性:
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。
该属性有两个快捷值:
auto (1 1 auto) ,撑满剩余空间,空间不足时缩小
none (0 0 auto),空间不足时不缩小,同轴其他项目缩小
uniapp,vh和vw是可以使用的,需要让某个元素高度铺满整个屏幕时,可以设置高度为100vh。
一般情况下,推荐字体和宽高等,都使用rpx
单位,如果需要固定尺寸,使用px
。
uView的顶部和底部安全区适配
安全区适配 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)
// 使用特定组件占位,它会自动判断机型,给元素加上一个适当底部内边距
<u-status-bar></u-status-bar> // 顶部安全区适配
<u-safe-bottom></u-safe-bottom> // 底部安全区适配
uView中,一些组件如u-popup、u-keyboard组件等,提供了一个safeAreaInsetBottom参数(布尔类型),如果设置为true,就会在组件内部对安全区进行适配, 从而避免安全区指示条引起的问题 。
uView u-tag和u-button组件宽度受特效样式影响
解决方式:给组件u-tag和u-button外部增加view容器设置宽度样式,或者外框增加width: fit-content;属性,进行自适应。