前一篇里面对wx:for 与 wx:for-items 与 wx:key的应用做了比较深入的探讨,这一节讲一个实际项目遇到的问题,和解决的办法。
1 简述DEMO的样式:
微信Demo里面的菜单嵌套的模样如下:我们为了篇幅的关系,就看第一个展开设计
而且,微信的团队对页面的编写也非常专业,代码简洁高效:
JS代码如下:
Page({data: {list: [{id: 'view',name: '视图容器',open: false,pages: ['view', 'scroll-view', 'swiper']}, {。。。
页面设计如下:
<view class="index"><view class="index-hd"><image class="index-logo" src="resources/kind/logo.png"></image><view class="index-desc">以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档。</view></view><view class="index-bd"><view class="kind-list"><block wx:for-items="{{list}}" wx:key="{{item.id}}"><view class="kind-list-item"><view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle"><view class="kind-list-text">{{item.name}}</view><image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image></view><view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}"><view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}"><block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item"><navigator url="pages/{{page}}/{{page}}" class="navigator"><view class="navigator-text">{{page}}</view><view class="navigator-arrow"></view></navigator></block></view></view></view></block></view></view></view>
微信团队用两个嵌套,在把页面导航赋值的同时,也把页面的渲染给解决了,但是,这里有一个问题。当嵌套的菜单需要中文展示的时候
2 中文菜单嵌套的问题:
当需要中文菜单的时候,我们看看,原来微信团队的设计会出现什么问题?
当我们要设置页面为中文的时候,你会发现,页面的导航跳转也不得不也用中文了,
可是,pages/中文/中文的页面可以顺利跳转吗?显然不可以啊,由于字符编码的问题,无论是操作系统,还是IDE的设计,这种支持都不存在的,一定会报错,那么我们的嵌套菜单就不能用中文字符了吗?
如果你深入了解了wx:for 与 wx:for-items 与 wx:key的意义,其实稍微改写一下就可以解决问题了。请看我修改的代码如下:
3 解决中文菜单嵌套的问题
3.1 思路:
我们看一下原来的结构体设计,
对应,
我们看到,微信团队,利用wx.for-items做了层叠,向下剥离,第二次的循环,用的是上一次循环的的item里的数组,然后,
用下一层的数组的元素为循环下标,这样就不会出错了,这种设计,理论上可以嵌套无数层菜单!!!
那么,关键一亮,我们的中文输入,其实只需要在前面的设计基础上,再往下加一层,也就是原来pages的数组,我们给他加一层,变成中文,英文都有的一个数组的数组,然后,不就可以利用wx.for-items的方法了,把上一层的item作为下一层的数组的开始,然后再去渲染。
3.2 设计
为了保护我的项目,打了一点马赛克,原来的pages,变成了,page(英文)用了跳转,showname(中文)用来渲染下一级中文菜单。
为了证明wx:for-item其实并没有什么卵用,我去掉了所有的wx:for-item,这样,默认下标名称就是item,那么item.就是下一级菜单内容,反而,思路清晰,书写也迅速了
试验结果如下:
菜单为中文显示,
跳转为英文,
这就解决了微信DEMO中文菜单问题。
参考:
微信小程序 - 高级 - wx:for 与 wx:for-items 与 wx:key - 1
/yellow_hill/article/details/81273828
微信小程序 - 高级 - 深度实践 - wx:for 与 wx:for-items 与 wx:for-item 与 wx:key - 2 嵌套菜单的中文展示的方法 - 和官网不同