Component design specifications for WeChat mini-program development

WeChat Mini Program Component Design Specifications

The idea of ​​component-based development runs through my development and design process. I have benefited from this kind of thinking for a long time.

1. Reusable components - reduces the amount of duplicate code
2. Components as separate functional units - easy to maintain
3. The component is used as a template, which can easily calculate various attributes instead of introducing wxs in wxml
   

In the daily process of developing components for small programs, I generally follow the following rules:

1. Style independence & dependency independence

During component development, components can rely on global styles. When components are introduced, they are rendered using both the page style and the global style.

options:
    addGlobalClass: true,
    multipleSlots: true
}

However, based on the portability of components, it is recommended that each component be configured not to rely on global styles.

options:
    addGlobalClass: false,
    multipleSlots: true
}

Select the style you want for each component in the wxss configuration of that component.

During component development, components can be introduced into app.js, based on

const app = getApp();

However, considering the convenience of porting, it is more appropriate to use Storge to obtain global data in components.

Even if it depends on some js files, you can put the file in the component directory and import it.

Property value setting listener

The component can receive values ​​passed in by the page, but the data format in the component may not match the page display requirements and some adjustments need to be made. These adjustments are recommended to be implemented in the component. Modifications to the data within the component will not affect the data within the page.

properties:
    active:{
      type:Number,
      observer:function(newVal,oldVal){
        //Preprocess the data}
    }
}

3. All operations that change the page stack are completed by the page

Clicking component C in page A will jump to page E

Clicking component C in page B will jump to page F

In this case, the click event can be handed over to the page for processing, and the component only makes an event notification. The specific jump event is implemented by the function within the page.

Use in components:

this.triggerEvent('click',args)

Page A:

<c-component bind:click="navtoPageE" />

Page B:

<c-component bind:click="navtoPageF" />

Try not to nest components within components

A loading component was used in the component, but the display of the loading component was controlled by parameters. When the problem of not being able to hide occurred, the specific component could not be located.

Components define a unified class

This is to facilitate the unified call of a method in the component, which is often used as a template.

let acmp = this.selectAllComponents('.card')
acmp.forEach(function (ele, index) {
    ele.closeActionBar();
})

Using the component lifecycle

The component supports the life cycle. Some data or counter functions that only need to be initialized once should be completed in attached.

lifetimes:
    attached(){
      this.setData({
        openid:app.globalData.openid
      })
    }
}

Reference Documentation

WeChat Mini Programs - How to transfer information and call functions between pages and components

WeChat Mini Programs - A few tips on speeding up the development of mini programs

Summarize

This is the end of this article about component design specifications for WeChat mini-program development. For more relevant WeChat mini-program component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!