微信小程序通过wx:for做多级树形菜单

首先了解我做的树形是怎样的：(如图所示)

ok,百度一下:微信小程序如何做树形菜单，其中有一个是这样的：大佬的例子
但他这个是vue的，稍微改一下就差不多了，现在了解一下wx:for的语法(暂时没找到官方的，找到再更新)。
代码(只显示2级树形菜单，思路见后面)：
wxml(样式直接写了)

<view bindtap="clickTone" style="width: 37vw;height:10vh;display:flex;justify-content: space-between;border-radius: 0.5vw;margin-top: 0.8vw;">
            <view style="display: flex;flex-direction: row;align-items: center;">
              <image src="../../src/static/timbreselect.png" mode="widthFix" style="width: 2vw;margin-left: 1.5vw;"></image>
              <text style="margin-left: 1vw;">音色选择</text>
            </view>
            <view style="padding-right: 1.2vw;display:flex;align-items: center;">
              <text style="margin-right: 1vw;font-weight:200;">迪斯科风格</text>
              <!-- 箭头切换 -->
              <image hidden="{{isExpand}}" src="../../src/static/right_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
              <image hidden="{{!isExpand}}" src="../../src/static/down_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
            </view>
          </view>
          <!-- 一级分类 -->
          <view wx:if="{{isExpand}}">
            <view wx:for="{{PCList}}" wx:for-index="outerindex" wx:key="outerindex" wx:for-item="outeritem">
              <view bind:tap="unshow" data-index="{{outerindex}}" style="width: 36vw;height: 8vh;display: flex;align-items: center;">
                <view style="width: 36vw;display: flex;justify-content: space-between;">
                  <view style="width: 25vw;margin-left: 1.8vw;display: flex;flex-direction: row;">
                    <view style="width: 2vw;margin-right: 1vw;">
                      <image src="../../src/static/gou.png" mode="widthFix" style="width: 15rpx; height: 15rpx;" wx:if="{{outeritem.gou}}"></image>
                    </view>
                    <text>{{outeritem.name}}</text>
                  </view>
                  <view style="width: 4vw;">
                    <view wx:if="{{outeritem.show}}">
                    <image src="../../src/static/down_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
                  </view>
                  <view wx:else>
                    <image src="../../src/static/right_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
                  </view>
                  </view>
                </view>
              </view>
              <!-- 二级分类 -->
              <view wx:for="{{outeritem.children}}" wx:if="{{outeritem.show}}" wx:key="inneritem" wx:for-item="inneritem" wx:for-index="innerindex" style="width: 100%;height: 8vh;">
                <view style="width: 25vw;margin-left: 3.6vw;display: flex;flex-direction: row;justify-content: flex-start;">
                  <view style="width: 2vw;margin-right: 1vw;">
                    <image src="../../src/static/gou.png" mode="widthFix" style="width: 15rpx; height: 15rpx;" wx:if="{{inneritem.gou2}}"></image>
                  </view>
                  <text>{{inneritem.name}}</text>
                </view>
              </view>
            </view>
          </view>

js:(其中PCList变量)

		let outerArray =["电子类","放克&RNB类"];		//假设1级只有2个元素
		let innerArray=["电鼓风格1","电鼓风格2","电鼓风格3","嘻哈工作室风格"]
        let falseArray = Array.from({ length:3 }, () => false);
        let pcArray = [];
        for (let i = 0; i < outerArray .length; i++) {
          let option = {
            id: i,
            name: outerArray [i]
            show: false,
            children: []
          }
          pcArray.push(option);
        }
        let coption;
        for (let i = 0; i < innerArray.length; i++) {		//目前只做第一个1级的元素，自己扩充
          coption={
            name: innerArray[i],
          };
          pcArray[0].children.push(coption)
        }
        this.setData({
          PCList: pcArray
        })

思路解析：
精髓：内部的wx:for通过读取外部的wx:for的元素中的children(这个可以是其他变量,但要是上一级中的)进行取值，然后才可以进行展开，更多层级亦是包裹到上一级的children就行。