目录

1.介绍uniapp

2.uniapp项目结构

3.自定义tabBer

4.uniapp条件编译

使用方法

 5.uniapp的路由跳转

（1）js跳转

（2）标签跳转 

获取参数 

 6.生命周期

6.1 全局生命周期

6.2 页面生命周期

---

1.介绍uniapp

uniapp是一个基于Vue.js框架的前端开发框架，它可以帮助开发者使用Vue.js一次编写代码，同时生成多个平台（如iOS、Android、Web等）的应用程序。Uni-app的出现使得开发者可以只使用一种语言（Vue.js语法），同时生成多个平台的应用，简化了跨平台开发的复杂度。

2.uniapp项目结构

       ubiapp项目的结构和vue类似，都是在pages文件夹中放置页面的.vue文件，然后在static文件夹中放置静态文件（在上传项目的时候此处的文件会被压缩）。main.js是整个项目的入口文件，可以app.vue是在里配置全局样式（注意：配置全局样式的时候就不需要加scoped了），我们在pages.json文件中配置页面的路由（默认pages数组中第一项表示应用启动页）。需要注意的是uniapp项目中有一个特殊的文件——manifest.json，当我们需要将项目打包为app或者小程序时就需要在此进行相关配置（编译成网页不需要进行配置，直接编译即可）。

3.自定义tabBer

        原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。

4.uniapp条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

使用方法

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

<view class="content"><!-- #ifdef MP-WEIXIN--><view class="">小程序</view><!-- #endif --><!-- #ifdef APP||H5--><view class="">app</view><!-- #endif --></view>

%PLATFORM% 可取值：

值	生效条件	版本支持
VUE3	uni-app js引擎版用于区分vue2和3，	HBuilderX 3.2.0+
VUE2	uni-app js引擎版用于区分vue2和3，
UNI-APP-X	用于区分是否是uni-app x项目	HBuilderX 3.9.0+
uniVersion	用于区分编译器的版本	HBuilderX 3.9.0+
APP	App
APP-PLUS	uni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
APP-ANDROID	App Android 平台
APP-IOS	App iOS 平台
H5	H5（推荐使用 WEB）
WEB	web（同H5）	HBuilderX 3.6.3+
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	抖音小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

 5.uniapp的路由跳转

（1）js跳转

路由跳转的同时可以通过问号进行传参，但是此时不可以再使用动态传参了。

	<button @click="goList">列表页按钮</button>
<script setup>
const goList=()=>{uni.navigateTo({url:"/pages/list/list?id=200"})
}
</script>

（2）标签跳转 

<navigator url="/pages/list/list?id=100" open-type="navigate">跳转到列表页</navigator>

获取参数 

<script >export default{setup(props, context) {},onLoad(options){console.log(options.id)}}</script>

 6.生命周期

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数(类似于小程序的生命周期)，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，uni-app 的生命周期包括全局生命周期和页面生命周期两部分。

6.1 全局生命周期

1. onLaunch: 应用初始化时触发，全局只触发一次。
2. onShow: 应用启动、前台进入时触发，每次进入前台都会触发。
3. onHide: 应用进入后台时触发。
4. onError: 应用发生脚本错误或 API 调用失败时触发，用于捕获全局的异常。

6.2 页面生命周期

页面生命周期针对每个页面的生命周期事件，常见的包括：

1. onLoad: 页面加载时触发，一个页面只会触发一次。
2. onShow: 页面显示时触发，每次页面显示都会触发。
3. onHide: 页面隐藏时触发。
4. onUnload: 页面卸载时触发，如页面被销毁时触发