web学习笔记（八十二）uniapp

目录

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% 可取值：

值生效条件版本支持
VUE3uni-app js引擎版用于区分vue2和3，HBuilderX 3.2.0+
VUE2uni-app js引擎版用于区分vue2和3，
UNI-APP-X用于区分是否是uni-app x项目 HBuilderX 3.9.0+
uniVersion用于区分编译器的版本 HBuilderX 3.9.0+
APPApp
APP-PLUSuni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUEApp nvue 页面
APP-ANDROIDApp Android 平台 
APP-IOSApp iOS 平台 
H5H5（推荐使用 WEB）
WEBweb（同H5）HBuilderX 3.6.3+
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO抖音小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
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: 页面卸载时触发，如页面被销毁时触发