Why components? Separate complex pages into multiple components, with clear structure, simple maintenance and reusability

1. Define components

a. New directory components All components of the project will be placed in this directory

b. Right-click on components to create a new directory w-tab-control

c. Creating new components by right-clicking on w-tab-control automatically generates four files (js, json, wxml, wxss)

//  1.w-tab-control.wxml
<view class="titleclass">I am the title.</view>  //titleclass is a class passed over using component pages
<view class="tab-control">
  <block wx:for="{{titles}}" wx:key="{{index}}">
    <view class="w-tab-item {{currentIndex == index ? 'active' :'' }}" 
bind:tap="tabClick" data-index="{{index}}">
      <text >{{item}}</text>
<my-cpn />  //Other components referenced

//  2.w-tab-control.js
  properties: {
    titles:{      //Data passed over using component pages
      type:Array,  //Indicating type
      value:[]    //Default value
  externalClasses: ['titleclass'], //Receive the class passed over using the page
  data: {
  methods: {
      var index = e.currentTarget.dataset.index;
        currentIndex: index

      // Pass events to pages that use components  
                { index, name: this.properties.titles[index]},

//  3.w-tab-control.json
  "component": true,  //Components cannot be deleted when they are used
  "usingComponents": {
    }  //You can refer to other components in it.

//  4.w-tab-control.wxss
  line-height: 44px;
  display: flex;
  flex: 1;
  text-align: center;
.active text{
  border-bottom:3px solid red;
  padding:10px 5px;

2. Reference components need to refer to components in / pages/cpn/cpn

// 1. cpn.json

  "usingComponents": {
    "w-tab-control":"/components/w-tab-control/w-tab-control" //Reference component

// 2.cpn.wxml  
//Page usage
// titles item component delivers data and receives it in component js
// Bid: tabOnClick= "tabclick" returns events  
    //Bind: tabOnClick tabOnClick is the name returned
    // Name of tabclick current page (cpn.js) event

    titles="{{['home page','details','introduce']}}" 
    bind:tabOnClick="tabclick" />

// 3.cpn.js


  tabclick:function(e){  //Events passed by components


//  4.cpn.wxss


Note: Component names consist of (a-z, -,) and cannot be used with special symbols and capital letters