微信小程序 页面跳转和数据传递实例详解
微信小程序 页面跳转和数据传递1.先导在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面。微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT); 2.wx.redirectTo(OBJECT); 3.wx.switchTab(OBJECT); 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能; 分析:
2.页面跳转的具体操作(1)wx.navigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
示例代码: 注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。 (2)wx.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。
示例代码: (3)wx.switchTab(OBJECT)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 OBJECT 参数说明:
示例代码: (4)wx.navigateBack(OBJECT)关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。 OBJECT 参数说明:
示例代码: // 此处是A页面
wx.navigateTo({ url: 'B?id=1' }) (5)使用
|
类型 | 必填 | 说明 |
---|---|---|
示例代码:
3.页面的路由和生命周期
(1)页面的路由
在小程序中所有页面的路由全部由框架进行管理,对于路由的触发方式以及页面生命周期函数如下:
触发时机 | 路由后页面 | 路由前页面 |
---|---|---|
Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):
路由后页面 | 触发的生命周期(按顺序) |
---|---|
4.参数传递
(1)通过路径传递参数
通过路径传递参数在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和
参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;
test?id=1 中id为参数键,1 为参数值
在目的页面中onLoad()方法中option对象即为参数对象,可以通过参数键来取出参数值
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!