当前位置：首页 > article >正文

uni-app+vue3学习随笔

article 2026/3/16 11:57:29

目录相关

static文件

编译器会把static目录中的内容整体复制到最终编译包内，

非 static 目录下的文件（vue组件、js、css 等）只有被引用时，才会被打包编译。

css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

注意控制static目录的大小，太大的static目录和太多文件，会造成App安装后第一次启动变慢。

manifest应用配置

配置微信小程序的appid等，以及打包时的一些配置。

components文件

局部组件引入

在根目录下建立components文件夹，在文件夹里创建局部组件，在对应的页面组件内引入即可

注意：components下是组件文件夹，组件文件夹的名称与组件名称一致

路由相关

添加路由

页面创建完成后，需要在pages.json文件内添加文件路径，否则将无法访问相应页面

路由传参

路由传递的参数要从uniapp中的页面生命周期函数-onload内获取，不能在组件生命周期onMounted内获取

<template><view class="">姓名：{{name}} - {{age}}<scroll-view scroll-y="true" ref="scroll"><view></view></scroll-view><navigator url="/pages/demo5/demo5">跳转demo5</navigator><view>----</view><view>计数：{{count}}</view><view>----</view><navigator open-type="reLaunch" url="/pages/demo4/demo4">demo4页面</navigator><view v-for="item in 50">{{item}}</view><view class="fixed" v-if="fixed">↑</view></view>
</template><script setup>
import {onBeforeMount, onMounted, ref, getCurrentInstance} from "vue"
import {onLoad,onReady,onShow,onHide,onUnload,onPageScroll} from "@dcloudio/uni-app"
const name = ref("张三")
const age = ref(18)
const scroll = ref(null)
const count = ref(0)
const fixed = ref(false);let time= setInterval(()=>{count.value++
},50)onLoad((e)=>{	console.log("onload函数");	console.log(e);name.value = e.nameage.value = e.age
})onShow(()=>{console.log("onShow函数");time= setInterval(()=>{count.value++},50)
})onHide(()=>{console.log("onHide函数");clearInterval(time)
})onReady((e)=>{	console.log("onReady函数");
})onBeforeMount(()=>{console.log("onBeforeMount函数");
})onMounted(()=>{console.log("onMounted函数");const instance = getCurrentInstance();// const query = instance.route.query;console.log("onMounted函数-query", instance);})onUnload(()=>{console.log("onUnload卸载页面");
})onPageScroll((e)=>{console.log(e.scrollTop);	fixed.value = e.scrollTop>200})</script><style lang="scss" scoped>
.fixed{width: 100px;height: 100px;background: orange;position: fixed;right:30px;bottom:30px;
}
</style>

CSS相关

rpx

rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置。

UI在做设计稿时，宽度最好按750px像素做，这样，当UI设计稿的宽度是1px的时候，我们在写CSS样式时就用1rpx就好了，省去换算的问题。

底部安全区域css环境变量

避免底部区域遮挡相关功能

padding-bottom: env(safe-area-inset-bottom);

设置通用样式

不放在Static文件加内，是因为，Static文件内的文件会被打包进去，放在common下的文件，只有引入才会被打包进去，并将样式文件在App.vue文件内引入。

view,swiper,swiper-item{box-sizing: border-box;
}.pageBg{background: linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8);min-height: 80vh;
}.loadingLayout{padding:30rpx 0;
}.safe-area-inset-bottom{height: env(safe-area-inset-bottom);
}

定义颜色变量

uni.scss文件定义uni-app内置的常用样式变量，common下的文件下定义的自定义变量在此文件内引入就可以全局使用。

样式穿透

deep(){.uni-icons{color:$brand-theme-color !important;}
}

插件

unplugin-auto-import自动导入vue和uniapp模块

// 根目录下创建vite.config.js，并拷贝下面的代码
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [uni(),        // 自动导入配置AutoImport({imports:[// 预设'vue','uni-app'                ]})]    
})

使用官方扩展组件

注意：引入之后不好用的话，就重新编译，小程序必须重新编译。如果下载插件的时候出现合并提示框，点击合并即可。

<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>

编译器（#ifdef）

编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码。

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

参考文档：什么是编译器 | uni-app官网

在Html中的示例

