数据绑定
可以通过{{}}来加载定义在data中的数据,也可以通过v-bind对属性进行绑定
生命周期
onLaunch:当uni-app 初始化完成时触发(全局只触发一次)
onShow:当 uni-app 启动,或从后台进入前台显示
onHide:当 uni-app 从前台进入后台
onError:当 uni-app 报错时触发
onUniNViewMessage:对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯
onUnhandledRejection:对未处理的 Promise 拒绝事件监听函数
onPageNotFound:页面不存在监听函数
onThemeChange:监听系统主题变化
页面的生命周期
onInit:监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad
onLoad:监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow:监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady:监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide:监听页面隐藏
onUnload:监听页面卸载
onResize:监听窗口尺寸变化
onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新
onReachBottom:页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap:点击 tab 时触发,参数为Object,具体见下方注意事项
onShareAppMessage:用户点击右上角分享
onPageScroll:监听页面滚动,参数为Object
onNavigationBarButtonTap:监听原生标题栏按钮点击事件,参数为Object
onBackPress:监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。
onNavigationBarSearchInputChanged:监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed:监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发
onNavigationBarSearchInputClicked:监听原生标题栏搜索输入框点击事件
onShareTimeline:监听用户点击右上角转发到朋友圈
onAddToFavorites:监听用户点击右上角收藏
组件的生命周期
beforeCreate:在实例初始化之后被调用
created:在实例创建完成后被立即调用
beforeMount:在挂载开始之前被调用
mounted:挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick
beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
事件定义和传参
定义事件
给按钮绑定点击事件
<button type="default" @click="handleEvent">点击事件</button>
事件传参
传递参数
<button type="default" @click="handleEvent('天亮教育')">点击事件</button>
获取event数据
在这里我们就会遇到这样的一个问题,我们进行事件传参之后就无法获取到事件元数据了,如果我们需要获取到事件元数据,需要使用$event,将事件元数据传递过来。
<button type="default" @click="handleEvent('天亮教育',$event)">点击事件</button>
监听事件
uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数
uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器
移除监听
uni.$off([eventName, callback])
移除全局自定义事件监听器
导航跳转
利用navagator进行跳转
该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册
url:应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加 .vue 后缀
open-type:默认值:navigate:跳转方式
delta:当 open-type 为 'navigateBack' 时有效,表示回退的层数
animation-type:默认值:pop-in/out:当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果:app使用
animation-duration:默认值:300:当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间:app使用
hover-class:默认值:navigator-hover:指定点击时的样式类,当hover-class="none"时,没有点击态效果
hover-stop-propagation:默认值:false:指定是否阻止本节点的祖先节点出现点击态:微信小程序使用
hover-start-time:默认值:50:按住后多久出现点击态,单位毫秒
hover-stay-time:默认值:600:手指松开后点击态保留时间,单位毫秒
target:默认值:target:在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram:微信2.0.7+、百度2.5.2+、QQ使用
open-type 有效值
navigate:对应 uni.navigateTo 的功能
redirect:对应 uni.redirectTo 的功能
switchTab:对应 uni.switchTab 的功能
reLaunch:对应 uni.reLaunch 的功能
navigateBack:对应 uni.navigateBack 的功能
exit:退出小程序,target="miniProgram"时生效
注意
-
跳转tabbar页面,必须设置open-type="switchTab"
-
navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色。
-
app-nvue 平台只有纯nvue项目(render为native)才支持 <navigator>。非render为native的情况下,nvue暂不支持navigator组件,请使用API跳转。
-
app下退出应用,Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。
利用编程式跳转
Uni中可以通过uni.navigateTo进行路由跳转,api的使用上和微信小程序一致,只是将调用从wx.改为了uni.
除此之外另外几个api也和微信小程序用法是一致的,只需要改一下调用前缀即可,如:
uni.navigateTo:跳转到指定界面
uni. redirectTo:关闭当前页面,跳转到应用内的某个页面
uni.reLaunch:关闭所有界面打卡应用内的某个界面
uni.switchTab:切换到tabbar界面
uni.navigateBack:返回到指定界面
跳转传参
路由跳转的时候可以通过?拼接参数。
<navigator url="../message/message?id=99">界面跳转传参</navigator>
获取路由参数,在界面的onLoad方法中获取
onLoad(options) {
console.log(options)
}