Skills that all applet developers should know: applying applet components

First of all , The components of applets fall into two categories , It will also be introduced one by one in the following contents ：

1. Built in components
2. Custom components

Built in components

Built in components refer to components that have been pre-defined inside the applet , Developers can use it directly in the code without special references , Take the following code for example ：

<view>
	<text> This is a button </text>
	<button bintap='foo'> Button </button>
</view> 

<view>, <text>, <button> Are built-in components . For more usage methods of built-in components, please refer to Wechat applet development document .

Custom components

With the development of our applet , Write more and more code , Page level code will become more and more bloated . At this time , We need to split the code into smaller granularity units , This makes the code easier to maintain , It's also easier to reuse . This smaller granularity unit , That is, custom components .

There is such a scene : We are on one page , Fill in several mobile phone numbers , Click on “ preservation ” Then save the numbers in storage In a list of , The page code is as follows ：

// wxml
<view>index  page </view>
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder=" Please enter the correct mobile phone number " />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> preservation </button>
</view>
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder=" Please enter the correct mobile phone number " />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> preservation </button>
</view>
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder=" Please enter the correct mobile phone number " />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> preservation </button>
</view>

// js
Page({
  data: {
    tel: ''
  },
  bindKeyInput(e) {
    this.setData({
      tel: e.detail.value
    })
  },
  getTelList() {
    return wx.getStorageSync('tel')
  },
  updateTel() {
    let telList = this.getTelList() || []
    if(this.data.tel.length !== 11) {
      wx.showToast({
        title: ' Please enter the correct mobile phone number ',
      })
      return
    }
    telList.push(this.data.tel)
    wx.setStorage({
      key: 'tel',
      data: telList,
      success(res) {
        wx.showToast({
          title: ' Number saved successfully ',
        })
      },
      fail(res) {

      }
    })
  }
})
```

Page effects

You can see that there are a lot of duplicate template code here , It looks very bloated . Then we can extract the repeated code into a custom component , Then repeat the call where you need to use it .

For example, we can do this ：

First step

Let's create a new one in the root directory components Folder , And I'm gonna go ahead and say new component

The second step

Name one ‘saveTel’ The file of , It will generate component related files and basic configuration

The third step

We migrate the code originally written in the page to the component

//  Move this part to  saveTel.wxml  in 
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder=" Please enter the correct mobile phone number " />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> preservation </button>
</view>

//  hold  index.js  Move to  saveTel.js  Go to , as follows ：
//  Here are some points to pay attention to ：
// 1.  Component's  js  By  Component  Constructor wrapped  
// 2.  The component approach is not like  Page  Directly in the constructor configuration object , But placed in a deeper layer  methods  in  
Component({
  /**
   *  A list of properties of a component 
   */
  properties: {

  },

  /**
   *  The initial data of the component 
   */
  data: {
    tel: ''
  },

  /**
   *  A list of methods for a component 
   */
  methods: {
    bindKeyInput(e) {
      this.setData({
        tel: e.detail.value
      })
    },
    getTelList() {
      return wx.getStorageSync('tel')
    },
    updateTel() {
      let telList = this.getTelList() || []
      if(this.data.tel.length !== 11) {
        wx.showToast({
          title: ' Please enter the correct mobile phone number ',
        })
        return
      }
      telList.push(this.data.tel)
      wx.setStorage({
        key: 'tel',
        data: telList,
        success(res) {
          wx.showToast({
            title: ' Number saved successfully ',
          })
        },
        fail(res) {
  
        }
      })
    }
  }
})
```

Step four

Go through the above steps , We've put the whole ‘ Enter and save the phone number ’ The logic of / Template / Style pulls components away from the page , Next , We need to introduce and use this component in the page , That is to say “ The component has been added to the page ”.

First , We need to know where and what the name of the component we want to reference . We can go to the page corresponding to these two information . json De configuration .

{
  "usingComponents": {
    "save-tel" : "/components/saveTel"
  }
}
// save-tel  That is, the name we give to the component , The naming here can be used freely , But the suggestion is to convey the meaning 
// /components/saveTel  That is, we refer to the path of the component 

The completion of configuration also means that we have finished the configuration of components , Next, go to the corresponding page template to introduce components ：

// wxml
<view>index  page </view>
<save-tel></save-tel>
<save-tel></save-tel>
<save-tel></save-tel>

The effect is as follows , Test it to make sure that the input and save functions should be normal .

thus , We've done pulling common logic from a page to a component / Operation of using components .

summary

We can realize the basic functions of our applet through built-in components , Then, the common module is abstracted through custom components to increase the reusability of the applet and make it have a more elegant code organization .

Of course , Custom components also have various high-level functions , You can read Wechat applet development document Deepen understanding .

This article belongs to FinClip One of the small program teaching series , More can be found at FinClip Blog .