uni-app常用API介绍和实例

小程序加载事件

onLunch 小程序加载完成
onShow 小程序显示
onHide 小程序隐藏
onError 小程序加载错误

页面加载事件

onLoad 页面加载完成了
onShow 页面显示了
onReady 页面初次渲染完成
onHide 页面隐藏了

存储数据

uni.setStorage
uni.setStorageSync

eg1:

uni.setStorage({
	key:'id',
	data:80,
	success(){
		console.log("存储成功！")
	}
})

eg2:

uni.setStorageSync("id","100")

获取数据

uni.getStorage
uni.getStorageSync

eg1:

uni.getStorage({
	key:'id',
	success:(res)=>{
		console.log("获取成功!",res.data)
	}
  })

eg2:

var res = uni.getStorageSync("id");
console.log(res)

移除数据

uni.removeStorage
uni.removeStorageSync

eg1:

uni.removeStorage({
	key:'id',
	success(){
		console.log("移除id成功！")
	}
})

eg2:

uni.removeStorageSync("id")

上传图片&预览图片

uni.chooseImage
uni.previewImage

<template>
	<view class="">
		<button type="default" @click="chooseImage">上传图片</button>
		<image v-for="item in imgArr" :src="item" mode="" @click="previewImg(item)"></image>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imgArr:[]
			}
		},
		methods:{
			chooseImage(){
				uni.chooseImage({
					count:8,
					success:res=>{
						this.imgArr = res.tempFilePaths
					}
				})
			},
			previewImg(current){
				uni.previewImage({
					current,
					urls:this.imgArr
				})
			}
		}
	}
</script>

导航跳转

navigator 页面跳转

其中open-type属性的取值

• [switchTab] 跳转tabbar页面
• [redirect] 关闭当前页面，跳转到应用内的某个页面
• [launch] 关闭所有页面，打开到应用内的某个页面
• [navigateBack] 返回上一页面或多级页面

uni.navigateTo 保留当前页面，跳转到应用内的某个页面
uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.redirectTo 关闭当前页面，跳转到应用内的某个页面
uni.reLaunch 关闭所有页面，打开到应用内的某个页面
uni.navigateBack 关闭当前页面，返回上一页面或多级页面

<template>
	<view class="">
		<navigator url="../detail/detail">navigator</navigator>
		<navigator url="../index/index" open-type="switchTab">switchTab</navigator>
		<navigator url="../detail/detail" open-type="redirect">redirect</navigator>
		<button type="default" @click="navigateTo">navigateTo</button>
		<button type="default" @click="switchTab">switchTab</button>
		<button type="default" @click="redirectTo">redirectTo</button>
		<button type="default" @click="reLaunch">reLaunch</button>
	</view>
</template>
<script>
	export default{
		methods:{
			navigateTo(){
				uni.navigateTo({
					url:"../detail/detail"
				})
			},
			switchTab(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			reLaunch(){
				uni.reLaunch({
					url:"../detail/detail"
				})
			},
			redirectTo(){
				uni.redirectTo({
					url:"../detail/detail"
				})
			}
		}
	}
</script>

组件生命周期

beforeCreate 在实例初始化之后被调用
created 在实例创建完成后被立即调用
beforeMounte 挂载开始之前被调用
mounted 挂载到实例上去之后调用
beforeUpdate 数据更新时调用,，发生在虚拟 DOM 打补丁之前，h5适用
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子,h5适用
beforeDestory 销毁之前调用
destroyed 实例销毁后调用

1.创建一个demo.vue组件

<template>
	<view id="qiqi">
		这是一个test组件
	</view>
</template>
<script>
	export default{
		data(){
			return{
				num:3,
				intId:null
			}
		},
		methods:{
		beforeCreate(){
			console.log("初始化之前",this.num)
		},
		created(){
			console.log("初始化成功",this.num)
			this.intId = setInterval(()=>{
				console.log("aaa")
			},1000)
		},
		beforeMount(){
			console.log("挂载之前", document.getElementById("qiqi"))
		},
		mounted(){
			console.log("挂载成功",document.getElementById("qiqi"))
		},
		destroyed(){
			console.log("销毁了呢")
			clearInterval(this.intId)
		}
	}
</script>

2.在页面中使用组件

<template>
	<view class="">
		<demo v-if="flag"></demo>
		<button type="default" @click="toggleBtn">切换</button>
	</view>
</template>
<script>
	import demo from "../../components/demo.vue"
	export default{
		data(){
			return{
				flag:true
			}
		},
		components:{
			demo
		},
		methods:{
			toggleBtn(){
				this.flag=!this.flag
			}
		}
	}
</script>

组件的通讯-子组件给父组件传值

1.通过$emit触发事件进行传递参数

<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		props: {
			msg: {
				type: String,
				value: ''
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>

2.组件定义自定义事件并接收参数

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>

页面通讯-兄弟组件传值

uni.$emit 触发全局的自定事件

uni.$on 监听全局的自定义事件

1.a组件

<template>
	<view>
		a组件
		<button type="default" @click="addNum">修改</button>
	</view>
</template>
<script>
	export default {
		name:"a",
		data() {
			return {
				
			};
		},
		methods:{
			addNum(){
				uni.$emit("updateNum",10)
			}
		}
	}
</script>

2.b组件

<template>
	<view>
		b组件{{num}}
	</view>
</template>
<script>
	export default {
		name:"b",
		data() {
			return {
				num:0
			};
		},
		created(){
			uni.$on("updateNum",num=>{
				this.num += num
			})
		}
	}
</script>

3.引用组件

<template>
	<view>
		<test-a></test-a>
		<test-b></test-b>
	</view>
</template>
<script>
	import testA from "../../components/a.vue"
	import testB from "../../components/b.vue"
	export default{
			"test-a":testA,
			"test-b":testB,
		},
	}
</script>

Yeah, it’s done. Thanks for watching~~