专题背景

近几年随着开源在国内的蓬勃发展，一些高校也开始探索让开源走进校园，让同学们在学生时期就感受到开源的魅力，这也是高校和国内的头部互联网企业共同尝试的全新教学模式。本专题会记录这段时间内学生们的学习成果。

更多专题背景参考:【DoKit&北大专题】缘起

系列文章

【DoKit&北大专题】缘起

【DoKit&北大专题】-读小程序源代码（一）

【DoKit&北大专题】-读小程序源代码（二）

【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>
复制代码

具体内外层的渲染组件如图：

嵌套列表渲染.png
红框是外层列表渲染的组件：标题为常用工具的卡片，蓝框是内层列表渲染的组件，七个功能组件入口。
我们很快就注意到一个情况：外层列表渲染只渲染了一个卡片，这种情况下真的有必要使用列表渲染吗？
这个问题的答案可以通过Dokit其他应用端的工具列表得到提示：

可扩展性.png
可以看到其他应用端的工具列表不止包括常用工具、还包括性能监控等常用工具。
因此，考虑到日后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 () {
                // 新版本下载失败
            })
        }
复制代码