UniAPP笔记(二)

192 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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 开发规范及资源路径

开发规范约定:

  1. Vue单文件组件(SFC)规范
  2. 组件标签靠近小程序规范
  3. 互连能力(JS API)靠近微信小程序规范,但需要将替换替换 wx 为 uni
  4. 数据绑定及事件处理同 Vue.js 规范,同时补充了 App 和页面的生命周期
  5. 为兼容多端运行,建议使用 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滚到底),常用于下拉下一页数据。
  • ...