preface

Small program development is in March 2017 began to do, then componenzed development is not so obvious, the official documentation is also a pen, for familiar with the Vue development of the front end to do, more headache than custom components, so write up is really very very painful!!

Starting with applets Base library version 1.6.3, applets support concise componentized programming. All custom component-related features require base library version 1.6.3 or higher. Developers can abstract functional modules within a page into custom components that can be reused across different pages. Complex pages can also be broken up into low-coupling modules to aid code maintenance. Custom components are very similar to the base components when used.

Implementation method

Start by creating a quick start template

Create the corresponding file

Create a components folder to store the components we will use in the future development. Today our goal is to implement a popbox component, so we create a Dialog folder in the Components component to store our popover components. After right-clicking on the New Component Dialog and naming it Dialog, the corresponding JSON, WXML, WXSS, jS4 files will be generated as part of a custom Component. Your project structure should look something like this:

Component configuration and development

The component initialization is ready, and the code and configuration of the component are next

We need to write the popover component template in dialog. WXML file, add the popover component style in dialog. WXSS file, which is written like the page,

Dialog. WXML as follows

<! --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 as follows

/* 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

Dialog. Json as follows

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

Dialog. Js as follows

// 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

The actual call

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!

{
  "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='I am the title'
      content='Congratulations on learning the applets.'
      cancelText='Got it.'
      confirm='Thank you'
      bind:cancelEvent="_cancelEvent"
      bind:confirmEvent="_confirmEvent">
    </dialog>

    <button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>
Copy the code

Index. Js configuration

//index.js
// Get the application instance
const app = getApp()

Page({

  /** * lifecycle function - listen for the page to complete the first rendering */
  onReady: function () {
    // Get the Dialog component
    this.dialog = this.selectComponent("#dialog");
  },

  showDialog(){
    this.dialog.showDialog();
  },

   // Cancel the event
  _cancelEvent(){
    console.log('You hit Cancel');
    this.dialog.hideDialog();
  },
  // Confirm the event
  _confirmEvent(){
    console.log('You hit OK');
    this.dialog.hideDialog(); }})Copy the code

Final test

The results of