菜单

微信小程序路由跳转

2020年4月5日 - 澳门太阳娱乐手机登录

背景

时间: 2019-09-25阅读: 218标签: 跳转1.wx.switchTab(Object object)

主要是针对小程序开发中页面之间进行通信的问题,在涉及支付的场景中,用户从页面支付入口进行跳转进行支付之后,回到原来页面,在原来的页面需要进行相应的状态刷新,比如用户身份状态、支付状态、文档或商品情况。

这里的tabBar是底下的导航栏指定的页面,跳转到 tabBar
页面,并关闭其他所有非 tabBar 页面

遇到的问题

参数

在使用百度小程序的 swan.navigateBack
进行回跳页面时,API中的方法参数不支持携带参数,只支持number参数。

Object object

所以就涉及了几个单独页面之间的通信问题。如下主要列出了几个方法,供参考。

属性

swan.navigateBack

类型

参数名

默认值

类型

必填

必填

说明

默认值

urlstring是需要跳转的 tabBar 页面的路径(需在 app.json
的tabBar字段定义的页面),路径后不能带参数。successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

说明

示例代码

澳门太阳娱乐手机登录,delta Number 否 1 返回的页面数,如果 delta
大于现有页面数,则返回到首页1。 success function 否 –
接口调用成功的回调函数 fail function 否 – 接口调用失败的回调函数
complete function 否 – 接口调用结束的回调函数

{ "tabBar": { "list": [ { "pagePath": "index", "text": "首页" }, { "pagePath": "other", "text": "其他" } ] }}

wx.switchTab({ url: '/index'})

解决方法

2.wx.reLaunch(Object object)

主要有以下三种方法,实现各page之间通信。

基础库 1.1.0
开始支持,低版本需做兼容处理。关闭所有页面,打开到应用内的某个页面

解决方法一:利用app.js,设置公共变量

参数

利用app.js的公共特性,将变量挂在APP上。

Object object

// app.js 启动文件App({ globalData: { isLogin: false, userInfo: null, networkError: false, networkType: 'none' }})

属性

在其他页面Page上使用时,使用:

类型

// test.jsconst app = getApp();const commonParams = app.globalData.isLogin;

默认值

但是存在的缺点也十分明显,当数据量比较大、数据关系比较复杂时,维护会比较复杂,逻辑会很混乱。

必填

解决方法二:利用storage

说明

利用小程序的全局storage,对数据进行存取,原理类似于解决方案一。

urlstring是需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用分隔;如
‘path?key=valuekey2=value2’successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

// 存储-异步swan.setStorage({ key: 'key', data: 'value'});// 存储-同步swan.setStorageSync;// 获取-异步swan.getStorage({ key: 'key', success: function  { console.log; }, fail: function  { console.log; console.log; }});// 获取-同步const result = swan.getStorageSync;

示例代码

解决方法三: 利用事件中心

wx.reLaunch({ url: 'test?id=1'})

// test Page({ onLoad (option) { console.log(option.query) } })

利用事件中心的进行订阅和发布。

3.wx.redirectTo(Object object)

// event.js 事件中心class Event { on { if (typeof fn !== 'function') { console.error('fn must be a function'); return; } this._stores = this._stores || {}; (this._stores[event] = this._stores[event] || []).push; } emit { this._stores = this._stores || {}; let store = this._stores[event]; if  { store = store.slice; for (let i = 0, len = store.length; i < len; i++) { store[i].cb.apply; } } } off { this._stores = this._stores || {}; // all if  { this._stores = {}; return; } // specific event let store = this._stores[event]; if  { return; } // remove all handlers if (arguments.length === 1) { delete this._stores[event]; return; } // remove specific handler let cb; for (let i = 0, len = store.length; i < len; i++) { cb = store[i].cb; if  { store.splice; break; } } return; }}module.exports = Event;

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

在app.js中进行声明和管理

参数

// app.jsimport Event from './utils/event';App})

Object object

订阅的页面中,使用on方法进行订阅

属性

// view.js 阅读页进行订阅Page({ // 页面在回退时,会调用onShow方法 onShow() { // 支付成功的回调,调起下载弹层 app.event.on('afterPaySuccess', this.afterPaySuccess, this); }, afterPaySuccess

类型

发布的页面中,根据业务情况进行发布emit

默认值

// paySuccess.jsconst app = getApp();app.event.emit('afterPaySuccess', { docId: this.data.tradeInfo.docId, triggerFrom: 'docCashierBack'});

必填

根据事件中心的发布和订阅,实现了页面之间的通信,就能实现比如页面在支付成功后回退时,页面状态的改变的场景,同时利于维护页面之间的数据关系,能通过在发布时传递参数,实现数据之间的通信。

说明

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

urlstring是需要跳转的应用内非 tabBar 的页面的路径,
路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用“分隔;如
‘path?key=valuekey2=value2’successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

4.wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar
页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。

参数

Object object

属性

类型

默认值

必填

说明

urlstring是需要跳转的应用内非 tabBar 的页面的路径,
路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用“分隔;如
‘path?key=valuekey2=value2’successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.navigateTo({ url: 'test?id=1'})

// test.jsPage({ onLoad(option) { console.log(option.query) }})

5wx.redirectTo与wx.navigateTo的区别

1.利用wx.navigateTo跳转到下一个页面的时候(这时候会执行onHide方法),下一个页面头部会有返回按钮

2.如果不想有返回按钮,可以用wx.redirectTo进行页面跳转(这时候关闭此页面,会执行onUnload生命周期,这样下一个页面就不会有返回按钮了,因为上一个页面已经被关闭了,没有页面可以返回)

6wx.navigateBack(Object object)

关闭当前页面,返回面或多级页面。可通过getCurrentPages()获取当前的页面栈,决定需要返回几层。

参数

Object object

属性

类型

默认值

必填

说明

deltanumber是返回的页面数,如果 delta
大于现有页面数,则返回到首页。successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码// 此处是A页面wx.navigateTo({ url: 'B?id=1'})// 此处是B页面wx.navigateTo({ url: 'C?id=1'})// 在C页面内 navigateBack,将返回A页面wx.navigateBack({ delta: 2})

原文:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图