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文件下,但是不建议,建议分好类用文件夹装着,方便管理)
- –user(页面文件夹,里面放vue页面)
- –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(项目说明文件,说明书、备注文档之类的)
- –common(js文件夹,放js插件文件等)
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>