uni-app知识点
- 一、对uni-app的理解
- 二、对事件总线的理解
- 三、uni-app中跨平台设置代码----条件注释
- 四、uni-app中路由跳转和传参
- 五、uni-app中生命周期
一、对uni-app的理解
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多个平台。
Uni-app的优势
1、跨平台更多，真正做到一套代码多端发行，支持原生代码混写和原生sdk集成。
2、运行体验更好。组件、api与微信小程序一致，兼容weex原生渲染。
3、通用技术栈，学习成本更低。Vue的语法，微信小程序的api，对于前端开发人员来说更容易上手。
4、开放生态，组件更丰富。支持通过npm安装第三方包；支持微信小程序自定义组件及sdk；兼容mpvue组件及项目；app端支持与原生混合编码；
二、对事件总线的理解
事件总线像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。事件总线多用于兄弟组件的通信。
触发事件 | uni.$emit(eventName,OBJECT) | 在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。 |
监听事件 | uni.$on(eventName,callback) | 监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。 |
只监听一次 | uni.$once(eventName,callback) | 监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。 |
移除监听 | uni.$off([eventName, callback]) | 移除全局自定义事件监听器。 |
uni.$emit('update',{msg:'页面更新'})
uni.$on('update',function(data){
console.log('参数 msg 为：' + data.msg);
})
uni.$once('update',function(data){
console.log('参数 msg 为：' + data.msg);
})
uni.$off()//移除所有事件监听器移除监听注意事项 1、如果没有提供参数，则移除所有的事件监听器；
2、如果只提供了事件，则移除该事件所有的监听器；
3、如果同时提供了事件与回调，则只移除这个回调的监听器；
4、提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
三、uni-app中跨平台设置代码----条件注释
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称
条件编译 | 说明 |
#ifdef APP-Plus | 仅出现在 App 平台下的代码 |
#ifndef H5 | 除了 H5 平台，其它平台均存在的代码 |
#ifdef ifdef H5 || MP-WEIXIN | 在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集） |
%PLATFORM%的值 | 平台 |
APP-PLUS | App |
APP-PLUS-NVUE或APP-NVUE | App nvue |
H5 | H5 |
MP-ALIPAY | 支付宝小程序 |
MP-BAIDU | 百度小程序 |
MP-TOUTIAO | 字节跳动小程序 |
MP-QQ | QQ小程序 |
MP-360 | 360小程序 |
四、uni-app中路由跳转和传参
跳转方式 | 特点 |
uni.navigateTo | 保留当前页面，只能跳转非tabBar页面 |
uni.switchTab | 关闭所有非tabbar页面，只能打开tabbar页面 |
uni.redirectTo | 关闭卸载当前页面，只能打开非tabBar页面 |
uni.reLaunch | 关闭卸载所有页面，可以打开任意页面 |
uni.navigateBack | 返回上一页面 delta：返回页数 |
<navigator > | open-type属性决定跳转方式 |
传参
路由跳转的时候可以通过？拼接参数。
<navigator url="../message/message?id=99">界面跳转传参</navigator>
//获取路由参数，在界面的onLoad方法中获取
onLoad(options) {
console.log(options)
},五、uni-app中生命周期
界面和应用的生命周期采用的绝大多数是小程序的生命周期
组件的生命周期采用的是vue的生命周期。1、app
在App.vue中
生命周期函数 | 介绍 |
onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
onShow | 当 uni-app 启动，或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
onUniNViewMessage | 对 nvue 页面发送的数据进行监听 |
onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数 |
onPageNotFound | 页面不存在监听函数 |
onThemeChange | 监听系统主题变化 |
2、pages
pages的index.vue中
参考官网 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
生命周期函数 | 介绍 |
onInit | 监听页面初始化，其参数同 onLoad 参数触发时机早于 onLoad |
onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参） |
onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
onResize | 监听窗口尺寸变化 |
onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新 |
onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），触底 |
onTabItemTap | 点击 tab 时触发，参数为Object |
onShareAppMessage | 用户点击右上角分享 |
onPageScroll | 监听页面滚动，参数为Object |
onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object |
onBackPress | 监听页面返回 |
onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 |
onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 |
onShareTimeline | 监听用户点击右上角转发到朋友圈 |
onAddToFavorites | 监听用户点击右上角收藏 |
3、components
在components的component.vue中
生命周期函数 | 介绍 |
beforeCreate | 在实例初始化之后被调用 |
created | 在实例创建完成后被立即调用 |
beforeMount | 在挂载开始之前被调用 |
mounted | 挂载到实例上去之后调用 |
beforeUpdate | 数据更新时调用 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 |
beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 |
destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 |
