基础API

(1.)延时

setTimeout(callback, delay, rest):设定一个定时器。在定时到期以后执行注册的回调函数

<template>
	<view class="" >
		<button type="primary" @click="click">打印</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text:'hello'
			}
		},
		methods: {
			click(){
				console.log(this.text)
				var time = setTimeout(()=>{
					console.log(this.text)}
				,2000)
			}
		},
	}
</script>
<style>	
.title{width: 100%;;text-align: center;}
.hover-title{font-size: 30px;}
.scroll-y{height: 40px;}
</style>

(2)页面跳转

<template>
	<view class="" >
		<navigator url="/pages/home/home">
			<button type="primary">跳转</button>
		</navigator>
		<button type="primary" @click="click">api跳转</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			click(){
				uni.redirectTo({
					url:'/pages/home/home',
				})
			}
		},
		onUnload() {
			console.log('index页面关闭')
		}
	}
</script>
<style>	
</style>

(3)数据缓存

<template>
	<view class="" >
		<button type="primary" @click="setInfo">存储</button>
		<button type="primary"@click="setSex">存储性别</button>
		<button type="primary" @click="getinfo">获取</button>
		<button type="primary" @click="setInfoAgain">第二次存储</button>
		<button type="primary"@click="getAll">获取Storage信息</button>
		<button type="primary"@click="removeName">移除姓名</button>
		<button type="primary"@click="removeAll">移除所有</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				setInfo(){
					uni.setStorage({
						key:'name',
						data:'张三',
						success() {
							console.log('success')
						}
					})
				},
				setInfoAgain(){
					uni.setStorage({
						key:'name',
						data:'李四',
						success() {
							console.log('success')
						}
					})
				},
				getinfo(){
					uni.getStorage({
						key:"name",
						success(res) {
							console.log(res.data)
						}
					})
				},
				setSex(){
					uni.setStorage({
						key:'sex',
						data:'男',
						success() {
							console.log('success')
						}
					})
				},
				getAll(){
					uni.getStorageInfo({
						success(res) {
							console.log(res.keys)
						}
					})
				},
				removeName(){
					uni.removeStorage({
						key:'name',
						success() {
							console.log("移除成功")
						}
					})
				},
				removeAll(){
					uni.clearStorage()
				},
				
			}
		},
		methods: {
		},
	}
</script>
<style>	
</style>

(4)媒体相关

图片:

<template>
	<view class="" >
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
				}
		},
		methods: {
		},
		mounted() {
			uni.chooseImage({
				success(res) {
					console.log(res.tempFilePaths)
					uni.getImageInfo({
						src:res.tempFilePaths[0],
						success(img){
							console.log(img.width)
							console.log(img.height)
						}
					})
				}
			})
		}
		
	}
</script>
<style>	
</style>

视频:

<template>
	<view class="" >
		<view class="">
			<video id="myvideo" class="videobox" src="../../static/2-5.mp4" ></video>
		</view>
		<button type="primary" @click="pause">暂停</button>
		<button type="primary" @click="play">播放</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				}
		},
		methods: {
			pause(){
				this.videoContext.pause()
			},
			play(){
				this.videoContext.play()
			}
		},
		mounted(){
		},
		onLoad() {
			this.videoContext = uni.createVideoContext('myVideo')
		}	
	}
</script>
<style>	
	.videobox{width: 100%;}
</style>

(5)界面相关

显示与隐藏

<template>
	<view class="" >
		<button type="primary" @click="click">按钮</button>
		<button type="primary" @click="hide">隐藏</button>
	</view>
</template>
<script>

	export default {
		data() {
			return {
				}
		},
		methods: {
			click(){
				uni.showToast({
				    title: '标题',
				    duration: 20000
				});
			},
			hide(){
				uni.hideToast();
			}
		},
		mounted(){
			
		},
		onLoad() {
			
		}
		
	}
</script>
<style>	
	
</style>

加载中与隐藏

<template>
	<view class="" >
		<button type="primary" @click="click">按钮</button>
		<!-- <button type="primary" @click="hide">隐藏</button> -->
	</view>
</template>
<script>

	export default {
		data() {
			return {
				}
		},
		methods: {
			click(){
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(()=>{
					uni.hideLoading();
				},2000)
			}
		},
		mounted(){	
		},
		onLoad() {
		}
	}
</script>
<style>	
</style>

设置导航栏的标题

<template>
	<view class="" >
		<button type="primary" @click="click">按钮</button>
		<!-- <button type="primary" @click="hide">隐藏</button> -->
	</view>
</template>
<script>

	export default {
		data() {
			return {
				}
		},
		methods: {
			click(){
				uni.setNavigationBarTitle({
				    title: '新的标题'
				});
			}
		},
		mounted(){	
		},
		onLoad() {	
		}	
	}
</script>
<style>		
</style>

页面与窗体

index

<template>
	<view class="" >
		<button type="primary" @click="click">传值</button>
	</view>
</template>
<script>
	
	export default {
		data() {
			return {
				}
		},
		methods: {
			click(){
				uni.$emit('change',{id:1,name:'张三'})
			}
		}
		
	}
</script>
<style>	
	
</style>

home

<template>
	<view>
		home
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		},
		onLoad() {
			uni.$on('change',function(data){
				console.log(data.name)
			})
		}
	}
</script>

<style>

</style>