uniapp常用API介绍和实例

小程序加载事件

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

页面加载事件

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

存储数据

uni.setStorage
uni.setStorageSync

eg1:

uni.setStorage({key:&＃39;id&＃39;,data:80,success(){console.log("存储成功&＃xff01;")}
})


eg2:

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


获取数据

uni.getStorage
uni.getStorageSync

eg1:

uni.getStorage({key:&＃39;id&＃39;,success:(res)&＃61;>{console.log("获取成功!",res.data)}})


eg2:

var res &＃61; uni.getStorageSync("id");
console.log(res)


移除数据

uni.removeStorage
uni.removeStorageSync

eg1:

uni.removeStorage({key:&＃39;id&＃39;,success(){console.log("移除id成功&＃xff01;")}
})


eg2:

uni.removeStorageSync("id")


上传图片&预览图片

uni.chooseImage
uni.previewImage

<template><view class&＃61;""><button type&＃61;"default" &＃64;click&＃61;"chooseImage">上传图片button><image v-for&＃61;"item in imgArr" :src&＃61;"item" mode&＃61;"" &＃64;click&＃61;"previewImg(item)">image>view>
template><script>export default{data(){return{imgArr:[]}},methods:{chooseImage(){uni.chooseImage({count:8,success:res&＃61;>{this.imgArr &＃61; res.tempFilePaths}})},previewImg(current){uni.previewImage({current,urls:this.imgArr})}}}
script>


导航跳转

navigator 页面跳转

其中open-type属性的取值

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

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

<template><view class&＃61;""><navigator url&＃61;"../detail/detail">navigatornavigator><navigator url&＃61;"../index/index" open-type&＃61;"switchTab">switchTabnavigator><navigator url&＃61;"../detail/detail" open-type&＃61;"redirect">redirectnavigator><button type&＃61;"default" &＃64;click&＃61;"navigateTo">navigateTobutton><button type&＃61;"default" &＃64;click&＃61;"switchTab">switchTabbutton><button type&＃61;"default" &＃64;click&＃61;"redirectTo">redirectTobutton><button type&＃61;"default" &＃64;click&＃61;"reLaunch">reLaunchbutton>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 数据更新时调用,&＃xff0c;发生在虚拟 DOM 打补丁之前&＃xff0c;h5适用
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁&＃xff0c;在这之后会调用该钩子,h5适用
beforeDestory 销毁之前调用
destroyed 实例销毁后调用

1.创建一个demo.vue组件

<template><view id&＃61;"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 &＃61; setInterval(()&＃61;>{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&＃61;""><demo v-if&＃61;"flag">demo><button type&＃61;"default" &＃64;click&＃61;"toggleBtn">切换button>view>
template>
<script>import demo from "../../components/demo.vue"export default{data(){return{flag:true}},components:{demo},methods:{toggleBtn(){this.flag&＃61;!this.flag}}}
script>


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

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

<template><view>这是一个自定义组件 {{msg}}<button type&＃61;"primary" &＃64;click&＃61;"sendMsg">给父组件传值button>view>
template><script>export default {data () {return {status: &＃39;打篮球&＃39;}},props: {msg: {type: String,value: &＃39;&＃39;}},methods: {sendMsg () {this.$emit(&＃39;myEvent&＃39;,this.status)}}}
script>


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

<template><view><test :msg&＃61;"msg" &＃64;myEvent&＃61;"getMsg">test>view>
template>
<script>import test from "&＃64;/components/test/test.vue"export default {data () {return {msg: &＃39;hello&＃39;}},methods: {getMsg (res) {console.log(res)}},components: {test}}
script>


页面通讯-兄弟组件传值

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

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

1.a组件

<template><view>a组件<button type&＃61;"default" &＃64;click&＃61;"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&＃61;>{this.num &＃43;&＃61; 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~~