web学习笔记（八十二）uniapp
shan33__ 2024-09-17 09:03:04 阅读 94
目录
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条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
使用方法
以 <code>#ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在#ifndef：if not defined 除了某平台均存在%PLATFORM%：平台名称
<view class="content">code>
<!-- #ifdef MP-WEIXIN-->
<view class="">code>
小程序
</view>
<!-- #endif -->
<!-- #ifdef APP||H5-->
<view class="">code>
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>code>
<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>code>
获取参数
<script >
export default{
setup(props, context) {
},
onLoad(options){
console.log(options.id)
}
}
</script>
6.生命周期
uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数(类似于小程序的生命周期)，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，uni-app 的生命周期包括全局生命周期和页面生命周期两部分。
6.1 全局生命周期
onLaunch: 应用初始化时触发，全局只触发一次。onShow: 应用启动、前台进入时触发，每次进入前台都会触发。onHide: 应用进入后台时触发。onError: 应用发生脚本错误或 API 调用失败时触发，用于捕获全局的异常。
6.2 页面生命周期
页面生命周期针对每个页面的生命周期事件，常见的包括：
onLoad: 页面加载时触发，一个页面只会触发一次。onShow: 页面显示时触发，每次页面显示都会触发。onHide: 页面隐藏时触发。onUnload: 页面卸载时触发，如页面被销毁时触发
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。