微信小程序-树形菜单替代方案

起因

最近项目（微信小程序项目）有一个需求，有一些多级结构的数据，需要一个树形的菜单来显示内容，类似如下：
：
然而，在实现的时候却意外的遇到了困难。。

实现树形菜单遇到的困难

其实应该说是实现无限层级树形菜单遇到的困难。
微信小程序无法动态新增子节点，然而我们的数据并不确定有多少层级（这里顺带一提，如果层级确定且级数不多的话，实现树形菜单还是比较容易的，可以使用多级嵌套wx:for来实现）。
在vue中可以通过组件递归实现树形菜单，然而小程序中无法实现组件的循环调用，瞬间悲催。
然而我研究了一下下，感觉还是可以抢救一下下。

实现无限树形菜单的方案分析

（除了第四个方案，其余方案均只是构想，并不确定是否可行）
1、 直接从后台返回写好的html文件，然后利用富文本的方式来进行渲染。
从后台返回返回html文件，感觉就很麻烦，当时我几乎是下意识就将这个想法给枪毙了。是的，我认为这个方法不可取，如果你很急，也许你可以跳过这方法了。
不过现在嘛我想试着从可行性上进行更细致的思考。
首先，从后台返回html的文件，那这个模板总要是我或其他前端同事来写吧，假设模板写好了，那么以后页面发出请求，后端根据请求调用模板生成合适的html文件返回给页面，之后页面要想办法将它渲染出来。
说到富文本，估计很多人都能想到rich-text这个组件，但是。。

tip: rich-text 组件内屏蔽所有节点的事件。

不过，富文本好像也可以用wxParse这组件，这个组件我也没有用过，标签内的还能实现事件吗？不知道。。这个组件好像是将html可视化的，我可以直接返回wxml格式的吗？不清楚。。感觉这个方案还是挺多不确定的东西的（对我而言），可行性存疑。
wxParse-微信小程序富文本解析组件

2、 用wxParse提及的笨方法，自己写，就不用后台给返回html的数据了
这个方案是我突然想到的，没有仔细研究，同样可行性存疑。
上个方案提到了wxParse，它也提出了一种方法
微信小程序组件wxParse中的模版template使用 既然不能循环那就使用笨办法
（链接好像是打不开，百度这个标题，倒是在快照里可以看到文章）
哎呀，这真的是笨方法啊，一个模板重复写几十遍。。想类似无限菜单，自己想要重复几遍吧。。
但是好像说

这种处理方式其实是处理不了dom树超过12层的，更深层次的子结构就解析不了了。

原文：小程序模板为何不能自引用？

呵呵，也就是说可能这个方案的树形菜单也不能超过12层？不行啊，这里的dom限制我也没搞懂是用富文本里dom树的限制还是说小程序dom嵌套不能超过12层，没有验证过真实性，各位可以自行验证。。

3、 预制100层（或者根据业务评估最多可能有多少层），然后不就可以实现0-100(反正是你预制层数)之间的树形菜单了吗？
这种方案是假设最多也就100层菜单，然后就真的自己写100层的代码。。
我想应该不会有人选这种方案的吧？简直反人类啊。。
话说，如果是小程序dom嵌套不能超过12层（注意，到底是小程序dom嵌套不能超过12层还是富文本中dom树不能超过12层这个我是不确定的），如果菜单超过12层，这方法也不可行。

4、 上面是我设想过的方案，但我感觉都不行，所以都不想用，而希望采用以下这种替代方案。既然微信不能插入子节点，那我干脆就不插入了，直接只用一级菜单列表，然后加上路径来进行层级间的跳转。

其实想想多层级树形菜单在移动端这种展开形式好像也不见得就那么好吧？

实现无限树形菜单的替代方案

我不知道是否有人这样实现过，应该有吧，只不过我没找到而已，因为这个方案是我自己想到的，所以也不清楚这种组件是否有一个比较正式的名字，反正我将其命名为路径视图：path-view。

灵感

当时我在构想实现树形菜单时，感觉还是挺绝望的，想到的方案，感觉都是一个个的坑，然后我就不得不问自己一个问题，一定要用树形菜单实现这个功能吗？这个功能是必要的吗？很遗憾，这个功能就是一个需求，在思考后我也认为这个需求是合理的（虽然实在实现不了的话我也没办法，是吧？）

我想，树形菜单树形的困难主要是因为它的结构是无限级（多级而且你不知道它是多少级），但我在实现动态插入节点时遇到了似乎无法解决的困难，那么是否可以将无限多级压缩为一级呢？可以的，什么意思呢？（可以直接跳到最后看看最终实现的动态效果图）就是说，点击菜单时不再是展开菜单，而是将原有的菜单刷新为下一级的内容，这样子就实现了视图的切换，然后再给它一个返回按钮，返回到上一级。当时我的考虑是这样实现会降低用户体验，因为用户不能像树形菜单那样自由切换到任意层级（这个很快就想到了解决方案）。
当前方案效果图如下：

但我很快想到可以加一个路径来进行层级的快速切换，灵感来自window的这个界面：

树形菜单为什么不能转换成路径+视图+返回这样子的结合呢？
效果图如下：

需求描述

实现一个显示某级菜单的界面，同时要有一个路径记录已进行类似电脑跳转目录的操作。在计算机上，图标会告诉我们只是文件夹还是文件，即这是中间层（包括第一层）还是底层了（不能继续点击），而这里我采用了文本来进行相关提示。

最终效果

代码

代码已托管到github：微信小程序 树形菜单替代组件

使用

如何使用github中也有写，这里就不赘述了，这个组件只是为了满足当前项目的需要，因此别人如果想使用它可以自行去调整组件的样式，对它进行改进。不过在未来，如果我有能力的话，我也想尝试将它做成一个通用的组件。

最后

到此，应该是能满足我们项目的需求了。但是这个组件也许可以更通用一点，功能更强大一点？我是希望能继续扩展这个组件的功能，加上一些动画效果之类的，毕竟这虽然只是一个简单的组件，却也是我的第一个原创组件，能自己做出一个组件而不是简单的copy和模仿，这种感觉真的能让我这种小菜鸟感觉非常满足。这也是为什么我愿意花一个上午的时间写这篇文章的原因，写这种文章会让我有有一种满足感，仅此而已。
假如，有人真的使用这个组件，很希望能给我反馈一下意见，让我能改进它，也欢迎各位替我去完善这个组件。
那么，就这样吧。