Example of WeChat Mini Program Componentization Scheme

Since only the template is provided in the WeChat applet, and the template is only a view template, the components we actually want are the view (wxml and wxss) and logic (js). There are third-party frameworks on the Internet that can be componentized, but after looking at it, it's complicated. And combined with our project, due to the 1M limit, it is impossible to use third-party frameworks too much. So, with the following. . . If any great god has a better plan, welcome to communicate.

In fact, the principle is very simple, that is to merge. There are three steps:

The child component's wxml is included as a template in the parent container
The wxss of the child component is imported into the wxss of the parent container
Combine the data and methods of the parent container with the data and methods of the child components (note: the combined data and method names cannot be the same)

See the effect:

Enter the content in the input box of the child component, the input content is displayed in the parent container, and the input content of the child component is cleared after clicking the clear button in the parent container.

Run screenshot
image description

Detailed description

Component part

1. The js part exports the data and method for use on the calling side.

module.exports = {
    data: {
        childInputVal: ''
    },
    inputChange: function(event) {
        let inputVal = event.detail.value;
        this.setData({
            childCompVal: inputVal,
            childInputVal: inputVal
        });
    }
}

2. The wxml part.

<view class="component-container">
    <view class="desc">子组件</view>
    <input 
        value="{{childInputVal}}"
        placeholder="输入内容后自动更新父容器文本内容"
        bindinput="inputChange" />
</view>

3.wxss section

.component-container{
    width: 90%;
    height: 30%;
    border: 1px solid #cdcdcd;
    border-radius: 15px;
    padding: 5px;
    margin-top: 70px;
}
.desc{
    margin-top: 10px;
    text-align: center;
}
input{
  width: 100%;
  margin-top: 20px;
}

Parent container part

1. The wxml part of the container

Include the above wxml in wxml

<view class="container">
  <text>父容器</text>
  <view class="button-container">
    <button bindtap="clearInput" type="primary" size="default" >清空</button>
  </view>
  <view class="value-container">
    {{childCompVal}}
  </view>
  <!-- 引入子组件wxml -->
  <include src="../../components/myComponent/index.wxml" />
</view>

2. The wxss part of the container

Import the above wxss file in wxss

.button-container {
  margin-top: 10px;
  width: 90%;
}

.value-container {
  margin-top: 30px;
  width: 90%;
  padding: 5px;
  border: 1px solid #cdcdcd;
  border-radius: 15px;
  color: #333;
}

/** 引入子组件样式 **/
@import "../../components/myComponent/index.wxss"

3. The js part in the container

1. Introduce the js file of the subcomponent

var myComponent = require('../../components/myComponent/index');

2. Remove the code from the original Page ({...})

    // 原来
    Page({
        data：{
            data1: 'data1',
            data2: 'data2'
        },
        func1: function() {...}
    });

    // 改成
    var pageObj = {
        data：{
            data1: 'data1',
            data2: 'data2'
        },
        func1: function() {...}
    };
    Page(pageObj);

3. Before calling Page (pageObj), merge the common content into pageObj

    for (let compKey in compObj) {
        if (compKey == 'data') {
            // 合并页面中的data
            let data = compObj[compKey];
            for(let dataKey in data) {
                pageObj.data[dataKey] = data[dataKey];
            }
        } else {
            // 合并页面中的方法
            pageObj[compKey] = compObj[compKey];
        }
    }
    Page(pageObj);

Sample code

github address: https://github.com/yinhaijiao/XcxComponentsDemo