uni-app VUE的使用

本文深入讲解了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监听原生标题栏按钮点击事件,参数为Object5+ 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事件
clicktap
touchstarttouchstart
touchmovetouchmove
touchcanceltouchcancel
touchendtouchend
taptap
longtaplongtap
inputinput
changechange
submitsubmit
blurblur
focusfocus
resetreset
confirmconfirm
columnchangecolumnchange
linechangelinechange
errorerror
scrolltoupperscrolltoupper
scrolltolowerscrolltolower
scrollscroll

当点击红色区域显示为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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值