Quick Start wechat Applets Life Cycle chapter (3- Components)

Stopping by to “like” and focus on your heart may encourage the front end to play better

Component life cycle

The front-end project development of the modern era is based on componentization, so learning wechat small program – component life cycle will be more conducive to our development of high-quality project code.

Build the parent component structure

  1. Create a new component components\chitu\chitu

  2. Page reference

    1. index.json

      {
  "usingComponents": {
    "chitu":"/components/chitu/chitu"}}Copy the code

    2. index.wxml

      <chitu></chitu>
Copy the code

Component life cycle

The lifecycle of the component itself

The life cycle describe
created Executed when the component instance has just been created
attached Executed when the component instance enters the page node tree
ready Execute after the component is laid out in the view layer
moved Executed when the component instance is moved to another location in the node tree
detached Executed when the component instance is removed from the page node tree
error Executes whenever a component method throws an error

The life cycle of the page on which the component resides

There are also special life cycles that are not strongly associated with the component, but sometimes the component needs to be known so that it can be handled internally. Such a life cycle is called the “life cycle of the page on which the component resides,” and is defined in the pageLifetimes definition section. The available life cycles include:

The life cycle describe
show Execute when the page the component is on is displayed
hide Executed when the page on which the component is located is hidden
resize Executes when the page size of the component changes

Specific implementation can refer to the following

Component({
  pageLifetimes: {
    show: function() {
      // The page is displayed
    },
    hide: function() {
      // The page is hidden
    },
    resize: function(size) {
      // Page size changes}}})Copy the code

created

SetData does not take effect when triggered when the component instance has just been created

trigger

Triggered when the component instance has just been created

role

You can add some custom attributes to this

code

Component({
  lifetimes: {
    /** * The component has just been created */
    created() {
      console.log("The Created component has just been created"); }}})Copy the code

The effect

attached

Triggered when a component instance is created to a page node when setData is already available

trigger

Triggered when a component instance is created to a page node when setData is already available

role

Typically used to send asynchronous requests to fetch data assignment data and render the page

code

Component({
  lifetimes: {
    /** * Triggered when a component instance is created to a page node
    attached(){
      console.log("Triggered when the Attached Component instance is created to the page node"); }}})Copy the code

The effect

ready

Triggered after the component view has been rendered

trigger

Triggered after the component view has been rendered

role

Can be used to get the node style after rendering

code

Component({
  lifetimes: {
    /** * Triggers */ after the component view is rendered
    ready() {
      console.log("Ready component view triggers after rendering"); }}})Copy the code

The effect

moved

This takes effect when the position of the component node changes

trigger

We understand that there is an array that generates a series of components through a loop, and when the positions of the elements in the array change, the positions of the components change. This triggers the Move life cycle

role

Can be used as a side effect of the component itself due to position changes

code

  1. The parent page

    1. index.js

      
Page({
  data: {
    list: [{id: 0.text: 0 },
      { id: 1.text: 1}},onLoad: function () {
    setTimeout(() = > {
      const [a, b] = this.data.list;
      const list = [b, a];
      this.setData({ list })
    }, 2000); }})Copy the code

    2. index.wxml

      <view>
  <chitu wx:for="{{list}}" wx:key="id"> {{item.text}} </chitu>
</view>
Copy the code

  2. Child components

    1. wxml

      <view><slot></slot></view>
Copy the code

    2. js

      Component({
    /** * Triggers */ when the position of the component changes
    moved() {
      console.log("Triggered when the position of the Moved component changes"); }}})Copy the code

The effect

The timer waits for 2s to modify the array through setData while observing the text in the page

detached

Triggered when a component is removed from the page

trigger

Triggered when a component is removed from the page the component is removed from the parent page if it is hidden by wx:if

role

Stopping an asynchronous Task

code

  1. The parent page

    1. index.js

      Page({
  data: {
    show: true
  },
  onLoad: function () {
    setTimeout(() = > {
      this.setData({ show: false})},2000); }})Copy the code

    2. index.wxml

      <view>
  <chitu wx:if="{{show}}">Red rabbit</chitu>
</view>
Copy the code

  2. Child components

    Component({
  lifetimes: {
    /** * Triggered when a component is removed from the page */
    detached(){
      console.log("Detached Triggers when a component is removed from the page"); }}})Copy the code

The effect

error

Triggered when there is an error in the code within the component

trigger

Triggered when there is an error in the code within the component

role

Can be used to collect error information or give user friendly prompts

code

Component({
  lifetimes: {
    created() {
      // make a blind call
      this.setabcd();
    },
    /** * Triggered when the code inside the component has an error
    error(){
      console.log("Error is triggered when code within a component fails."); }}})Copy the code

The effect

Wechat account of friends

Add big brother wechat and thousands of peers to enhance technical communication life

hsian_

The last

The code word is not easy and your clicks and likes and comments are my best motivation