1. Create a Component



First create the Components folder as shown above, and home-item is the component module of the item in the top rendering. As you can see here, a component can create four files just like a normal page. In the JS file you can bind the data and interact with the parent component.

home-item.json

{" Component ": true, "usingComponents": {} // Can use other components}Copy the code

home-item.js

//(Component constructor) Component({// some Component options options: {multipleSlots: Type indicates the type of the property, value indicates the initial value of the property, and observer indicates the response function properties when the property value is changed: CoverUrl: {type: String, value: "Http://img.youpenglai.cn/meetingpic/0b24376c43b1c372076aa65253b2f0ca123.jpg"}, / / activity title activityTitle: {type: SignTimeRange: {type: String, value: "00:1-23:59"}, // Is the organizer organizerStatus: SignTimes: {type: Number, value: 0}, // Check the status of signStatus: {type: Number, value: 0} {isShowOrganizer:false,}}, // Component methods, including event response functions and any custom methods {// Jump activity details activityDetailTap: function(e) { var currentPosition = e.currentTarget.dataset.currentPosition this.triggerEvent('signEvent', {'currentPosition': currentPosition})}} // Component lifecycle function, can be a function, or a method name defined in the methods section attached: function(){}, moved: function(){}, detached: function(){}, })Copy the code

The WXML and WXSS files are not covered here. Take a look at how the parent page references the child component.

home.json

The component is imported into the parent component’s JSON file

"usingComponents":{ "home-item":".. /components/home-item/home-item" }Copy the code

home.wxml

<! <view class='join-layout'> <block wx:for="{{joinDatas}}" wx:for-item="joinItem"> <! --> <home-item id="homeItem" <! Bind :signEvent="signEvent" coverUrl='{{joinItem.dakaPic}}' activityTitle='{{joinItem.dakaName}}' signTimeRange='{{joinItem.dakaTimeRange}}' organizerStatus='{{organizerStatus}}' signTimes='{{joinItem.dakaNum}}' signStatus='{{joinItem.status}}'> </home-item> </block> </view>Copy the code

home.js

// The parent receives the child's event and performs the corresponding signEvent: Function (e) {// console.log(e) var signPosition = e.daail. currentPosition var dakaBean = JoinDatas [signPosition] // Wx. navigateTo({url: '.. /detail/joined-detail/joined-detail? actId=' + dakaBean.actId, }) // wx.navigateTo({ // url: '.. /detail/not-join/not-join? actId=' + dakaBean.actId, // }) // if (dakaBean.status == 0) { // utils.showToast("none", "The current time is beyond the scope of clock time, please be patient") / /} else {/ / / / not clock in / / wx navigateTo ({/ / url: '.. /detail/joined-detail/joined-detail? actId=' + dakaBean.actId, // }) // } },Copy the code

Parent components need to pass events to each other. First, the parent component sends the event in the child component through this.triggerEvent(‘ signEvent ‘, {}). The parent component performs event binding on the child component and responds to the event in the JS file.

The method of obtaining data is not described here. The code above is to bind the data of the child component in the WXML of the parent component. The coverUrl and other parameters above are the attribute values declared in the component, which are used to pass values here. Components are only introduced in the parent component’s JSON file via usingComponents, and there is no need to introduce the WXML layout and WXSS style of the child component as in WXML and WXSS using template.