Develop the first applet custom component

Mini Program custom components are developed using WeChat Mini Programs, if you:

1. With experience in small program development, you can directly start developing custom components.

2. If you have not used Mini Programs before, it is recommended to simply learn about Mini Programs ( Mini Program Development Documentation) (opens new window)) before reading this manual.

Component configuration introduction

Template download link (opens new window), you can directly modify the relevant configuration.

1. There must be a config.json configuration file in the file directory

config.json

{
   "components":{
   	"root": "components/demo/index"
   },
   "main":""
}

Among them, components written by yourself are placed in components, and multiple components can be uploaded at the same time;

main is an externally exposed plugin component that supports platform-side extensions;

There is no restriction on the directory name or location of the components and plugin files written by yourself;

2. Write a simple applet component

demo/index.wxml:

<view class="container">
   <view>小程序自定义组件--lego</view>
</view>

demo/index.wxss:

.container{
 width: 300px;
 height: 100%;
 background:orange;
}

demo/index.js:

Component({

 methods:{

 },
 lifetimes:{
   attached() {
     console.log("attached")

   }
 }
});

demo/index.json:

{
 "component": true,
 "usingComponents": {}
}

3. Upload preparation

Directly compress and package the folder where the written components are located, and prepare to upload.

As shown below, package the cmpt folder directly:

Component upload introduction

Step 1: Find the "Custom Components" management interface in the management background, click "New" and upload the file

Step 3: In the mobile layout designer, find the "Custom Components" toolbox, you can see the component, and drag it into the page layout

Step 4: In the front-end interface, you can see the interface after the "first custom component" is loaded