Detailed explanation of the code used by WeChat applets to develop their own small component instances

This article describes how to develop and create small component instance code by yourself. This article mainly describes how to develop and use small component instance code by yourself, for more information, see

Make widgets by using applets

Some common things in our daily life can be encapsulated into components and then used on various pages. For small programs, we can also encapsulate some public things we need.

Here we will explain a small plug-in.

As shown in, a small plug-in, click to expand. when you click close, the button is closed.

WXML (APP. wxml) of the page)

   
      
         
            
             
           
          
            
               
       
       
        
        
       
         Homepage
        
              
             
               
       
       
        
        
       
         Order
        
              
             
               
       
       
        
        
       
         My
        
              
             
               
              
           
         
     
    
      
     
  
 

This is mainly the display of the pressure surface of the plug-in, all written in In the tag.

Page JS (APP. js)

Var iconList ={}; // Set an object name to store data iconList. wdg = {// The page data to be stored for the VIEW layer. closeAllIcon and showAllIcon are the corresponding methods: data: {index: 0, close: 0}, closeAllIcon: function (e) {this. setData ({close: 1})}, showAllIcon: function (e) {this. setData ({close: 0}) }}; module. exports = iconList // expose the interface for convenient calling outside

The package is encapsulated, so how to use it.

On the required WXML page:

By introducing the catty page

.

On the required WXML page:

Use var iconList = require ('../wdg/iconlist') to introduce the corresponding JS

var util= require('../../util/util');var Page = new util.Page({  Wdgs: [iconList.Wdg]});

Introduce the corresponding file.

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

The above is a detailed description of the code used to develop your own small component instance. For more information, see other related articles in the first PHP community!