学习uni-app看文章可以了解得更简单，但是想要全面还得看官方文档。

生命周期

vue生命周期

vue 自带的生命周期在uniapp中都能使用

比如onMounted()、onBeforeMount()等等。

页面生命周期

uniapp 提供了页面生命周期，

比如：

copy 复制代码

     1. onLoad监听页面加载。

     2. onShow监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。
     
     3. onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新。
     
     4. onPageScroll监听页面滚动。
     等等

应用生命周期

整个app应用的状态变化，只能在App.vue使用

比如：

copy 复制代码

 1. onLaunch  当`uni-app` 初始化完成时触发（全局只触发一次），参数为应用启动参数。
 
 2. onShow   当 `uni-app` 启动，或从后台进入前台显示，参数为应用启动参数。
 
 3. onHide  当 `uni-app` 从前台进入后台。  
 
 4. onError 当 `uni-app` 报错时触发

全局变量

vue2：Vue.prototype.name = '测试名称' (options API)
vue3：在App.vue中设置 uni-app 的 globalData 是指一个全局的数据对象，可以在任何页面中进行访问和修改。它类似于 Vue.js 中的全局变量，适用于小型或中型的 uni-app 应用程序中。

可以通过以下步骤来定义和使用 globalData：

在 App.vue 文件中定义一个空的对象 globalData，例如：

Copy 复制代码

export default {
  globalData: {}
}

在应用程序中的任何页面中，都可以使用 getApp 方法获取 app 实例，并通过 app.globalData 访问全局数据对象，例如：

Copy 复制代码

const app = getApp()
console.log(app.globalData)

可以在任何页面中修改全局数据对象的值，例如：

Copy 复制代码

const app = getApp()
app.globalData.userInfo = { name: 'Tom', age: 18 }

需要注意的是，globalData 中的数据会在整个应用程序中共享，因此需要谨慎使用，避免出现意料之外的问题。

路由跳转

在 uni-app 中，可以使用内置的 $router 对象来进行页面之间的路由跳转。下面是一些常见的路由跳转方式：

使用 navigateTo 方法进行普通页面跳转：

javascriptCopy 复制代码

// 在当前页面跳转到目标页面
uni.navigateTo({
  url: '/pages/targetPage/targetPage'
})

使用 redirectTo 方法进行重定向跳转：

javascriptCopy 复制代码

// 关闭当前页面，并跳转到目标页面
uni.redirectTo({
  url: '/pages/targetPage/targetPage'
})

使用 reLaunch 方法进行整体重启跳转：

javascriptCopy 复制代码

// 关闭所有页面，并跳转到目标页面
uni.reLaunch({
  url: '/pages/targetPage/targetPage'
})

使用 switchTab 方法进行底部标签栏页面跳转：

javascriptCopy 复制代码

// 切换底部标签栏的页面
uni.switchTab({
  url: '/pages/tabPage/tabPage'
})

使用 navigateBack 方法进行页面返回：

javascriptCopy 复制代码

// 返回上一页（可指定返回页面数）
uni.navigateBack({
  delta: 1
})

使用html标签跳转

html 复制代码

<navigator url="/pages/about/about">去关于页面</navigator>

需要注意的是，上述方法中的 url 参数指定了目标页面的路径。路径可以是绝对路径（以 '/' 开头），也可以是相对路径（相对于当前页面）。另外，uni-app 还支持传递参数和接收参数，可以通过 url 参数或 query 参数实现。

注意：当我们新建页面后pages.json里面会主动帮我们配置好路由。如果想渲染图标，通过点击图标来切换页面，还可以通过`"tabBar"`来实现：

pages.json 复制代码

"tabBar":{
"list": [
			{
				"pagePath": "pages/index/index",
				"text": "发现",
				"iconPath": "/static/icon/wangyiyun1.png",
				"selectedIconPath": "/static/icon/wangyiyun1-active.png"
			}
         ]
         }

"tabBar"里面还有很多属性，可以通过官方文档学习。

插槽

子组件向父组件通信和vue里面的方法相同，只要创建一个component目录就不需要在各个页面引入，但是当父组件想添加一个值在子组件则需要添加一个插槽。

子组件：放置一个插槽 <slot name="content"></slot>

父组件：填充内容到插槽 <template v-slot:content>内容</template>

uni-app学习我们必须先明白这些东西

生命周期

vue生命周期

页面生命周期

应用生命周期

全局变量

路由跳转

注意：当我们新建页面后pages.json里面会主动帮我们配置好路由。如果想渲染图标，通过点击图标来切换页面，还可以通过"tabBar"来实现：

插槽

注意：当我们新建页面后pages.json里面会主动帮我们配置好路由。如果想渲染图标，通过点击图标来切换页面，还可以通过`"tabBar"`来实现：