uni-app+vue3学习随笔

news2025/3/13 7:14:17

目录相关

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.name
	age.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 H5
		uni.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-TOUTIAO
		return 0
	// #endif	
}

网络请求

uni.request

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

function getData() {
    uni.request({
        url: '/XXX/XXX',
        method: 'POST', // 默认是get
        data: {
            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){
                    // 直接取接口的返回值，去除中间包的那一层data
					resolve(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)
			}
		})
	})
}

打包

web/H5

1、路径模式，如果有后端做Nginx转发，就可以选择history，没有就选hash模式

2、将打包后的东西放在根路径下，就用 ./ 就可以了，但是一般情况下，服务器中可能有多个文件，比如说后端文件、前端文件、管理系统的文件，一个服务器里可能存在多个包，所以大多数情况下，运行的基础路径都会指定一个基础路径。

3、打包流程

 

打包APP-安卓

一、相关配置

二、运行APP

遇到下面这个弹窗，有两种解决方式：

1、把安卓手机直接连在电脑上

2、下载模拟器，百度自行下载即可

三、打包

 四、版本更新

uniPush统一推送与App升级中心uni-upgrade-center系列uniapp进阶课，安卓apk打包及自定义基座_哔哩哔哩_bilibili

即时设计

1、打开即时设计，选在创建文件

2、把UI做好的图拖入文件中 ，在图上右键锁定，这样图片就不会随便移动

ctrl+鼠标滚轮可以放大缩小图片

3、通过切片功能来模拟量图工具

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2313545.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

prompt大师高效提示词解析

prompt大师高效提示词解析

Prompt大师李继刚高效提示词示例解析 一、「汉语新解」提示词 核心结构 采用Lisp语言框架嵌套中文语义&#xff0c;通过(defun 新汉语老师 ()...)定义角色风格&#xff08;融合奥斯卡王尔德、鲁迅的批判性语言&#xff09;&#xff0c;用(隐喻 (一针见血...))构建解释逻辑链。…
阅读更多...
QT系列教程(18) MVC结构之QItemSelectionModel模型介绍

QT系列教程(18) MVC结构之QItemSelectionModel模型介绍

视频教程 https://www.bilibili.com/video/BV1FP4y1z75U/?vd_source8be9e83424c2ed2c9b2a3ed1d01385e9 QItemSelectionModel Qt的MVC结构支持多个View共享同一个model&#xff0c;包括该model的选中状态等。我们可以通过设置QItemSelectionModel&#xff0c;来更改View的选…
阅读更多...
【Java面试题汇总】Java面试100道最新合集！

【Java面试题汇总】Java面试100道最新合集！

1.说说你对面向对象的理解 得分点 封装,继承,多态、概念、实现方式和优缺点 面向对象的三大基本特征是&#xff1a;封装、继承、多态。 封装&#xff1a;将对象的状态和行为包装在一个类中并对外界隐藏实现的细节&#xff0c;可以通过访问修饰符控制成员的访问权限&#xff0c…
阅读更多...
Vue 实现智能检测文字是否溢出，溢出显示省略号，鼠标悬浮显示全部【附封装组件完整代码+详细注释+粘贴即食】

Vue 实现智能检测文字是否溢出，溢出显示省略号，鼠标悬浮显示全部【附封装组件完整代码+详细注释+粘贴即食】

一、场景需求 在项目中&#xff0c;经常会遇到文本内容超出容器的情况。为了提高用户体验&#xff0c;我希望在文字溢出时显示悬浮提示&#xff0c;未溢出时则不显示。 二、效果演示 三、实现原理 DOM宽度对比法&#xff1a;通过比较元素的scrollWidth&#xff08;实际内容宽…
阅读更多...
51c大模型~合集10

51c大模型~合集10

我自己的原文哦~ https://blog.51cto.com/whaosoft/11547799 #Llama 3.1 美国太平洋时间 7 月 23 日&#xff0c;Meta 公司发布了其最新的 AI 模型 Llama 3.1&#xff0c;这是一个里程碑时刻。Llama 3.1 的发布让我们看到了开源 LLM 有与闭源 LLM 一较高下的能力。 Meta …
阅读更多...
关于C/C++语言的初学者在哪刷题，怎么刷题

关于C/C++语言的初学者在哪刷题，怎么刷题

引言&#xff1a; 这篇博客主要是针对初学者关于怎么在网上刷题&#xff0c;以及在哪里刷题。 1.介绍平台&#xff08;在哪刷题&#xff09;&#xff1a; 1.牛客牛客网https://www.nowcoder.com/ &#xff1a;有许多面试题&#xff0c;也有许多供学习者练习的题 2.洛谷洛谷 …
阅读更多...
AI自动化编程初探

AI自动化编程初探

先说vscodeclinemodelscope方案&#xff0c;后面体验trae或者cursor再写写其它的。vscode和trae方案目前来说是免费的&#xff0c;cursor要用claud需要付费&#xff0c;而且不便宜&#xff0c;当然效果可能是最好的。 vscode方案&#xff0c;我的经验是最好在ubuntu上&#xff…
阅读更多...
《人月神话》：软件工程的成本寓言与生存法则

《人月神话》：软件工程的成本寓言与生存法则

1975年&#xff0c;Fred Brooks在《人月神话》中写下那句振聋发聩的断言——“向进度落后的项目增加人力&#xff0c;只会让进度更加落后”——时&#xff0c;他或许未曾料到&#xff0c;这一观点会在半个世纪后的人工智能与云原生时代&#xff0c;依然如达摩克利斯之剑般悬在每…
阅读更多...
深入理解Java中的static关键字及其内存原理

