Components in wechat applets

preface

Before doing small program development, for the development of the more headache than the custom component, at that time the official document in this respect is only a few words, a brush with it, so it is really very very painful to write!!

Fortunately, the library of wechat small program started from 1.6.3, and the official part of the custom component has a relatively big change. First of all, the more obvious feeling is that the document is more than before, there is no! (small program document), now small program support simple component programming, you can abstract the page function module into custom components, in order to reuse in different pages, improve the readability of their own code, reduce their maintenance code cost!

This article is to teach you how to implement a small program custom components, sit tight ~

The specific implementation

To make a custom component, we first set a small goal, for example, we in the small program to achieve the WEUI popover component, the basic effect picture is as follows.

Step1

We initialize a small program (this sample base version library is 1.7), delete the sample code in it, and create a components folder to store the components we will use in future development. Today our goal is to implement a popbox component, so, Create a new Dialog folder in the Components Component to store our popover Component. After right-clicking on the new Component under the Dialog and naming it Dialog, the corresponding JSON WXML WXSS JS files will be generated. As part of a custom component, your project structure should look like this:

Step2

The component initialization is ready, and then we need to configure the component. First we need to declare the custom component, that is, set the component field in dialog.json to true:

{" Component ": true, // Custom component declaration "usingComponents": {} // Optional, used to reference other components}Copy the code

Second, we need to write the popover component template in dialog. WXML file and add the popover component style in dialog. WXSS file

The dialog.wxml file looks like this:

<! --components/Dialog/dialog.wxml--> <view class='wx_dialog_container' hidden="{{! isShow}}"> <view class='wx-mask'></view> <view class='wx-dialog'> <view class='wx-dialog-title'>{{ title }}</view> <view  class='wx-dialog-content'>{{ content }}</view> <view class='wx-dialog-footer'> <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view> <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view> </view> </view> </view>Copy the code

Dialog.wxss:

/* components/Dialog/dialog.wxss */ .wx-mask{ position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; Background: Rgba (0, 0, 0, 0.3); } .wx-dialog{ position: fixed; z-index: 5000; width: 80%; max-width: 600rpx; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #FFFFFF; text-align: center; border-radius: 3px; overflow: hidden; } .wx-dialog-title{ font-size: 18px; padding: 15px 15px 5px; } .wx-dialog-content{ padding: 15px 15px 5px; min-height: 40px; font-size: 16px; The line - height: 1.3; word-wrap: break-word; word-break: break-all; color: #999999; } .wx-dialog-footer{ display: flex; align-items: center; position: relative; line-height: 45px; font-size: 17px; } .wx-dialog-footer::before{ content: ''; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #D5D5D6; color: #D5D5D6; -webkit-transform-origin: 0 0; transform-origin: 0 0; - its - transform: scaleY (0.5); The transform: scaleY (0.5); } .wx-dialog-btn{ display: block; -webkit-flex: 1; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; } .wx-dialog-footer .wx-dialog-btn:nth-of-type(1){ color: #353535; } .wx-dialog-footer .wx-dialog-btn:nth-of-type(2){ color: #3CC51F; } .wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{ content: " "; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #D5D5D6; color: #D5D5D6; -webkit-transform-origin: 0 0; transform-origin: 0 0; - its - transform: scaleX (0.5); The transform: scaleX (0.5); }Copy the code

step3

Here are the components of the structure and style, but also the lack of what, that’s right, also lack of js, eyes are sharp, we may have discovered in dialog. WXML file there will be some such as {{isShow}}, {{title}} template variables, The _cancelEvent and _confirmEvent methods are also defined, which are implemented in dialog.js.

Dialog.js is a custom Component constructor. It is generated using the Component constructor in the applet. The Component constructor can be used to specify properties, data, methods, etc. For details, see the official documentation

Here’S a code comment to explain the use of some attributes in the constructor:

// components/Dialog/dialog.js Component({ options: { multipleSlots: True // Enable multiple slot support in component definition options}, /** * Component property list * for component custom Settings */ properties: {// popup title: {// property name type: String, // Type (mandatory). Currently, the accepted types include: String, Number, Boolean, Object, Array, null (indicating any type) Value: 'Title' // Property initial value (optional), if not specified one will be selected according to the type}, // popup content :{type: String, value: CancelText :{type: String, value: 'cancel'}, // popup confirm button text confirmText :{type: String, value: }}, /** * private data, component's initial data * available for template rendering */ data: {// popup control isShow:false}, /** * list of component methods * update properties and data similar to update page data */ methods: HideDialog (){this.setData({isShow:! This.data.isshow})}, // Show the box showDialog(){this.setdata ({isShow:! this.data.isShow }) }, */ _cancelEvent(){// Trigger the cancellation callback this.triggerEvent("cancelEvent")} _confirmEvent(){// Trigger the successful callback this.triggerEvent("confirmEvent"); }}})Copy the code

step4

By now, you should have completed most of a custom popover component, but you didn’t notice any changes after you saved it, because we still need to introduce it in the index. WXML file!

First we need to introduce components in index.json:

{
  "usingComponents": {
    "dialog": "/components/Dialog/dialog"
  }
}
Copy the code

We then introduce it in index. WXML and add some of our custom values, as follows

<! --index. WXML --> <view class="container"> <dialog id='dialog' title=' content=' CancelText ="_cancelEvent" bind:confirmEvent="_confirmEvent"> </dialog> <button type="primary" bindtap="showDialog"> ClickMe! </button> </view>Copy the code

The last step is the index.js configuration. Yes, this is also very simple, so I just copied and pasted it

//index.js // getApp instance const app = getApp() Page({** ** lifecycle function -- listen to Page first render complete */ onReady: Function () {this.dialog = this.selectComponent("#dialog"); }, showDialog(){ this.dialog.showDialog(); }, // cancel event _cancelEvent(){console.log(' You clicked cancel '); this.dialog.hideDialog(); }, // confirm event _confirmEvent(){console.log(' You clicked OK '); this.dialog.hideDialog(); }})Copy the code

To this! And you’re done!

step5

Let’s put it to the test:

After clicking the button, the following effect will appear:

Click the cancel or OK button, we set the popover in the event will close, and will print out the corresponding information, the specific click should do, it is up to you, I can only help you here ~

conclusion

Now that you’ve mastered the basics of custom component development in applets, give yourself a thumbs up and a call. In general, small program after the introduction of custom components, feel a lot more convenient, have not got friends, hurry to learn, later use component-based development, will not be so uncomfortable, come on oh ~

I have hosted the specific code on Github, welcome issue~