uni-app+vue3学习随笔

发布于：2025-03-12 ⋅ 阅读:(17) ⋅ 点赞:(0)

目录相关

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、通过切片功能来模拟量图工具

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布