7.31 微信小程序项目结构、页面结构、生命周期、路由

157 阅读3分钟

一、小程序项目结构

1. src:开放编译文件

1.1. api 接口

1.2. common 公共文件

  • 页面中的公共样式、可以共用的的函数等。

1.3. components 公共组件

1.4. mixins 混入

  • mixins是一个js对象,它可以是data、components、methods 、created、computed等。
  • mixins中含有.wxs文件,使用exports后,能够对外共享本模块的私有变量与函数。
  • .wxs&<wxs>详见二。

1.5. pages 项目中的功能页面

1.6. store 数据存储

  • 从小程序的本地存储中取值。

1.7. utils工具类

-配置网络请求、表单验证等。

1.8. app.wpy文件

  • 所有页面在此注册。

2. static:静态资源文件

存放图片、字体等。

3. weapp:编译生成小程序运行文件

  • 项目跑起来之后生成的文件夹,里面被编译成了微信开发者工具能够直接运行成小程序的代码。
  • 在微信开发者工具中,将weapp的路径填入目录中。

image.png

4. wepy.config.json:wepy配置文件

  • 规定了项目文件扩展名、解析设置的对象(生成的文件夹名[aliasFields])、编译器设置的对象...

5. package.json:第三方依赖文件

二、一些标签

<wxs>

  • .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。
  • 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
  • 暴露:每个模块都有独立的作用域,外部想共享本模块的私有变量和函数则需要module.exports
  • 引用:
<wxs src="./../comm.wxs" module="some_comms"></wxs>

<config>

  • 能指定项目中引用自定义组件。
  • Vant Weapp

三、生命周期

1. 应用级(App.wpy)生命周期

  • onLaunch: 初始化小程序完成时触发,且全局只触发一次。
  • onShow: 小程序初始化完成(启动)或从后台切换到前台显示时触发。
  • onHide: 小程序从前台切换到后台隐藏时触发(如切换到其他app中)。
  • onPageNotFound:小程序要打开的页面不存在的时候触发。

未在文件中见到的:

  • onError: 小程序发生脚本错误或者api调用失败的时候,会触发 onError 并带上错误信息。
  • onUnhandledRejection:小程序有未处理的 Promise 拒绝的时候触发;
  • onThemeChange:系统切换主题的时候触发。

2. 小程序 页面 生命周期

  • onLoad:页面加载时触发,一个页面执行一次。进行数据加载、初始化变量等操作。
  • onShow:页面显示(加载完成后、后台切到前台或重新进入页面)时触发,进行数据刷新等操作。

怎么判断后台切到前台?怎么判断重新进入页面?

  • onReady:页面初次渲染完成。
  • onHide:页面隐藏(navigateTo/底部tab)时触发,
  • onUnload:页面卸载(redirectTo/navigateBack)时触发,进行清除定时器等操作。
  • 页面生命周期执行的顺序是:onLoad --> onShow --> onReady --> onHide

3. 小程序 组件(wepy.component) 生命周期

  • created:组件实例刚刚被创建。
  • attached:组件初始化完毕,实例进入页面节点树。
  • detached:组件实例被从页面节点树移除。
  • ready:视图层页面布局完成后执行。

4. 执行次序(写太好了抄一下)

image.png

四、路由

1. wx.switchTab

只能用于跳转到tabbar页面,并关闭其他非tabbar页面,tabbar之间做切换。

  • 登录
  • tabbar之间做切换
  • 跳转时触发路由前 页面的onHide生命周期
  • 跳转时触发路由后 页面的onShow生命周期

2. wx.reLaunch

关闭当前页面,跳转到应用内的某个页面

  • 切换账号(登出)

  • 路径后可以带参数

  • 跳转时触发路由前 页面的onUnload生命周期

  • 跳转时触发路由后 页面的onLoad和 onShow生命周期