[2] Micro channel applet skill points - custom components - component lifecycle, the method, parameter passing, style class

I. Abstract: Through a custom component called the banner of custom components to introduce the style, parameter passing, use component life cycle, assembly methods

banner component is the function of a top banner at the top of the page, inside the text and click on the jump page is passed in as a parameter

 

This reference

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

Second, the technical points:

1. component life cycle lifetimes

2. The component properties prototype property

3. The assembly method methods

4. Using style classes assembly

Third, the project started

　　Connected to a text, we still use project called 'development component' of the components folder of the project following files are created below

 

 The banner folder is the body of our components

We then fill in the following folder in the file banner.json

 

 That he is a component

Fill in the following file banner.js

 

 The following three new properties is the main content of the article, component methods, properties prototype components, component life cycle

Let a prototype property named text to the component definition, we want to identify the text banner show

 

 FIG, since the prototype on the property of the incoming components need be converted from a string, it is necessary to explicitly specify the type, the value is the value of its default value. There are other attributes declare methods, reference may be official documents

In banner.wxml, we directly to the text displayed

 

 In app.json, the global reference component

 

Then we use components in index.wxml, note that the prototype property use here.

  ，

 You can see, our property values ​​defined on components are introduced to the assembly when it is not passed were set to the default value, and part of the internal data of the prototype property is also a component, it can also do data binding, then we can see that, you can get its value this.data.XXXX way

Subsequently, we have to define the components of style class, write the following code in banner.wxss

.banner{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: red;
  color: white;

  width: 100%;
  height:100rpx;
  position: fixed;
  top: 0px;
  left:0px;
　　
z-index: 1;

}

Then the root banner.wxml binding style

 

Save, we can note that the page has become such, our basic style will do the work

 

Then, we add a component where a prototype property, to indicate the path to jump to the page and bind a method to tap event,

 

When the user does not fill out where, where will be an empty string '', so we attached lifecycle methods to determine where the assembly state. If it is '' the path we gave him the current page

 

 

 The complete code is as follows

Component({
  data:{},
  methods:{
    goto:function(){
      wx.navigateTo({
        url:this.data.where,
      })
    }
  },
  properties:{
    text:{
      type:String,
      value:"热烈欢迎"
    },
    where:String
  },
  lifetimes:{
    attached:function(){
      const pages=getCurrentPages()
      const page=pages[pages.length-1]
      if(this.data.where=='')
      this.setData({
        where:`/${page.route}`
      })
    }
  }
})

 

Click on our banner component, you can see the page is routed to the current page

If we set the property where, for example, just the default project provides a logs page for us. We look routed to this page

 

 Click the banner, you can see the successful entry logs

 

 Successful banner components