preface

When I was introduced to template in teacher Yue’s video, she said that this template had a shortcoming, which probably meant that the encapsulation degree was not enough, only the template made the page and style, and the logic could not be written. Today I learned about the concept of a custom component and tried it out. It seemed to make up for the weakness of template, so I wrote a small demo, which is also a note

I think

  • If you do not need to pass parameters or send events, you can use this parameterinclude, equivalent to directly copy the layout over
  • If you need to pass parameters, but do not need to send events to the external, internal processing, can be usedtemplate
  • If you need to pass parameters and associate some events externally, use this parameterCustom Componentsthe

The central idea of custom components is to abstract functional modules within a page into custom components, which can be reused in different pages. Complex pages can also be broken up into low-coupling modules to aid code maintenance

The effect

It’s a menu component, and the data is pumped in from the outside.

Currently I am still looking at how to achieve the menu popup damping animation effect

implementation

The code structure is as follows:

New component Menu:

menu.js

var Logger = require('.. /utils/Logger.js'Menu_list: Array,}, // Data: {showMenu:true
  },

  attached: function() {this.setData({menu_list: this.data.menu_list})}, methods: {// Click onCreateTap:function() { this.setData({ showMenu: ! This.data.showmenu})}, // Click the expanded single button onItemTap:function(event) { var item = event.currentTarget.dataset.item; // The parent component is given a triggerEvent. https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html var menuEventDetail = { item } this.triggerEvent('handleMenu'//menuEventOption is the option to trigger the event, including setting whether the event bubbles or not. // menuEventOption = {// //} // this.triggerEvent()'handleMenu', menuEventDetail, menuEventOption)
    }
  }
})
Copy the code

Refer to the Component lifecycle in the documentation:

Set the data selection within the Attached method.

triggerEvent

To view the document

this.triggerEvent(eventName, eventDetail, eventOption)

  • EventName: indicates the eventName
  • EventDetail: The object passed by the event, which is the content of the detail property in eventName
  • EventOption: specifies whether the eventName should bubble or not, but the default is false

The key is to add a custom component declaration to menu.json for all-hand typing:

{
  "component": true."usingComponents": {}}Copy the code

menu.wxml

The number of menus is based on the menu_list. The explicit and implicit menus are controlled by showMenu

<view class='container'>
  <view hidden="{{showMenu? false:true}}" class='sub-btn-container'>
    <block wx:for='{{menu_list}}' wx:key='index'>
      <view class='sub-btns' catchtap='onItemTap' data-item='{{item}}'>
        <image class='btn' src='{{item.src}}' />
        <text class='sub-btn__name'>{{item.name}}</text>
      </view>
    </block>
  </view>
  <image catchtap='onCreateTap' class='btn' src='/resources/imgs/ic_create.png' />
</view>
Copy the code

The display content of the menu is controlled by external datas/menu-data.js

var menu_list = [{
  id: 1,
  name: 'posts',
  src: '/resources/imgs/ic_create_1.png'
}, {
  id: 2,
  name: 'information',
  src: '/resources/imgs/ic_create_2.png'
}, {
  id: 3,
  name: 'photos',
  src: '/resources/imgs/ic_create_3.png'
}]

module.exports = {
  menu_list: menu_list
}
Copy the code

Data is introduced where it is used

Use of components

home.js

var menuData = require('.. /.. /datas/menu-data.js')
var Logger = require('.. /.. /utils/Logger.js')

Page({
  onLoad: function() {
    this.setData({
      menu_list: menuData.menu_list,
    })
  },
  onReady: function() {
    this.menu = this.selectComponent("#menu");
  },
  handleMenu: function(event) {// The detail in this case is menuEventDetail defined in the custom component var item = event.detail.item; Logger.v("item", item);
    wx.showToast({
      title: 'new' + item.name,
    })
  }
})
Copy the code

home.wxml

<view> <! -- handleMenu serves as a bridge between parent and custom components --> <menu class='menu' menu_list='{{menu_list}}' bind:handleMenu='handleMenu' />
  <text class='text'>HOME</text>
</view>
Copy the code

One more key point: The place to use, in this case home, is to use this component in home.json (the alias before the quotation marks is used in WXML).

home.json

{
  "usingComponents": {
    "menu": "/components/menu"}}Copy the code

portal