跳转 · TUNA-daily

[TOC] ## 1. js跳转 ### 1.1 wx.navigateTo(OBJECT) **保留当前页面**，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 ~~~ OBJECT 参数说明：参数类型必填说明 url String 是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2' success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行） ~~~ 示例代码： ~~~ wx.navigateTo({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } }) ~~~ 注意：目前页面路径最多只能十层。 ### 1.2 wx.redirectTo(OBJECT) **关闭当前页面**，跳转到应用内的某个页面。如果跳回父页面，则父页面存在两个，也就说需要在父页面返回两次，才能回到主页面 ~~~ OBJECT 参数说明：参数类型必填说明 url String 是需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2' success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行） ~~~ 示例代码： ~~~ wx.redirectTo({ url: 'test?id=1' }) ~~~ ### 1.3 wx.reLaunch(OBJECT) 基础库 1.1.0 开始支持，低版本需做兼容处理 **关闭所有页面**，打开到应用内的某个页面。 ~~~ OBJECT 参数说明：参数类型必填说明 url String 是需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数 success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行） ~~~ 示例代码： ~~~ wx.reLaunch({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } }) ~~~ ### 1.4 wx.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 ~~~ OBJECT 参数说明：参数类型必填说明 url String 是需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数 success Function 否接口调用成功的回调函数 fail Function 否接口调用失败的回调函数 complete Function 否接口调用结束的回调函数（调用成功、失败都会执行） ~~~ 示例代码： ~~~ { "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] } } wx.switchTab({ url: '/index' }) ~~~ ### 1.5 wx.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 **getCurrentPages() ** 获取当前的页面栈，决定需要返回几层。 ~~~ OBJECT 参数说明：参数类型默认值说明 delta Number 1 返回的页面数，如果 delta 大于现有页面数，则返回到首页。 ~~~ 示例代码： ~~~ // 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面 wx.navigateTo({ url: 'B?id=1' }) // 此处是B页面 wx.navigateTo({ url: 'C?id=1' }) // 在C页面内 navigateBack，将返回A页面 wx.navigateBack({ delta: 2 }) ~~~ Tip tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面 #### 实例返回上一页面，并刷新。利用onShow()生命周期函数。 A 页面： ~~~ /** * 页面的初始数据 */ data: { onLoadNum:0 //onload执行次数，避免因为onShow导致初始化时onLoad执行两次 }, //加载数据，渲染页面 onLoad: function(options) { var _this = this; console.log("onload....."); this.setData({ onLoadNum: this.data.onLoadNum +1 }); wx.request({ url: app.globalData.pubSiteUrl + 'user-information/get-information', method: 'GET', header: { 'Content-Type': 'application/json', 'Cookie': 'SESSION=' + wx.getStorageSync("sessionId") }, success: function(res) { if (res.data.code == 1) { _this.setData({ phone: res.data.user.phone, password: res.data.user.password }) } }, }) }, /** * 生命周期函数--监听页面显示 */ onShow: function() { if (this.data.onLoadNum == 1) { this.setData({ onLoadNum: this.data.onLoadNum + 1 }); return;// 第一次onload，不重复调用onload,但是增加1区别状态 } else { this.onLoad(); // 重新加载 }; }, ~~~ B 子页面 ~~~ wx.navigateBack(); // 退回A ~~~ ## 2. 页面跳转 1. 跳转 navigator ：页面连接 ~~~ <navigator class='content-btn' url='../safe_setting_bindmail/safe_setting_bindmail?type=1' > <button bind:click="handleClick">更改</button> </navigator> ~~~ url:跳转路径?参数1=value1&参数2=value2 2. 取值参数会传给跳转目标页面的onLoad方法 ~~~ onLoad: function(options) { var opt = options.type; //获取type参数值 ~~~