web学习笔记（八十二）uniapp

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+APPAppAPP-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: 页面卸载时触发，如页面被销毁时触发