小程序：uniapp 第四弹(平台区分|生命周期 | 页面通讯 | 路由)

小程序：uni学习第四弹之生命周期 | 页面通讯 | 路由

获取对应平台

• uni.getSystemInfoSync().platform

• demo

const platform = uni.getSystemInfoSync().platform;

// 区分不同平台
switch(platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    case 'other':
        console.log('运行浏览器上')
    default:
       // platform: devtools
       console.log('运行在开发者工具上')
       break;
}

---

1. 生命周期

• 应用生命周期

  • 仅可在App.vue中监听，在其它页面监听无效
  • onlaunch里进行页面跳转，如遇白屏报错，参考

  	- onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
  	- onShow		当 uni-app 启动，或从后台进入前台显示
  	- onHide		当 uni-app 从前台进入后台
  	- onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
  

• 页面生命周期

  	- onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
  	- onShow：
  		- 监听页面显示 
  		- 触发包含：页面每次出现在屏幕上 和 从下级页面点返回露出当前页面
  	- onReady：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  	- onHide：监听页面隐藏
  	- onUnload：监听页面卸载
  	- onResize：监听窗口尺寸变化
  	- onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新
  	- onReachBottom：
  		- 页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据
  		- 使用scroll-view导致页面级没有滚动，则触底事件不会被触发
  	- onPageScroll：object | 监听页面滚动
  

2. 页面通讯

• 触发全局的自定事件：：uni.$emit(eventName,object)

  • demo： uni.$emit(‘add’, { val: 5 })
  • 参数： eventName：事件名 | object：触发事件携带的附加参数

• 监听全局的自定义事件：uni.$on(eventName,callback)

  • demo ：

  	 uni.$on('update',function(data){
          console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
      })
      OR
  	uni.$on('add', this.add);
  	add(newVal) { 	this.val += newVal  }
  

  • 参数：eventName：事件名 | callback：事件的回调函数

• 监听全局的自定义事件：uni.$once(eventName,callback)

  • demo ：uni.$once(‘add’,this.add)
  • 参数： eventName：事件名 | callback：事件的回调函数
  • 只触发一次,在第一次触发之后移除监听器

• 移除全局自定义事件监听器：uni.$off([eventName, callback])

  • demo : uni.$off{(}^{\prime }updat{e}^{\prime },this.update)||uni.$off()
  • 参数: eventName：Array＜String＞ 事件名 | object：触发事件携带的附加参数
  • Tips
    - 如果没有提供参数，则移除所有的事件监听器；
    - 如果只提供了事件，则移除该事件所有的监听器；
    - 如果同时提供了事件与回调，则只移除这个回调的监听器；
    - 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

3. 路由

• uni.navigateTo(object): 保留当前页面，跳转到应用内的某个页面

  • demo

  	// 跳转到test.vue页面并传递参数
  	uni.navigateTo({
  	    url: 'test?id=1&name=uniapp'
  	});
  	
  	 - url有长度限制，太长的字符串会传递失败，
  		 - 解决：使用窗体通信 | 全局变量 | encodeURIComponent等
  		 - demo：encodeURIComponent
  			<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
  	
  	// 在test.vue页面接受参数
  	onLoad: function (option) {
          console.log(option.id + '-' + option.name); 
          // 使用 encodeURIComponent
          const item = JSON.parse(decodeURIComponent(option.item));
      }
  

  • 参数
    • url
      • 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数
      • path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
    • animationType：窗口显示的动画效果
    • animationDuration ：窗口动画持续时间，单位 ms
    • success | fail | complete

---

• uni.redirectTo(object)：关闭当前页面，跳转到应用内的某个页面
  • demo

  		uni.redirectTo({
  		    url: 'test?id=1'
  		});
  

  • 参数

    • url
      - 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数
    • success | complete | fail

  • 注意

    • 跳转到 tabBar 页面只能使用 switchTab 跳转

---

• uni.reLaunch(object)：关闭所有页面，打开到应用内的某个页面

  • demo

  	uni.reLaunch({
  	    url: 'test?id=1'
  	});
  	
   	onLoad: function (option) {
          console.log(option.id);
      }
  

  • 参数

    • url：
      • 需要跳转的应用内页面路径 , 路径后可以带参数
      • *跳转的页面路径是 tabBar 页面则不能带参数
    • success | complete | fail

  • 注意

    • 调用了 uni.preloadPage(object) 则不会关闭，仅触发生命周期 onHide

---

• uni.switchTab(object)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

  • demo

  	uni.switchTab({
  	    url: '/pages/index/index'
  	});
  

  • 参数

    • url：需要跳转的 tabBar 页面的路径
      • 需在 pages.json 的 tabBar 字段定义的页面
      • 路径后不能带参数
    • success | complete | fail

  • 注意

    • 跳转到 tabBar 页面只能使用 switchTab 跳转
    • 调用了 uni.preloadPage(object) 则不会关闭，仅触发生命周期 onHide

---

• uni.navigateBack(object)：关闭当前页面，返回上一页面或多级页面
  • demo

    	uni.navigateBack({
    	    delta: 2
    	})
    

  • 参数
    • delta：number | 返回的页面数，如果 delta 大于现有页面数，则返回到首页
    • animationType：窗口关闭的动画效果
    • animationDuration：窗口关闭动画的持续时间，单位为 ms

---

• uni.preloadPage(object)：预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快

  • demo

  	uni.preloadPage({url: "/pages/test/test"});
  

  • 参数
    • url
    • complete | fail

---

4. 窗口动画

• 有效的路由 API: navigateTo | navigateBack

	uni.navigateTo({
	    url: '../test/test',
	    animationType: 'pop-in',
	    animationDuration: 200
	});
	uni.navigateBack({
	    delta: 1,
	    animationType: 'pop-out',
	    animationDuration: 200
	});

• open-type 有效值

	<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
	<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

• pages.json 中配置的是窗口显示的动画

	"style": {
	    "app-plus": {
	        "animationType": "fade-in",
	        "animationDuration": 300
	    }
	}

• 显示 | 关闭动画规则
  • slide-in-right slide-out-right 新窗体从右侧进入
  • slide-in-left slide-out-left 新窗体从左侧进入
  • slide-in-top slide-out-top 新窗体从顶部进入
  • slide-in-bottom slide-out-bottom 新窗体从底部进入
  • pop-in pop-out 新窗体从左侧进入，且老窗体被挤压而出
  • fade-in fade-out 新窗体从透明到不透明逐渐显示
  • zoom-out zoom-in 新窗体从小到大缩放显示
  • zoom-fade-out zoom-fade-in 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示

---

5. 应用级事件

- uni.onPageNotFound：监听应用要打开的页面不存在事件
- uni.onError：监听小程序错误事件
- uni.onAppShow：监听应用切前台事件
- uni.onAppHide：监听应用切后台事件
- uni.offPageNotFound：取消监听应用要打开的页面不存在事件
- uni.offError：取消监听应用错误事件
- uni.offAppShow：取消监听小程序切前台事件
- uni.offAppHide：取消监听小程序切后台事件