专题背景
近几年随着开源在国内的蓬勃发展，一些高校也开始探索让开源走进校园，让同学们在学生时期就感受到开源的魅力，这也是高校和国内的头部互联网企业共同尝试的全新教学模式。本专题会记录这段时间内学生们的学习成果。
更多专题背景参考:【DoKit&北大专题】缘起
系列文章
原文
第二篇文章里我们简要介绍了微信小程序的一些特色语法，如条件渲染、数据绑定、事件通信等功能；并介绍了index组件如何通过事件通信的方式切换成其他的组件。
接下来我们就要看看其他的Dokit功能组件了，我们先来看主菜单组件debug组件。
debug组件：组件菜单
index组件中渲染debug组件
回顾一下上次阅读的index组件代码，在第一次加载index界面的时候，index中的data属性里的curCom值为dokit，因此条件渲染的是以下代码：
<cover-image
bindtap="tooggleComponent"
data-type="debug"
class="dokit-entrance"
src="//pt-starimg.didistatic.com/static/starimg/img/W8OeOO6Pue1561556055823.png"
></cover-image>
1、响应点击事件 2、事件处理函数为toggleComponent 3、传递dataset中属性为type的值"debug"
在事件处理函数toggleComponent中，将curCom的值赋值为debug字符串;这样,通过下面的条件渲染语句，index组件中渲染了debug组件：
<block wx:if="{{ curCom!= 'dokit' }}">
<debug wx:if="{{ curCom === 'debug' }}" bindtoggle="tooggleComponent"></debug>
......
</block>
debug组件功能展示
可以看到，组件中罗列了Dokit可使用的功能，点击不同的图标即可使用不同的功能。
debug组件作为Dokit功能展示的菜单，其代码实现比较简单，这部分需要注意的有两个部分：wxml的列表渲染与更新版本的这一功能，我们先来看列表渲染功能。
列表渲染
列表渲染是微信小程序wxml中的一个特色功能，通过wx:for语法来遍历一个绑定好的数组，用数组内的元素渲染同一个组件；可以嵌套使用该语法，debug的菜单各个组件就是嵌套渲染的：
<view wx:for="{{tools}}" wx:key="index" class="debug-collections card">
<view class="debug-collections-title">{{item.title}}</view>
<view class="debug-collections-main">
<view wx:for="{{item.tools}}"
wx:for-index="idx"
wx:for-item="tool"
wx:key="idx"
data-type="{{tool.type}}"
bindtap="onToggle"
class="card-item">
<image
class="debug-item-image"
src="{{tool.image}}"
></image>
<text class="debug-text">{{tool.title}}</text>
</view>
</view>
</view>
具体内外层的渲染组件如图：
红框是外层列表渲染的组件：标题为常用工具的卡片，蓝框是内层列表渲染的组件，七个功能组件入口。
我们很快就注意到一个情况：外层列表渲染只渲染了一个卡片，这种情况下真的有必要使用列表渲染吗？
这个问题的答案可以通过Dokit其他应用端的工具列表得到提示：
可以看到其他应用端的工具列表不止包括常用工具、还包括性能监控等常用工具。
因此，考虑到日后Dokit工具的可拓展性，外层卡片使用列表渲染的原因也得到了解释：便于日后添加其他方向的功能。
更新版本
通过上面的代码我们可以看到，各个功能的入口都绑定了响应函数为onToggle的点击事件。而该响应函数的代码如下：
onToggle (event) {
const type = event.currentTarget.dataset.type;
if(type === 'onUpdate') {
this[type]();
} else {
this.triggerEvent('toggle', { componentType: type })
}
},
函数内检查当前组件的type是否为onUpdate，如果是onUpdate，那么执行函数onUpdate()，不然就触发toggle事件。
除了更新版本的组件外，其他的组件入口都是触发toggle事件进行组件切换，与index组件的组件切换方式是相同的，所以我们可以集中注意力在更新版本这个功能上。
onUpdate () {
const updateManager = wx.getUpdateManager();
updateManager.onCheckForUpdate(function (res) {
if(!res.hasUpdate) {
// 请求完新版本信息的回调
wx.showModal({
title: '更新提示',
content: '当前已经是最新版本'
})
}
});
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
});
updateManager.onUpdateFailed(function () {
// 新版本下载失败
})
}
这个函数中的内容比较容易理解，通过调用微信提供的接口函数得到版本更新管理器UpdateManager对象，之后调用
onCheckForUpdate函数检查更新结果onUpdateReady函数，在有版本更新的情况下会触发下载新版本applyUpdate函数强制小程序重启并使用新版本onUpdateFailed函数监听小程序更新失败的情况执行相应回调函数
总结
继上一篇我们了解了数据绑定、事件通信、条件渲染系统后，我们这次了解了微信小程序的列表渲染功能。到目前为止，我们已具备了阅读Dokit小程序端源代码的基础小程序知识。
从下一篇开始我们将从另一个角度来阅读Dokit源代码：了解Dokit业务代码零侵入的思想。
作者信息
作者：亦庄亦谐
来源：掘金
