携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第29天,点击查看活动详情
前言
大家好呀,我是L同学。在上篇文章UniAPP笔记(一)中,我们学习了UniAPP的相关知识点,包括什么是UniAPP、UniAPP 开发环境搭建、UniAPP 初始化相关配置等相关知识点。。在本篇文章中,我们将继续学习UniAPP的相关知识点,包括主组件 App.vue、入口文件 main.js、UniAPP 开发规范及资源路径、UniAPP 生命周期等相关知识点。
主组件 App.vue
App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素。这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData。应用生命周期仅可在App.vue中监听,在页面监听无效。
入口文件 main.js
main.js是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。
UniAPP 开发规范及资源路径
开发规范约定:
- Vue单文件组件(SFC)规范
- 组件标签靠近小程序规范
- 互连能力(JS API)靠近微信小程序规范,但需要将替换替换 wx 为 uni
- 数据绑定及事件处理同 Vue.js 规范,同时补充了 App 和页面的生命周期
- 为兼容多端运行,建议使用 flex 布局进行开发
写uniapp项目的时候,所有的涉及到调用文件,请求资源的时候,建议统一用@/绝对路径的方式来调用文件所处的位置。
UniAPP 生命周期
页面运行过程中,各个阶段的回调函数就是页面中的时机,我们也叫这个为“生命周期钩子函数”。uni-app 完整支持 Vue 实例的生命周期,同时还新增应用生命周期以及页面生命周期。
应用生命周期
- onLaunch: 当uni-app初始化完成时触发(全局只触发一次)
- onShow:当uni-app启动,或从后台进入前台显示
- onHide:当uni-app从前台进入后台
- onError:当uni-app报错时触发
- onUniNViewMessage:对
nvue页面发送的数据进行监听 - onUnhandledRejection:对未处理的 Promise 拒绝事件监听函数(2.8.1+)
- onPageNotFound: 页面不存在监听函数
- onThemeChange: 监听系统主题变化
页面生命周期
- onLoad:监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
- onShow: 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
- onReady:监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
- onHide:监听页面隐藏
- onUnload:监听页面卸载
- onResize:监听窗口尺寸变化
- onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新
- onReachBottom:页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。
- ...