uni-app

最新推荐文章于 2025-03-26 16:08:57 发布

原创最新推荐文章于 2025-03-26 16:08:57 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #servlet

数据绑定

可以通过{{}}来加载定义在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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

事件定义和传参

定义事件

给按钮绑定点击事件

事件传参

传递参数

获取event数据

在这里我们就会遇到这样的一个问题，我们进行事件传参之后就无法获取到事件元数据了，如果我们需要获取到事件元数据，需要使用$event，将事件元数据传递过来。

监听事件

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方法中获取