什么是uni-app

uni-app是一个使用Vue.js开发所有前端应用的框架，开发一套代码发布多端（ios、安卓、Web、小程序）

学习前的准备工作

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

略，本质跟elementUI差不多

略

Vue.js 生命周期和微信小程序的生命周期虽然在概念上相似，都是描述组件从创建到销毁的一系列过程，但在具体的生命周期钩子函数、执行顺序以及细节处理上有所不同。

Vue.js 生命周期：

初始化阶段：
- beforeCreate：实例被创建后，在数据观测和事件配置之前调用。此时，实例的属性如data、methods等还未初始化。
- created：实例已经创建完成，所有数据观测和计算属性都已生效，但DOM尚未生成，$el属性还不可见。
挂载阶段：
- beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。
- mounted：实例被挂载到DOM中，此时可以访问到DOM节点并进行操作。
更新阶段：
- beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
- updated：数据更新后调用，DOM已经重新渲染完成。
销毁阶段：
- beforeDestroy：实例销毁前调用，实例仍然完全可用。
- destroyed：实例被销毁，所有的绑定解除，所有的子实例也都会被销毁。

微信小程序生命周期：

初始化阶段：
- onLoad：页面加载时触发，一个页面只会调用一次，可获取打开当前页面路径携带的参数。
- onShow：页面显示/切入前台时触发，对于单页应用来说，每次进入此页面均会触发。
页面滚动相关：
- onPageScroll：页面滚动时触发，可用于监听用户滚动行为。
页面卸载阶段：
- onUnload：页面卸载时触发，释放页面资源，通常在此处执行清理工作。
数据更新阶段：
- 小程序没有直接对应Vue.js中数据更新时的钩子函数，但可以通过setData方法手动更新数据，并在回调函数中执行相应逻辑。

总结起来，Vue.js 的生命周期更偏向于组件层面，详细地涵盖了组件的数据响应式原理所涉及的整个流程；而微信小程序的生命周期主要关注页面的加载、显示、隐藏与卸载，同时考虑了页面间的跳转交互场景。两者在设计上各有侧重点，但核心目标都是为了更好地管理页面状态和生命周期中的不同阶段。

在uni-app中，路由配置是自动完成的，不需要像原生vue-router那样手动编写routes数组。每个页面文件（.vue）都会自动生成对应的路由规则，路径就是页面所在的目录及文件名（不包含后缀.vue）。例如：

uni-app也支持自定义tabBar页面及其对应的路由，并在manifest.json或uniCloud云函数控制台进行相关配置。

uni-app 提供了多种页面跳转的方法，主要包括以下几种：

uni.navigateTo/OPTIMIZED：

Javascript
uni.navigateTo({
  url: '/pages/目标页面路径',
  params: { // 可选，传递给目标页面的对象参数
    key1: 'value1',
    key2: 'value2'
  }
});

或使用优化写法：

Javascript
uni.navigateTo({ 
  route: '目标页面路径', // 从HBuilderX 3.0.9起支持route写法
  ...
});

uni.redirectTo：当需要替换当前页面（不可回退至前一页），可以使用此方法。
```
Javascript
uni.redirectTo({
  url: '/pages/目标页面路径'
});
```
uni.reLaunch：关闭所有页面并打开到指定页面，相当于重新启动应用。
```
Javascript
uni.reLaunch({
  url: '/pages/目标页面路径'
});
```
uni.switchTab：切换到 tabBar 页面，通常用于底部导航栏切换页面。
```
Javascript
uni.switchTab({
  url: '/pages/tabBar页面路径'
});
```

uni.navigateBack：返回上一页面或多级页面。

Javascript
uni.navigateBack({
  delta: 1 // 返回上一级，默认为1，可自定义返回层级
});

以上跳转方法均可以在Vue组件的methods或者生命周期钩子函数中调用。同时，uni-app还提供了<navigator>标签作为HTML级别的页面跳转方式，适用于在模板内进行页面跳转。

略