深入理解Java中的static关键字及其内存原理

static是Java中实现类级共享资源的核心修饰符&#xff0c;它突破了对象实例化的限制&#xff0c;使得变量和方法能够直接与类本身绑定。这种特性让static成为构建工具类、全局配置等场景的利器&#xff0c;但同时也带来独特的内存管理机制需要开发者关注。 static修饰成员变量…
阅读更多...
20250310-组件基础2

20250310-组件基础2

通过插槽来分配内容 一些情况下我们会希望能和 HTML 元素一样向组件中传递内容&#xff1a; <AlertBox>传入的内容 </AlertBox> 我们期望能渲染成这样&#xff1a; 这可以通过 Vue 的自定义 <slot> 元素来实现&#xff1a; <template><div clas…
阅读更多...
Fedora41安装MySQL8.4.4

Fedora41安装MySQL8.4.4

Fedora41安装MySQL8.4.4 Fedora41用yum仓库安装MySQL8.4.4 笔记250310下载安装启动mysqld服务查看生成的初始密码 , 用初始密码登录登录后,必须修改初始密码才能执行其它操作可选设置降低密码强度要求, 使用简单密码降低 validate_password 组件对密码强度的要求 用SET GLOBAL命…
阅读更多...
基于YOLO11深度学习的运动品牌LOGO检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】

基于YOLO11深度学习的运动品牌LOGO检测与识别系统【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…
阅读更多...
java BCC异或校验例子

java BCC异或校验例子

需求 对一个十六进制的字符串进行BCC校验 方法 private static String XORCheck(String rawMsg) {// 16进制字符串需要转成10进制数组进行校验&#xff0c;然后再返回16进制字符串用于与原来的字符匹配byte[] bytes HexDumpMsgFormat.hexStr2DesBytes(rawMsg);return BytesUt…
阅读更多...
华为OD机试九日集训第1期 - 按算法分类，由易到难，循序渐进，提升编程能力和解题技巧，从而提高机试通过率（Python/JS/C/C++）

华为OD机试九日集训第1期 - 按算法分类，由易到难，循序渐进，提升编程能力和解题技巧，从而提高机试通过率（Python/JS/C/C++）

目录 一、适合人群二、本期训练时间三、如何参加四、数据结构与算法大纲五、华为OD九日集训第1期第1天、逻辑分析第2天、数组第3天、双指针第4天、map与list第5天、队列第6天、栈第7天、滑动窗口第8天、二叉树第9天、矩阵 六、国内直接使用满血ChatGPT4o、o1、o3-mini-high、Cl…
阅读更多...
webshell一些上传心得

webshell一些上传心得

我们以upload-labs为基础 一、前端拦截&#xff1a; 如第一关 工作方式&#xff1a; 直接在前端拦截 绕过方式&#xff1a; 因为没有限制后端&#xff0c;所有可以用bs 绕过前端修改格式即可 将需要上传的php文件改成jpg格式 使用burp suite 拦截上传后&#xff0c;使用re…
阅读更多...
ROS实践（二）构建Gazebo机器人模型文件urdf

ROS实践（二）构建Gazebo机器人模型文件urdf

目录 一、基础语法 1. urdf文件组成 2. robot根标签 3. link 和 joint标签 4. sensor标签 二、 实验&#xff1a;使用launch文件启动rviz查看机器人模型 1. 编写机器人模型的urdf文件。 2. 编写launch文件。 3. 运行launch&#xff0c;查看效果。 URDF&#xff08;Unifi…
阅读更多...
Linux 入门：常用命令速查手册

Linux 入门：常用命令速查手册

目录 一.指令 1.pwd&#xff08;显示所在路径&#xff09; 2.ls&#xff08;列出所有子目录与文件&#xff09; 3.touch&#xff08;创建文件&#xff09; 4.mkdir&#xff08;创建目录&#xff09; 5.cd&#xff08;改变所处位置&#xff09; 6.rm&#xff08;删除&…
阅读更多...
2路模拟量同步输出卡、任意波形发生器卡—PCIe9100数据采集卡

2路模拟量同步输出卡、任意波形发生器卡—PCIe9100数据采集卡

品牌&#xff1a;阿尔泰科技 型号&#xff1a; PCIe9100、PCIe9101、PXIe9100、PXIe9101 产品系列&#xff1a;任意波形发生器 支持操作系统&#xff1a;XP、Win7、Win8、Win10 简要介绍&#xff1a; 910X 系列是阿尔泰科技公司推出的 PCIe、PXIe 总线的任意波形发生器&…
阅读更多...
Facebook 隐私保护技术的发展与未来趋势

Facebook 隐私保护技术的发展与未来趋势

Facebook 隐私保护技术的发展与未来趋势 在这个数字化时代&#xff0c;个人隐私保护已成为全球关注的焦点。Facebook&#xff0c;作为全球最大的社交网络平台之一&#xff0c;其在隐私保护技术的发展上扮演着重要角色。本文将探讨 Facebook 在隐私保护技术方面的进展&#xff…
阅读更多...
Python基于Django的医用耗材网上申领系统【附源码、文档说明】

Python基于Django的医用耗材网上申领系统【附源码、文档说明】

博主介绍&#xff1a;✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023