最近在看uni-app相关的内容,感觉有必须要记录一下。
1、什么是uni-app?
uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
即使不跨端,uni-app
同时也是更好的小程序开发框架。因为uni-app可以用nvue开发,更加快捷的开发小程序。
只要具备vue相关的开发经验,如果是有小程序开发的经验,那就更好,因为语法基本上是小程序的那一套。
2、环境的搭建
有两种搭建的方式:通过可视化界面、vue-cli命令行两种方式快速创建项目。
方式一:HBuilderX内置相关环境
可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
- HBuilderX:官方IDE下载地址
- HBuilderX是通用的前端开发工具,但为
uni-app
做了特别强化。
Hbuilder创建uni-app
在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N
):
方式二:直接用vue 的cli进行创建
3、项目目录
一个uni-app工程,默认包含如下目录及文件:
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录,详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ └─android Android原生资源目录 详见
├─hybrid App端存放本地html文件的目录,详见
├─wxcomponents 存放小程序组件的目录,详见
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
└─uni.scss 这里是uni-app内置的常用样式变量
unicloud是线上存储的数据空间。
static是存放静态页面的。
- 编译到任意平台时,
static
目录下除不满足条件编译的文件,会直接复制到最终的打包目录,不会打包编译。非static
目录下的文件(vue、js、css 等)只有被引用时,才会被打包编译。 css
、less/scss
等资源不要放在static
目录下,建议这些公用的资源放在自建的common
目录下。- static一般用来存储大图片、视频、音频等一些不需要处理的资料。
4、基本语言和开发规范
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
- 页面文件遵循 Vue 单文件组件 (SFC) 规范,即每个页面是一个.vue文件
- 组件标签靠近小程序规范,详见uni-app 组件规范
- 接口能力(JS API)靠近小程序规范,但需将前缀 wx、my 等替换为 uni,详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
- 如需兼容app-nvue平台,建议使用flex布局进行开发
要想开发出能够适配不同端的产品,就一定要结合编译器和runtime来进行不同端代码的编译。
uni-app分编译器
和运行时(runtime)
。uni-app能实现一套代码、多端运行,是通过这2部分配合完成的。
编译器将开发者的代码进行编译,编译的输出物由各个终端的runtime进行解析,每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime。
有了这些规范我们就可以轻松的开发一个uni-app项目。
5、页面配置
uni-app项目中,一个页面就是一个符合Vue SFC规范
的.vue
文件或.nvue
文件。
.vue
页面和.nvue
页面,均全平台支持,差异在于当uni-app发行到App平台时,.vue
文件会使用webview进行渲染,.nvue
会使用原生进行渲染。
一般来说,如果是web端,那么就用vue,如果是小程序和app端,可以直接用nvue进行开发。
首先,新建页面
uni-app
中的页面,通常会保存在工程根目录下的pages
目录下。
每次新建页面,均需在pages.json
中配置pages
列表;未在pages.json -> pages
中配置的页面,uni-app
会在编译阶段进行忽略。
通过HBuilderX开发 uni-app
项目时,在 uni-app
项目上右键“新建页面”,HBuilderX会自动在pages.json
中完成页面注册,开发更方便。
同时,HBuilderX 还内置了常用的页面模板(如图文列表、商品列表等),选择这些模板,可以大幅提升你的开发效率。
然后,删除页面
删除页面时,需做两件工作(这个跟新建页面有着相反的操作):
- 删除
.vue
文件或.nvue
文件 - 删除
pages.json -> pages
列表项中的配置
再次,首页
首页就是应用默认的第一个页面,这个跟微信小程序的开发如出一辙的,uni-app
会将pages.json -> pages
配置项中的第一个页面,作为当前工程的首页(启动页)。
再来,页面生命周期
uni-app
支持如下页面生命周期函数:
函数名 | 说明 | 平台差异说明 | 最低版本 |
---|---|---|---|
onInit | 监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad | 百度小程序 | 3.1.0+ |
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参) | ||
onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 | ||
onReady | 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 | ||
onHide | 监听页面隐藏 | ||
onUnload | 监听页面卸载 | ||
onResize | 监听窗口尺寸变化 | App、微信小程序、快手小程序 | |
onPullDownRefresh | 监听用户下拉动作,一般用于下拉刷新 | ||
onReachBottom | 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项 | ||
onTabItemTap | 点击 tab 时触发,参数为Object,具体见下方注意事项 | 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序 | |
onShareAppMessage | 用户点击右上角分享 | 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序 | |
onPageScroll | 监听页面滚动,参数为Object | nvue暂不支持 | |
onNavigationBarButtonTap | 监听原生标题栏按钮点击事件,参数为Object | App、H5 | |
onBackPress | 监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack 。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。 | app、H5、支付宝小程序 | |
onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 | App、H5 | 1.6.0 |
onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。 | App、H5 | 1.6.0 |
onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发) | App、H5 | 1.6.0 |
onShareTimeline | 监听用户点击右上角转发到朋友圈 | 微信小程序 | 2.8.1+ |
onAddToFavorites | 监听用户点击右上角收藏 | 微信小程序、QQ小程序 | 2.8.1+ |
注意事项:
1.onInit
使用注意
- 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
- 其他版本或平台可以同时使用 onLoad 生命周期进行兼容,注意避免重复执行相同逻辑
- 不依赖页面传参的逻辑可以直接使用 created 生命周期替代
2.onReachBottom
使用注意
可在pages.json里定义具体页面底部的触发距离
onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
3.scroll-view导致的触发不滚动注意
如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档
4.onPageScroll
(监听滚动、滚动监听、滚动事件)参数说明:
属性 | 类型 | 说明 |
---|---|---|
scrollTop | Number | 页面在垂直方向已滚动的距离(单位px) |
5.onPageScroll
里不要写交互复杂js
onPageScroll
里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。
6.标题栏透明渐变
如果想实现滚动时标题栏透明渐变,在App和H5下,可在pages.json中配置titleNView下的type为transparent,参考
7.滚动吸顶固定某些元素
如果需要滚动吸顶固定某些元素,推荐使用css的粘性布局,参考插件市场。插件市场也有其他js实现的吸顶插件,但性能不佳,需要时可自行搜索。
8.监听滚动
在App、微信小程序、H5中,也可以使用wxs监听滚动,参考;在app-nvue中,可以使用bindingx监听滚动,参考。
9.onBackPress
上不可使用async
onBackPress
上不可使用async
,会导致无法阻止默认返回
10.onPageScroll代码展示
onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
console.log("滚动距离为:" + e.scrollTop);
},