In the second article, we briefly introduced some features of wechat applet syntax, such as conditional rendering, data binding, event communication and other functions. It also shows how the INDEX component can be switched to another component by means of event communication. Next we will look at the other Dokit functional components, starting with the main menu component debug.

Debug Component: component menu

Render debug component in index component

When the index interface was first loaded, the value of curCom in the data property of index was dokit, so conditionally render the following code:

    <cover-image
        bindtap="tooggleComponent"
        data-type="debug"
        class="dokit-entrance"
        src="//pt-starimg.didistatic.com/static/starimg/img/W8OeOO6Pue1561556055823.png"
    ></cover-image>
Copy the code

ToggleComponent = “debug”; toggleComponent = “curCom”; toggleComponent = “curCom”; Thus, the DEBUG component is rendered in the index component with the following conditional render statement:

<block wx:if="{{ curCom! = 'dokit' }}">
    <debug wx:if="{{ curCom === 'debug' }}" bindtoggle="tooggleComponent"></debug>.</block>
Copy the code

Debug Displays component functions



As you can see, the component lists the functions available for Dokit. Click on different ICONS to use different functions.

The DEBUG component is used as the menu to display the Dokit function. Its code implementation is relatively simple. There are two parts that need to be paid attention to: WXMLThe list of renderingwithAn updated versionFor this function, let’s first look at the list rendering function.

The list of rendering

List rendering is a feature in WXML, a small program in wechat. It iterates through a bound array with wX :for syntax and renders the same component with elements in the array. This syntax can be nested, and components of the debug menu are rendered nested:

    <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>
Copy the code

The specific rendering components of the inner and outer layers are shown as follows:



The red box is the outer list rendering component: the card titled Common Tools, the blue box is the inner list rendering component, and the seven functional component entries.

One thing we noticed very quickly:The outer layerThe list of renderingOnly one card is renderedIs it really necessary to use list rendering in this case?

The answer to this question can be hinted at in a list of Dokit’s other apps:



The tool list of other applications includes not only common tools but also performance monitoring tools.

Therefore, consider the future of Dokit toolsCan expand sexThe reason for using list rendering for outer cards is also explained: it is easy to add other orientation functions later.

An updated version

As you can see from the above code, each function entry is bound to the click event that responds to the onToggle function. The code for this response function is as follows:

        onToggle (event) {
            const type = event.currentTarget.dataset.type;
            if(type === 'onUpdate') {
                this[type]();
            } else {
                this.triggerEvent('toggle', { componentType: type })
            }
        },
Copy the code

Function to check whether the type of the current component is onUpdate. If so, execute onUpdate(), otherwise the toggle event is triggered. Except for the updated version of the component, the other component entry triggers the toggle event to switch the component, which is the same as the index component, so we can focus on the updated version of the function.

        onUpdate () {
            const updateManager = wx.getUpdateManager();
            updateManager.onCheckForUpdate(function (res) {
                if(! res.hasUpdate) {// Request a callback for the new version information
                    wx.showModal({
                        title: 'Update Prompt'.content: 'Current is the latest version'}}})); updateManager.onUpdateReady(function () {
                wx.showModal({
                    title: 'Update Prompt'.content: 'The new version is ready. Do you want to restart the application? '.success(res) {
                        if (res.confirm) {
                            // The new version has been downloaded. Call applyUpdate to apply the new version and restart
                            updateManager.applyUpdate()
                        }
                    }
                })
            });
            updateManager.onUpdateFailed(function () {
                // Failed to download the new version})}Copy the code

The content of this function is relatively easy to understand. The version UpdateManager UpdateManager object is obtained by calling the interface function provided by wechat, and then called

  1. onCheckForUpdateFunction checks the update result
  2. onUpdateReadyFunction that triggers the download of a new version if there is a version update
  3. applyUpdateThe function forces the applet to restart and use the new version
  4. onUpdateFailedThe applet () function listens for an applet update failure and executes the corresponding callback

conclusion

After we learned about data binding, event communication and conditional rendering system in the last article, we learned about the list rendering function of wechat applet this time. So far, we have the basic knowledge of applets to read the Dokit applets side source code. Starting with the next article, we’ll read the Dokit source code from another Angle: to understand the idea of zero-intrusion Dokit business code.