uni-app VUE的使用

最新推荐文章于 2025-05-20 17:06:41 发布

矮小的

最新推荐文章于 2025-05-20 17:06:41 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-App

本文链接：https://blog.youkuaiyun.com/crazyo2jam/article/details/103792878

uni-App 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解了uni-app框架的使用，涵盖了模板语法、全局事件、页面生命周期、样式与布局、v-for循环、事件绑定等内容。提供了丰富的代码示例，帮助读者理解如何在不同平台上构建一致的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板语法

<template>
		<view class="">我是页面3</view>
</template>
<script>
	export default {
		data() {//数据层
			return {//变量K:V}
		},methods: {//函数方法  注意是: 不是()
		},onLoad(option) {//加载函数
		}
	}
</script>
<style>
	page {background-color:#ccc;}
</style>

应用全局事件

需要写在app.vue内其他页面无效

函数名	说明
onLaunch	应用加载完毕(只执行一次)
onShow	后台切换小程序/app
onHide	小程序/app切换到后台
onError	报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

	export default {
		onLaunch: function() {
			console.log('app初始化完毕')
		},
		onShow: function() {
			console.log('已跳入app')
		},
		onHide: function() {
			console.log('app已切换到后台')
		},
		onError: function(){
			console.log('app报错')
		},
		onUniNViewMessage: function(){
			console.log('nvue 页面发送的数据进行监听')
		}
	}

当我们在手机运行或小程序运行时通过控制台可以看到

页面声明周期函数

函数名	说明	平台差异说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	5+ App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5 1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5 1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5 1.6.0

写在app.vue里面判断平台类型

onLaunch: function() {
			console.log('app初始化完毕')
			switch(uni.getSystemInfoSync().platform){
			    case 'android':
			       console.log('运行Android上')
			       break;
			    case 'ios':
			       console.log('运行iOS上')
			       break;
			    default:
			       console.log('运行在开发者工具上')`在这里插入代码片`
			       break;
			}
		},

页面样式与布局

大大

px rpx rem就不多说了说一下 vh和vw
注意的是plus的设置只支持px

<view class="" style="width: 10vw;height:50vh;background: #007AFF;">
vh ，视窗高度，1vh等于视窗高度的1%
vw ，视窗宽度，1vw等于视窗宽度的1%
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。

具体详见点我

样式导入

<style>
    @import "../../common/uni.css";
    .uni-card { box-shadow: none;}
</style>

page相当于body

<style>
	page { background-color:#ccc;}

样式绑定方法小实例大家可以复制赞帖注意的是三目用[],间三目用{},动态用{}

<template>
	<view class="">
		<view :class="{ color1: type }">我是页面</view>
		<view :class="[type ? 'color3':'color2']">我是页面</view>
		<view :style="{fontSize:fontSize+'px'}">{{fontSize}}</view>
	</view>
</template>

<script>
	var time;
	export default {
		data() {
			return {
				type:true,
				fontSize:1
			}
		},methods: {//函数方法
		},onLoad(option) {//页面加载
		   var that=this
		   that.time=setInterval(function(){
			   that.fontSize=that.fontSize+1;
			   console.log(that.fontSize);
			   if(that.fontSize==25){
               clearInterval(that.time)
			   }
		   },300)
		}
	}
</script>

<style>
 .color1{ color: #007AFF;}
 .color2{ color:#4CD964;}
 .color3{ color:red;}
</style>

v-for 循环

objectArray:[{id:1,name:"xiao1"},{id:2,name:"xiao1"}]
stringArray:["x1","x2"]
        <!-- array 中 item 的某个 property -->
        <view v-for="(item,index) in objectArray" :key="item.id">
            {{index +':'+ item.name}}
        </view>
        <!-- item 本身是一个唯一的字符串或者数字时，可以使用 item 本身 -->
        <view v-for="(item,index) in stringArray" :key="item">
            {{index +':'+ item}}
        </view>

事件

WEB事件	UNI-APP事件
click	tap
touchstart	touchstart
touchmove	touchmove
touchcancel	touchcancel
touchend	touchend
tap	tap
longtap	longtap
input	input
change	change
submit	submit
blur	blur
focus	focus
reset	reset
confirm	confirm
columnchange	columnchange
linechange	linechange
error	error
scrolltoupper	scrolltoupper
scrolltolower	scrolltolower
scroll	scroll

当点击红色区域显示为2222 点击蓝色为1111 获取参数时要注意一定尽量用target
在这里插入图片描述
小案例

<template>
	<view class="" id="111111" @tap="tapview" style="width:100vw;height: 60vh;background: #0081FF;">
		<view class="" id="22222"  style="width:50vw;height: 30vh;background: red;">
			</view>
	</view>
</template>

<script>
	var time;
	export default {
		data() {
			return {
			}
		},methods: {//函数方法
		      tapview(e){
				console.log(e);
				console.log("target:"+e.target.id);
				console.log("currentTarget"+e.currentTarget.id);
			  }
		},onLoad(option) {//页面加载

		}
	}
</script>

<style>
 .color1{ color: #007AFF;}
 .color2{ color:#4CD964;}
 .color3{ color:red;}
</style>