一、UniAPP 介绍
1、什么是 UniAPP ?
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、H5,以及各种小程序(微信/支付宝/百度/头条/ QQ /钉钉)等多个平台,方便开发者快速交付,不需要转换开发思维,不需要更改开发习惯。
2、为什么要选择 UniAPP ?
1、开发者/案例数量更多
2、平台能力不受限
3、性能体验优秀
4、周边生态丰富
5、学习成本低
二、UniAPP 初始化相关配置
1、工程目录结构
一个 uni-app 工程,就是一个 Vue 项目,你可以通过 HBuilderX 或 cli 方式快速创建 uni-app 工程,详见:快速上手。
2、应用配置 manifest.json
3、编译配置 vue.config.js
4、全局配置 page.json
决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar
5、全局样式 uni.scss
6、主组件 App.vue
调用应用生命周期函数、配置全局样式、配置全局的存储globalData
7、入口文件 main.js
因为大家都是初学者或者是需要快速上手项目,所以上面的内容尽可能先了解,
我们从最简单的uniapp的基础指令等相关的学习,等到有一定的开发经验和更加熟悉
小程序之后咱们就可以对上面的部分内容进行系统的学习。初学者只做大致了解即可
三、UniAPP 生命周期
uni-app 完整支持 Vue 实例的生命周期,同时还新增 应用生命周期 及 页面生命周期
1、应用生命周期
1.1 应用生命周期相关简介
应用生命周期即:小程序注册时触发的生命周期钩子函数
用户首次打开小程序,触发 onLaunch(全局只触发一次)。
小程序初始化完成后,触发onShow方法,监听小程序显示。
小程序从前台进入后台,触发 onHide方法。
小程序从后台进入前台显示,触发 onShow方法。
小程序后台运行一定时间,或系统资源占用过高,会被销毁。
前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。
1.2代码示例
App({
onLaunch (options) {
//小程序初始化完成时触发,全局只触发一次