[WeChat applet] Componentized development, using a custom module box component as an example (with complete sample code and renderings)

If you are interested in WeChat Mini Programs, you can follow me or join my WeChat Mini Program Development Exchange Group (173683895) to exchange and learn from each other. Gossip and advertising are prohibited.

Custom components I divided it into three simple steps, 1. Create components --- 2. Write components --- 3. Invoke and use components. 

Step 1: Create the component

Create a modal folder, which contains four files josn.wxml.wcss.js, and then add  "component" : true in josn (the function is to declare this group of files as custom components)

Step 2. Write the component code

In modal.wxml:

<view hidden='{{modalHidden}}'>
  <view class='mask_layer' bindtap='modal_click_Hidden' />
  <view class='modal_box'>
    <view class="title">提示</view>
    <view class='content'>
      <text class='modalMsg'>{{modalMsg}}</text>
    </view>
    <view class='btn'>
      <view bindtap='modal_click_Hidden' class='cancel'>取消</view>
      <view bindtap='Sure' class='Sure'>确定</view>
    </view>
  </view>
</view>

In modal.wxss:

.mask_layer {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}
.modal_box {
  width: 76%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1001;
  background: #fafafa;
  margin: -150px 12% 0 12%;
  border-radius: 3px;
}

.title {
  padding: 15px;
  text-align: center;
  background-color: gazure;
}

.content {
  overflow-y: scroll; /*It can be scrolled beyond the height of the parent box*/
}

.btn {
  width: 100%;
  margin-top: 65rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: white;
}

.cancel {
  width: 100%;
  padding: 10px;
  text-align: center;
  color: red;
}

.Sure {
  width: 100%;
  padding: 10px;
  background-color: gainsboro;
  text-align: center;
}

.modalMsg {
  text-align: center;
  margin-top: 45rpx;
  display: block;
}

in modal.js

Component({
  properties: {
    modalHidden: {
      type: Boolean,
      value: true
    }, //The modalHidden property is defined here, and the property value can be specified when the component is used. The writing method is modal-hidden
    modalMsg: {
      type: String,
      value: ' ',
    }
  },
  data: {
    // here is some component internal data
    text: "text",
  },
  methods: {
    // put custom method here
    modal_click_Hidden: function () {
      this.setData({
        modalHidden: true,
      })
    },
    // Sure
    Sure: function () {
      console.log(this.data.text)
    }
  }
})

The third step, using components

Here I am calling the pages/modal/modal custom component on the pages/index/index page

First, the reference description is made in index.json, here is the tag name and reference path for setting the custom component

{
  "usingComponents": {
    "modal": "../modal/modal"
  }
}

Then call the component in index.wxml

<!-- call the modal component -->
<modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>

Bind data in index.js,

Page({
  data: {
    is_modal_Hidden:false,
    is_modal_Msg: 'I am a custom component'
  }
})

Rendering:

If you need to view more detailed documentation, you can view it in the official documentation, the address is: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/