模板语法
<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>