微信小程序 页面跳转和数据传递实例详解

微信小程序 页面跳转和数据传递

1.先导

在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也有栈的概念在里面。微信小程序页面跳转有四种方式：

1.wx.navigateTo(OBJECT)；
2.wx.redirectTo(OBJECT)；
3.wx.switchTab(OBJECT)；
4.wx.navigateBack(OBJECT)
5.使用实现对应的跳转功能；

分析：

其中navigateTo是将原来的页面保存在页面栈中，在跳入到下一个页面的时候目标页面也进栈，只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面； redirectTo和switchTab都是先清除栈中原来的页面，然后目标页面进栈，使用这两种跳转方式，都不能通过系统的返回键回到上一个页面，而是直接退出小程序； redirectTo使用的时候一定要配合tabBar或是页面里面可以再次跳转按钮，否则无法回到上一个页面； switchTab跳转的页面必须是tabBar中声明的页面； tabBar中定义的字段不能超过5个页面，小程序的页面栈层次也不能超过5层。 navigateBack只能返回到页面栈中的指定页面，一般和navigateTo配合使用。 wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

2.页面跳转的具体操作

(1)wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

示例代码：

wx.navigateTo({ url: 'test?id=1'//实际路径要写全})

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

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

（2）wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。