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 parameter
include
, 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 used
template
- If you need to pass parameters and associate some events externally, use this parameter
Custom Components
the
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