1. Introduction to custom components

1. What are custom components?

When the components officially provided by wechat cannot meet our requirements, and it is complicated to construct the template WXML using system components, we can consider using the component architecture officially provided by wechat to define the components that meet our requirements.

2. Customize components

The composition of the custom is the same as the normal page structure of the applet. It consists of four files: js\json\ WXML \ WXSS, where:

Js: Responsible for component logic. Json: Is responsible for defining the configuration of components. WXML: Is responsible for defining the layout of components. WXSS: Is responsible for styling components.

I will define a simple component in the following order.

The write component page displays only one line of text to demonstrate creating and writing a file for the component. 2. Reference the component you wrote in the previous step to demonstrate how to reference a custom component. 3. Write the logical structure of the component to realize that the component data is controlled by JS logic and the internal response of the component is used for operation events. 4. Provide interfaces to call back internal events of components. Provide methods for direct external calls to use components.Copy the code

Implement custom components

1. Create a component

Right-click in the selected directory and create a new Component directory. The system automatically creates the four necessary files for the custom Component, as shown in Figures 1 and 2.

Let’s write the component WXML file content.

// test-component.wxml contents <text> This is a custom component </text>Copy the code

If the component file is created using wechat developer tools, the IDE will help you to automatically create the following code (manually add your own) :

{
  "component": true."usingComponents": {}} // component Indicates the identity of the component. // usingComponents reference child components (components can use other custom components, system components do not need to be declared)Copy the code

Component js content, the IDE automatically creates the following code:

Component ({/ * * * a list of attributes for the Component * / properties: {}, the components of the initial data * * * * / data: {}, / * * * the method of Component list * / the methods: {}})Copy the code

The WXSS of the component, which we can ignore for the moment, is just general style code.

Here we have a simple custom component, referenced below.

2. Use custom components

Using a custom component requires only two steps:

First, add the following configuration to the page JSON configuration code that you want to reference:

"usingComponents": {
    "test-1": "/pages/component/test-component"} // usingComponents is the configuration item of the dependent component //test-1 is an arbitrary alias for the dependent component to use in a layout that uses the page. // /pages/component/test-component Indicates the path of the dependent component (no suffix is required).Copy the code

Second, for use in layout pages, as with system components, the “alias” specified in the previous step is used as the tag name.

<! -- index. WXML file contents -->
<view>
  <test></test>
</view>
Copy the code

After saving and recompiling, the page shows the content of our custom component.

3. Implement response to user operation events

This step implements the user’s click event. After the user clicks on a custom component, the text content of the custom component changes.

First, capture click events for custom components.

Custom component event handling is the same as normal page, catchtap the corresponding event, and then define the corresponding handler in the JS file. The code is as follows:

<! -- test-component. WXML contents -->
<text catchtap='onClick'>{{text}}</text>
Copy the code
// pages/component/test-component.js
Component({
  /** * The initial data of the component */
  data: {
    text:'This is the initial text.'
  },
  methods: {// The method must be placed inside this
    /** * responds to the method used for clicking */
    onClick: function (e) {
      // Set the data is also used to determine the method of data, and the general page.
      this.setData({
        text: 'Clicked'}); }}})Copy the code

Results the following

4. Externally listen for the text change time of the previous step.

This part of the main code is still in the custom component’s JS file.

Trigger a component’s custom event inside a custom component, with the following code:

// pages/component/test-component.js
Component({
  /** * The initial data of the component */
  data: {
    text:'This is the initial text.'
  },
  methods: {/** * responds to the method used for clicking */
    onClick: function (e) {
      // Set the data is also used to determine the method of data, and the general page.
      this.setData({
        text: 'Clicked'
      });
      // Define a component trigger event
      this.triggerEvent('onTextChange'); }}})Copy the code

Second, catch the event on the page (WXML) referencing the component

<! -- index. XML file contents -->
<view>
  <test catch:onTextChange='onTextChange'></test>
</view>

Copy the code

Third, create the capture event within the reference component page JS logic

// index.js page content
Page({
  data: {},onLoad: function () {},// Catch the event
  onTextChange: function(){
    wx.showToast({
      title: 'Capture event',})}})Copy the code

The effect is as follows:

5. Customize the methods that the component provides for external calls

The first step is to write the method provided externally

This provides an external method to change the text content as follows:

// pages/component/test-component.js Component({/** * the initial data of the component */ data: {text:'This is the initial text.'}, methods:{/** * response to click methods */ onClick:function(e) {// Set data is also used to determine the method of data, and the general page. this.setData({ text:'Clicked'}); // create a custom component triggerEvent this.triggerevent ('onTextChange'); }}, // This method is called externally to change the literal content of the componentsetText: function(text) { this.setData({ text: text }); }})Copy the code

Second, get the component instance by ID and use the component instance to call the component method directly

The code is as follows:

Page({
  data: {},onLoad: function () {},// Catch the event
  onTextChange: function(){
    wx.showToast({
      title: 'Capture event',}}),// Respond to the click event
  change:function(e){
    // Get the component instance by id using the officially provided selectComponent method
    var mComponent = this.selectComponent('#mComponent');
    // Call a method provided by the component directly through an instance
    mComponent.setText('External call'); }})Copy the code
<! -- index. WXML content -->
<view>
  <test catch:onTextChange='onTextChange' id='mComponent'></test>
  <button catch:tap='change'>Click to change the text content</button>
</view>
Copy the code

The final effect is as follows: