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

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

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) }

【uniApp的学习开发小程序（三）路由跳转和页面跳转及应用生命周期】4、跳转的动画效果

文章图片

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

3、应用生命周期生命周期官方文档
应用生命周期仅可在App.vue 中监听，在其它页面监听无效。

文章图片

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

文章图片

4、页面生命周期

> 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: {} }

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 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）