258资源分享网

本文作者：才子锅锅，来自授权地址，作者要求本文必须获得作者亲自授权同意方可转载分享，如需转载分享，请在授权地址内征求原作者的同意；

微信小程序提供导航相关的API：

wx.navigateTo();

wx.redirectTo();

wx.navigateBack()。

使用wx.navigateTo()或者<navigator>组件跳转的页面路径最多只有5层，这些页面路径是可以通过wx.navigateBack()API或者左上角返回按钮按顺序返回的。当页面路径大于5层时，使用wx.navigateTo()进行下一页吗跳转会抛出错误：

navigateTo:fail webview count limit exceed.

但是某些业务场景存在多页面互动的交互逻辑，远远不止5层页面栈。比如笔者近期参与开发的58到家小程序中存在如下的业务场景：
1、用户进入小程序，展示首页；
2、首页存在一个如下图的底部导航栏：

用户点击“我的”进入个人中心，此时页面栈为首页->个人中心，共2层。
3、个人中心页面存在“我的收入”入口，如下：

4、用户从个人中心进入我的收入页面，此时页面栈为首页->个人中心->我的收入，共3层；
5、我的收入页面提供“提现”页面的入口，如下：

6、用户进入提现页面，此时的页面栈为首页->个人中心->我的收入->提现，共4层。此时留给我们可支配的页面栈只剩下一层了。提现流程如下：

提现流程存在多页面直接的数据共享和交互，如果是常规的webapp，我们通常会考虑使用hash路由或者干脆做成独立的几个页面使用url传参进行数据通信。但是进入提现页面之后，我们最多只能再添加一个独立页面了。也就是说，银行列表页、绑定银行卡页和提交成功页三者只能再使用一个页面栈（并非一个页面）承载。如何用仅剩的最后一层页面栈实现上述复杂的提现流程呢？

逻辑行为梳理 第一步：细分交互行为

首先第一步是将提现行为细分，因为只能再添加一个独立页面，所以需要合并一些可在一个页面完成的行为。上文的流程图其实遗漏了一个行为：绑定银行卡页面点击银行卡需要显示银行列表页。也就是允许用户重新选择银行。所以其实整体的提现流程如下：

小程序标题栏左上角返回按钮的行为（图中标红的线条）是返回页面栈的上一页面，代码是无法干预的。

整个流程中必须支持“返回”按钮正常返回上一页面的行为有：

前置页面进入提现页面，正常返回前置页面；

提现页面进入的银行列表页面，正常返回提现页面。

要保证第二条“提现页面进入的银行列表页面，正常返回提现页面”，就必须将银行列表页独立为一个页面。至此，最后一层页面栈就定型了。那么剩下的绑定银行卡和提交成功页面怎么办呢？

第二步：合并逻辑页面

需要注意的是，银行列表页面与绑定银行卡页面之间有一个双向的交互行为，由于最后一个独立页面已经确定为银行列表页了，所以不得不从中牺牲一定的用户体验：绑定银行卡页面跳转到银行列表页后不能正常返回。有了这个前提，我们可以把银行列表和绑定银行卡两个逻辑页面合并为一个实体页面，通过子路由控制行为展示。

再次回顾上文的交互流程图还可以得到另外一个信息：提交成功页面的返回逻辑与提现页面完全相同。所以，两者同样可以合并为一个实体页面，由子路由控制行为展示。

第三步：梳理行为逻辑

以第二步的合并规则为准，实体页面的交互流程如下：

使用data.route实现子路由

微信小程序的Page是没有子路由概念的，我们在此讨论的子路由其实就是根据Page组件的某个data字段进行不同模板的分发渲染。

首先定义支持的子路由列表：

// 路由列表 const ROUTES = { index: 'index', banklist: 'banklist', setcard: 'setcard', done: 'done' };