preface

Since its release on January 19, wechat mini program has been met with both joy and worry. Once upon a time it had all kinds of expectations of the front workers in zhang’s sentence :” no “,” can not “small and medium-sized displaced hope. But it as a light application tool, to our developers bring convenience is beyond reproach. The big feature of custom components has also been supported since version 1.6.3 of the Mini-application Base library. Low version has to be compatible with processing, in the searched online a heap of WeChat applet custom components after that, I seem to find no very good introduction to it, so today bloggers here also want to show you the way to carefully introduce WeChat this custom function of small programs, has said the place with bad boys look correct, thank you! (╹ del ╹)

Use custom components

Application Scenarios: When we are in the design of our project will be found in different pages, sometimes use the same function module, at this time we can be the same part of the extract and separate set as a “page”, and then to apply to the local reference is ok, above is my personal understanding of custom components, specific practices, please read the following content.

1. Create a custom component

As I mentioned above, a custom component is just like a page, so we should write it with json, WXML, WXSS, and JS files just as we would design a page.

Here the blogger introduces custom components in the form of a case study.

First, create a new project called wxComponent, 2. Create a Components folder in the Pages folder to hold all our custom components. Create a CPT folder under the Components folder to hold the CPT custom components, and create the corresponding configuration files, as shown below:

component.png

Json, which tells the developer that this is a component:

{
  "component": true
}Copy the code

Write component template in WXML file and add component style: CPt. WXML file in WXSS file

<! This is the internal WXML structure of the custom component --> <view class="inner">
  {{innerText}}
  <button bindtap='customMethod'</button> <slot></slot> </view>Copy the code

CPT. WXSS file

/* The style here applies only to this custom component */. Inner {color: red; }Copy the code

This’ can be left alone for the time being.

And custom components should not use id tags or attribute and tag name selectors when designing structures. This is because components are reused there, and only one ID is allowed on a page.

Four: Register components

In the js file of a custom Component, you need to use Component() to register the Component and provide the Component’s property definitions, internal data, and custom methods, as in cpt.js:

Component({properties: {// Here we define the innerText property. The value of the property specifies the innerText: {when used by the Component.type: String,
      value: 'default value'}}, data: {someData: 1}, methods: {// here is a customMethod customMethod:function () {
      console.log('customMethod')}}})Copy the code

Five: Use custom components here FOR simplicity, I will directly use the logs page to call custom components. First, you should reference the declaration in the page where you want to use the component. So in a.JSON file. As in logs.json:

{
  "navigationBarTitleText": "View startup log"."usingComponents": {
    "component-tag-name": ".. /components/cpt/cpt"}}Copy the code

Now we can use the custom component in the page just like any other component. For example, IN logs.wxml I use:

<! --logs.wxml--> <view class="container log-list"> <! This is a reference to a custom component --> <component-tag-name inner-text="Some text"></component-tag-name>
</view>Copy the code

Jumping to the Logs page looks like this:

result.png

In the example above, the CPT. WXML tag is written to the component. If we do not write something else to the component tag when referencing CPT, the tag will not be displayed

That is, if we change logs.wxml:

<! --logs.wxml--> <view class="container log-list"> <! This is a reference to a custom component --> <component-tag-name inner-text="Some text"> <view> Here is what is inserted into component slot </view> </component-tag-name> </view>Copy the code

View the Logs page at this point:

slot.png

And the location of the
is also determined when you design the CPT component. In the above example, I put slot under the button:

<! This is the internal WXML structure of the custom component --> <view class="inner">
  {{innerText}}
  <button bindtap='customMethod'</button> <slot></slot> </view>Copy the code

You can also place it in a different location for a different effect.

Normally, there is only one slot in a component, but sometimes our custom component may use more than one slot. Don’t worry, our wechat applet can also allow you to do this. 1. Declare it in cpt.json(the JSON file of your custom component)

Component({
  options: {
    multipleSlots: true// Enable multi-slot support in component definition options}, properties: {/*... */ }, methods: { /* ... * /}})Copy the code

2. At this point, you can use multiple slots in the WXML of this component, distinguished by different names:

<! This is the internal WXML structure of the custom component --> <view class="inner">
  <slot name="header"< </slot> <-- be sure to use the name attribute --> {{innerText}} <button bindtap='customMethod'> click </button> <slot name="footer"></slot>
</view>Copy the code

3. The slot property is used to insert nodes into different slots.

<! --logs.wxml--> <view class="container log-list"> <! This is a reference to a custom component --> <component-tag-name inner-text="Some text">
    <view slot="header"> Header contents </view> <view slot="footer"</view> </component-tag-name> </view>Copy the code

After the language

There are many ways to use custom components in wechat applet, such as component life cycle, events and so on. For more information, please refer to the official documents.