<!-- ifdef MP 在小程序展示 -->
<!-- #ifdef MP -->
<button open-type="contact">联系客服</button>
<!-- #endif --><!-- ifndef MP 非小程序的情况下展示 -->
<!-- #ifndef MP 非小程序的情况下展示 -->
<button @click="clickContact">拨打电话</button>
<!-- #endif -->

在Script中的示例

	//点击下载const clickDownload = async () => {// #ifdef H5uni.showModal({content: "请长按保存壁纸",showCancel: false})// #endif}

获取系统信息

系统信息的概念 | uni-app官网

uni.getSystemInfoSync()获取系统信息，一般使用同步方法，系统内获取的信息，其单位都是px的。

状态栏高度

const SYSTEM_INFO = uni.getSystemInfoSync();export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;

胶囊按钮（小程序才有）

getMenuButtonBoundingClientRect() | uni-app官网

uni.getMenuButtonBoundingClientRect();

标题高度

一般标题高度 = 标题栏距状态栏的距离 + 胶囊按钮的高度 + 胶囊按钮距内容区的高度

const SYSTEM_INFO = uni.getSystemInfoSync();// 状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;// 标题栏高度
export const getTitleBarHeight = ()=>{// 如果存在胶囊按钮if(uni.getMenuButtonBoundingClientRect){// 获取胶囊按钮高度以及距顶部的距离let {top, height} = uni.getMenuButtonBoundingClientRect();// 胶囊按钮高度 + 上下边距return height + (top - getStatusBarHeight()) * 2		}else{return 40;}
}

自定义标题栏时占位区高度

const SYSTEM_INFO = uni.getSystemInfoSync();// 状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;// 标题栏高度
export const getTitleBarHeight = ()=>{// 如果存在胶囊按钮if(uni.getMenuButtonBoundingClientRect){// 获取胶囊按钮高度以及距顶部的距离let {top, height} = uni.getMenuButtonBoundingClientRect();// 胶囊按钮高度 + 上下边距return height + (top - getStatusBarHeight()) * 2		}else{return 40;}
}// 自定义标题栏占位元素的高度 = 状态栏高度 + 标题栏高度
export const  getNavBarHeight = ()=> getStatusBarHeight() + getTitleBarHeight();

头条小程序的头部icon

相关API查看抖音小程序开发文档，uni-app中没有写。

const SYSTEM_INFO = uni.getSystemInfoSync();// 状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;// 标题栏高度
export const getTitleBarHeight = ()=>{// 如果存在胶囊按钮if(uni.getMenuButtonBoundingClientRect){// 获取胶囊按钮高度以及距顶部的距离let {top, height} = uni.getMenuButtonBoundingClientRect();// 胶囊按钮高度 + 上下边距return height + (top - getStatusBarHeight()) * 2		}else{return 40;}
}// 自定义标题栏占位元素的高度 = 状态栏高度 + 标题栏高度
export const  getNavBarHeight = ()=> getStatusBarHeight() + getTitleBarHeight();// 抖音小程序标题有一个icon
export const getLeftIconLeft = ()=> {// #ifdef MP-TOUTIAO// 下面这种语法是深度解构let {leftIcon: {left, width}}  = tt.getCustomButtonBoundingClientRect();return left + parseInt(width);// #endif// #ifndef MP-TOUTIAOreturn 0// #endif	
}

网络请求

uni.request

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。详细内容请参考官方文档 uni.request(OBJECT) | uni-app官网

function getData() {uni.request({url: '/XXX/XXX',method: 'POST', // 默认是getdata: {name: '测试'},success: (res: any) => {// 将接口的返回结果都包在data中console.log(res.data)}})
}

使用Promise封装request


const BASE_URL = 'https://XXX.XXX.com/XXX/XXX';export function request(config = {}){	let {url,data = {},method = "GET",header = {}} = config;url = BASE_URL + url;header['access-key'] = "XXX";	header['token'] = 'XXX';return new Promise((resolve, reject)=>{		uni.request({url,data,method,header,success: res=>{if(res.data.errCode === 0){// 直接取接口的返回值，去除中间包的那一层dataresolve(res.data)}else if(res.data.errCode === 400){uni.showModal({title: "错误提示",content: res.data.errMsg,showCancel: false})reject(res.data)}else{uni.showToast({title: res.data.errMsg,icon: "none"})reject(res.data)}				},fail: err=>{reject(err)}})})
}