uni-app的基本语法和规范
2021-01-18 本文已影响0人
五四青年_4e7d
生命周期函数
image.png
<template>
<view class="content">
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
></uni-calendar>
<testList :title="msg" @myEdits="getNums"></testList>
<text>子组件传递的数据{{num}}</text>
<testa> </testa>
<testb> </testb>
<view class="text-area">
<image v-for="(item,i) in imgArrs" :src="item" @click="perivImgs(item)"></image>
样式
</view>
<view class="iconfont icon-ningmeng-01" style="color:red"></view>
<button @click="but(2,$event)">点击$event</button>
<button @click="pull">点击页面刷新</button>
<button @click="getUrls">发送数据请求</button>
<button @click="setSlosge">异步设置存储</button>
<button @click="getSlosge">异步获取存储</button>
<button @click="removeSlosge">异步移除存储</button>
<button @click="asyncLoacl">同步设置数据存储</button>
<button @click="chooseImsgs">上传图片</button>
<navigator url="/pages/datail/datail">跳转详情页面</navigator>
<navigator url="/pages/message/message" open-type="switchTab">跳转tabar页面</navigator>
<navigator url="/pages/datail/datail" open-type="redirect">跳转（没有箭头返回）</navigator>
<button @click="goUrls">编程导航，点击跳转</button>
<button @click="messUrs">编程导航，跳转taber页面</button>
<button @click="deatisur">编程导航，跳转详情，关闭当前页面</button>
<!-- #ifdef H5 -->
<view>在h5可见（条件编译）</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>在小程序中可见（条件编译）</view>
<!-- #endif -->
</view>
</template>
<script>
//引入一个组件
import test from '../../components/test.vue'
import testa from '../../components/a.vue'
import testb from '../../components/b.vue'
//下载导入日历组件
import uniCalendar from '../../components/uni-calendar/uni-calendar.vue'
export default {
components: {
testList: test,
testa,
testb,
uniCalendar,
},
data() {
return {
msg: 'msg(父组件)',
title: '允许选中',
imgArrs: [],
num: '',
}
},
//监听页面下拉刷新
onPullDownRefresh: function() {
console.log('触发了下拉刷新')
setTimeout(() => {
console.log('延迟下拉刷新')
uni.stopPullDownRefresh()
}, 2000)
},
//监听页面上拉加载
onReachBottom: function() {
console.log('页面触底了')
},
onLoad(options) {
// #ifdef H5
console.log('h5打印')
// #endif
// #ifdef MP-WEIXIN
console.log('微信打印')
// #endif
console.log('页面加载')
console.log('可以获取上个页面传递的参数', options)
},
onShow: function() {
console.log('页面显示了')
},
onReady: function() {
console.log('页面初次加载完成')
},
onHide: function() {
console.log('页面隐藏了')
},
methods: {
change(e) {
console.log(e);
},
but(n, e) {
console.log(n, e)
},
//点击刷新方法：
pull() {
uni.startPullDownRefresh()
},
//发送数据请求：
getUrls() {
uni.request({
url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video',
success(res) {
console.log(res)
}
})
},
//设置存储数据
setSlosge() {
uni.setStorage({
key: 'id',
data: 80,
success() {
console.log('存储成功')
}
})
},
//获取数据
getSlosge() {
uni.getStorage({
key: 'id',
success(res) {
console.log('获取成功', res)
}
})
},
//移除存储：
removeSlosge() {
uni.removeStorage({
key: 'id',
success() {
console.log('删除成功')
}
})
},
//同步设置存储
asyncLoacl() {
//设置
uni.setStorageSync('num', 101)
//获取
const res1 = uni.getStorageSync('num')
console.log(res1)
//删除
setTimeout(() => {
uni.removeStorageSync('num')
}, 2000)
},
//上传图片：
chooseImsgs() {
uni.chooseImage({
count: 5, //h5中限制不住
success: res => {
console.log(res)
this.imgArrs = res.tempFilePaths
}
})
},
//点击图片预览：
perivImgs(current) {
console.log(current)
uni.previewImage({
current,
urls: this.imgArrs,
indicator: 'number'
})
},
//编程导航点击跳转
goUrls() {
uni.navigateTo({
url: '/pages/datail/datail?id=80'
})
},
//编程导航跳转tabar
messUrs() {
uni.switchTab({
url: '/pages/message/message'
})
},
//跳转到详情关闭当前页面
deatisur() {
uni.redirectTo({
url: '/pages/datail/datail'
})
},
//获取子组件数据：
getNums(num) {
console.log(num)
this.num = num
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
/* #ifdef H5*/
.text-area {
width: 750rpx;
height: 1350rpx;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN*/
.text-area {
width: 750rpx;
height: 1350rpx;
background: #007AFF;
}
/* #endif */
.title {
font-size: 36rpx;
color: #8f8f94;
}
.box-active {
background: red;
}
</style>
<template>
<view>
a组件{{num}}
<button @click="addNums">修改B组件数据</button>
</view>
</template>
<script>
export default {
data() {
return {
num:1
}
},
beforeCreate() {
},
methods: {
addNums(){
uni.$emit('updateNum',10)
}
},
created() {
},
mounted() {
}
}
</script>
<style>
</style>
<template>
<view>
b组件{{num}}
</view>
</template>
<script>
export default {
data() {
return {
num:2
}
},
beforeCreate() {
},
methods: {
},
created() {
uni.$on('updateNum',num=>{
this.num+=num
})
},
mounted() {
}
}
</script>
<style>
</style>
<template>
<view>
test
<text>父组件传递的数据：{{title}}</text>
<button @click="dataFuter()">点击（给父组件传数据）</button>
</view>
</template>
<script>
export default {
data() {
return {
nums:68
}
},
props:['title'],
beforeCreate() {
console.log('组件初始化')
},
methods: {
dataFuter(){
//定义自定义事件
this.$emit('myEdits',this.nums)
}
},
created() {
console.log('数据')
},
mounted() {
console.log('demo')
}
}
</script>
<style>
</style>
