uniapp小程序目录结构和生命周期

661 阅读1分钟

uniapp小程序目录结构

  • components:自定义组件的目录
  • pages:页面存放的目录
  • static:静态文件资源目录
  • unpackage:编译后的文件存放目录
  • untils:公用的工具类
  • common:公用的文件
  • app.vue:应用配置,用来配置App全局样式以及监听
  • main.js:应用入口
  • manifest.json:项目配置
  • pages.json:页面配置
  • uni.scss:内置uniapp常用样式变量
  • uniCloud:云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb

image.png

生命周期

1.应用生命周期 (app.vue):全局只触发一次

  • onLaunch:应用初始化完成触发一次(做登录判断可以在该周期)
  • onShow:应用启动,显示程序,应用从后台进入前台触发
  • onHide:隐藏程序,应用从前台进入后台触发

2.页面生命周期(page):

  • onLoad:监听页面加载
  • onShow:监听页面显示
  • onReady:监听页面初次渲染完成
  • onHide:监听页面隐藏
  • onUnload:监听页面卸载

...还有很多生命周期,详见看uniapp的页面周期查询

3.组件生命周期(components):

  • beforeCreate:在实例初始化之前被调用
  • created:在实例创建完成后被立即调用
  • beforeMount:在挂载开始之前被调用
  • mounted:挂载到实例上去之后调用
  • beforeUpdate:数据更新时调用
  • updated:数据更新后,重新渲染完成
  • beforeDestroy:实例销毁之前调用
  • destroyed:Vue 实例销毁后调用

uniapp小程序生命周期大概流程:

image.png