uniapp应用结构和生命周期（6000字）

uniapp应用结构

• –自己的uniapp（最外层的项目文件夹，也叫app目录，以下有后缀名的都是文件，没有后缀名的都是文件夹）
  • –common（js文件夹，放js插件文件等）
    • app.js（自己写的js文件，可以是js工具文件等等）
    • tools.js（自己写的js文件，同上）
  • –components（组件文件夹，放组件）
    • myComp.vue（自己写的组件，或者下载下来的组件）
  • –…（自定义文件夹，比如使用了UI框架就放这里）
  • –colorUI（同上，下载下来引入项目的colorUI框架）
  • –uview（同上，下载下来引入项目的uviewUI框架，一般只引入一个UI框架，当然一个满足不了也可以多个，可能会有冲突）
  • –pages（项目页面文件，与它同级的其他文件都是陪衬，这里才是主体）
    • –user（页面文件夹，里面放vue页面）
      • userInfo.vue（vue页面）
      • userLogin.vue（vue页面）
    • index.vue（vue页面文件也可以直接放pages文件下，但是不建议，建议分好类用文件夹装着，方便管理）
  • –pagesA（分包文件夹A，新建项目是没有分包文件夹的）
  • –pagesB（分包文件夹B）
  • –pagesC（分包文件夹C）
  • –static（静态文件夹，里面放字体图标、图片等静态文件）
  • –unpackage（转编译文件，小程序、app等编译后的文件在这里面，这里面的文件是不需要动的）
    • –debug（debug文件夹，放app端的调试基座）
    • –dist（运行、发行文件目录）
      • –build（发行后转编译到各个平台的代码文件夹）
      • –dev（运行后转编译到各个平台的代码文件夹）
    • –res（app端配置）
      • –icons（app端桌面图标目录）
  • App.vue（app生命周期页面，管理app的启动、从后台切换到前台和从前台切换到后台）
  • main.js（入口文件，实例化Vue，在这个页面配置的内容所有页面都会加载）
  • manifest.json（项目配置文件，设置各个平台的配置）
  • pages.json（应用目录文件，设置pages/pagesA/pagesB/…下面各个显示页面的配置）
  • README.md（项目说明文件，说明书、备注文档之类的）

uniapp应用流程

启动应用:

应用切换到后台:

应用切换到前台:

跳转到新的页面:

当前页回到上一个页面:

注意
直接退出应用，立即销毁应用进程，无法监听。比如用户直接打开手机运行进程后台控制面板直接关掉应用、进入设置里打开正在运行的程序管理界面直接停用应用、使用手机管家清理运行后台等因为app已经被销毁了，都是无法用app监听退出应用的。但是，当用户是点击物理返回按键时，应用还在运行，可以监听uniapp页面栈里面第一个页面的返回键事件onBackPress。返回键是物理按键，只有点击了返回键才能触发事件onBackPress()，其他操作比如手势操作等都无法触发。

/** 
 * 这是index.vue（自己设置的，可以设置登录页/广告页是第一页），是应用打开的第一个页面，点击一下物理返回键会触onBackPress，
 * 连续点击两下物理返回键会直接退出应用
 */
<script>
    export default {
        onLoad() {
            console.log('onLoad')
        },
      	onBackPress(e) {
			console.log(e);  // {"from": "backbutton"} 每点击一次会触发一次
			if(e.from == "backbutton"){
				...  // 这里是你的骚操作，不可和 return true 的顺序放反
				return true;  // return true 可以阻止下一步页面的自动退出/应用的自动退出
			}
			return false;  // 继续uniapp的默认行为，这一行代码可以省略
		},
		methods：{}
    }
</script>

应用生命周期

注意
应用生命周期仅可在App.vue中监听，在其它页面监听无效。

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当uni-app 初始化完成时触发（全局只触发一次）
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考官方的 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

// App.vue页面
<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
            // 可以进行一系列操作，如跳转、检测更新等
        },
        onShow: function() {
            console.log('App Show')
            // 可以进行一系列操作，如跳转、检测更新等
        },
        onHide: function() {
            console.log('App Hide')
        },
        onThemeChange: function() {
            console.log('App ThemeChange')
            // 这里可以设置应用的主题，比如黑暗主题
        }
    }
</script>

页面生命周期

注意
pages目录下能够显示的页面才有页面生命周期，不是所有vue文件或者nvue文件都有这个东东的！下面的表格是照搬的官方文档的，建议直接去看官方文档（好吧我承认我偷懒了）

函数名	说明	支持平台	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考官方示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏/不能看到
onUnload	监听页面卸载/销毁
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考官方示例	App、微信小程序
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见官方页面生命周期注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信、支付宝、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信、百度、字节跳动、支付宝小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持，其他都支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	HBuilderX 1.6.0 起
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	HBuilderX 1.6.0 起
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	HBuilderX 1.6.0 起
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	HBuilderX 2.8.1 起
onAddToFavorites	监听用户点击右上角收藏	微信小程序	HBuilderX 2.8.1 起

另外，页面可以使用vue的computed来缓存相关的变量

// vue页面和组件都能用computed
<template>
	<view>{{one}}</view>
</template>
<script>
    export default {
    	data() {return {
    		// computed 里面的变量（比如变量one）不用在这里重复定义
    	}},
        computed: {
            one(){
				let str = '123';
				return str;
			}
        },
        onShow() {
			this.getOne();
		},
        methods: {
            getOne(){
            	console.log(this.one);  // 123
            }
        },
    }
</script>

组件生命周期

注意
components目录下的组件文件才有组件生命周期！当然引入项目里的UI插件也有组件生命周期。

函数名	说明	支持平台	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick Vue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

另外，组件可以像页面一样使用vue的computed来缓存相关的变量。

// vue页面和组件都能用computed
<template>
	<view>{{name}}</view>
	<view>{{one}}</view>
</template>
<script>
    export default {
    	props:{
    		// computed 里面的变量（比如变量one）不用在这里重复定义
    		name: {
				type: String,
				default: '李四'
			}
    	},
    	data() {return {
    		// computed 里面的变量（比如变量one）不用在这里重复定义
    	}},
        computed: {
            one(){
            	// props里面的变量是不能在组件里修改的，可以在computed用一个变量接收并修改
				let str = '';
				if(this.name != ''){
					str = this.name;
				} else {
					str = '王五';
				}
				// 以上if条件还可以优化为：
				// str = this.name != '' ? this.name : '王五';
				return str;
			}
        },
        methods: {
            getOne(){
            	this.name = ''赵柳   // 会报错并且堵塞进程（js特性）
            	console.log(this.one);  // 李四
            }
        },
    }
</script>