uniApp的学习开发小程序（三）路由跳转和页面跳转及应用生命周期

1、api组件页面跳转

uniApp有两种页面路由跳转方式：调用API跳转、navigator组件跳转。
在页面建立一个跳转按钮

<button class="defult" @click="tiaozhuan">登录页面</button>

navigateTo：跳转之后有箭头返回

uni.redirectTo ：重定向页面，关闭当前页面，跳转到应用内的某个页面，返回不到原页面。

uni.reLaunch(Object) ：关闭所有页面，打开到应用内的某个页面。导航<后退按钮，无法后退。
uni.switchTab(Object) ：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack(Object) ：关闭当前页面，返回上一页面或多级页面。

uni.navigateBack({
	delta: 1 // 返回的页面数, 1后退上一页面
	animationType: 'slide-out-bottom', // 后退动画
	animationDuration: 300//后退持续时间
})

（1）、普通带参数跳转

tiaozhuan() {
 uni.navigateTo({
  url: '/pages/auth/login?id=1&name=jiang',
  })
},

登录页面采用onload（）方法接收，这个与methods同级

onLoad(option) {
  console.log("id："+option.id+" name："+option.name)
}

(2)、json带参数传参(如果传递过去的是对象，则需要将对象转化成字符串再传参)

tiaozhuan() {
  const params={"id": "1","name":'jianghao'}
  uni.navigateTo({
     url: '/pages/auth/login?params='+ JSON.stringify(params),
     animationType: "slide-in-bottom", //从底部进入的动画 
	 animationDuration: 300 //进入的时间，默认是300毫秒
   })
}

接收页面，先把对象转化为json字符串再通过对象拿到数据

onLoad(option) {
 const params = JSON.parse(option.params)
 console.log("params" + params.id + params.name)
}

（3)|如果传输的东西多，就不能使用json方式进行传参了，就要采用uni自带的转码设置，通过encodeURIComponent将长串的json转码

tiaozhuan() {
	const params = {
		"id": "1",
		"name": 'jianghao',
		"text": "111111111111111111111111111111"
	}
	 uni.navigateTo({
	        url: '/pages/auth/login?params=' + encodeURIComponent(JSON.stringify(params)),
			animationType: "slide-in-bottom", //从底部进入的动画 
			animationDuration: 300 //进入的时间，默认是300毫秒
	  })
},

接收页面
先将传过来的数据解码再通过json解析，转化成对象

onLoad(option) {
	const params = JSON.parse(decodeURIComponent(option.params))
	console.log("params" + params.id + params.name + params.text)
	}

4、跳转的动画效果

2、navigator 组件跳转

navigator 组件类似HTML中的 组件，但只能跳转本地页面。目标页面必须在pages.json中注册。open-type默认是navigate的方式，接收页面也是采用Onload方法接收

<!--navigator默认跳转方式 navigate-->
		<navigator url="/pages/auth/login" open-type="navigate">
			<button> 直接跳转</button>
		</navigator>
		<navigator :url="'/pages/auth/login?params='+ encodeURIComponent(JSON.stringify({id:1,name:'蒋皓洁',text:'呀呀呀呀'}))" open-type="navigate">
			<button> 带参数跳转</button>
		</navigator>
		<navigator url="/pages/order/order" open-type="redirect">
			<button type="default">打开redirect的订单页面</button>
		</navigator>
		<navigator url="/pages/category/category" open-type="switchTab">
			<button type="default">打开tabBar的订单页面</button>
		</navigator>

3、应用生命周期

生命周期官方文档

应用生命周期仅可在App.vue 中监听，在其它页面监听无效。

<script>
	export default {
		onLaunch: function() {
			console.log('应用初始化的时候触发，会触发一次')
			// 可以监听网络变化
		},
		onShow: function() {
			console.log('应用从后台进入前台，会触发多次')
		},
		onHide: function() {
			console.log('应用从前台进入后台，会触发多次')
		},
		onError() {
			// 监听到页面的异常
		}
	}
</script>

4、页面生命周期

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			console.log("监听页面加载，一般用于初始化页面数据，进入页面时候调用一次")
		},
		onShow() {
			console.log("监听页面显示，页面在屏幕上就会被触发")
		},
		onReady() {
			console.log("监听页面初始化完成")
		},
		onHide() {
			console.log("artcile页面隐藏")
		},
		onUnload() {
			console.log("监听页面卸载")
		},
		onResize() {
			console.log("监听窗口的变化")
		},
		onShareAppMessage() {
			console.log("监听小程序端分享按钮")
		},
		onNavigationBarButtonTap(e) {
			console.log("监听原生导航栏分享按钮", e)
			if (e.type == "share") {
				console.log("点击了分享按钮")
			}
			if (e.index == 1) {
				console.log("点击了更多按钮")
			}

		},
		methods: {

		}
	}
</script>

onNavigationBarButtonTap这个是页面卸载pages.json里面的按钮的监听
pages.json中的按钮如下

{
			"path": "pages/artcile/artcile",
			"style": {
				"navigationBarTitleText": "文章",
				"app-plus": {
					"titleNView":{
						"buttons": [
						{
							"type": "share",
							"float": "right"
						},
						{
							"type": "menu"
						},
						{
						//请记住路径前面加上/
							"fontSrc": "/static/icon/iconfont.ttf",
							"text": "\ue8e9"
							}
						]
					}
				}
			}

		}

点击原生按钮都会触发onNavigationBarButtonTap方法，传入一个对象
通过判断e.type值或者判断index的值来判断是哪个按钮，写在第一个的按钮index为0

{
	"color": "#000",
	"float": "right",
	"fontSize": "27px",
	"fontWeight": "normal",
	"index": 0,
	"type": "share"
}

5、组件生命周期

与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

6、运行环境的判断与解决跨端兼容性

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生
产服务器的动态切换。
通过uni.getSystemInfoSync().platform来同步判断，使用的客户端是IOS还是安卓

onLoad() {
			// process.env.NODE_ENV查看当前App所处的环境
			console.log("process.env.NODE_ENV", process.env.NODE_ENV)
			if (process.env.NODE_ENV == 'development') {
				console.log("当前处于开发环境")
				this.url = "开发环境"
			} else {
				console.log("当前处于生产环境 ")
				this.url = "生产环境"
			}
			// 获取客户端平台信息
			// 这样下面的代码只执行到App端
			//  #ifdef APP-PLUS
			//getSystemInfoSync同步获取系统信息
			const platform=uni.getSystemInfoSync().platform
			console.log("platform是",platform)
			this.isIOSapp=uni.getSystemInfoSync().platform=="ios"
			// #endif

		},

条件编译语法

条件编译：是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef ：if defined 仅在某平台存在
#ifndef ：if not defined 除了某平台均存在
%PLATFORM%：平台名称，可取值如下：

条件编译写法说明
#ifdef APP-PLUS
需条件编译的代码
#endif
仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif
除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MPWEIXIN
需条件编译的代码
#endif
在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）