Micro channel small program to fill the pit — custom components

Custom components Starting with applets Base library version 1.6.3, applets support concise component-based programming. Developers can abstract functional modules within a page into custom components that can be reused across different pages. Complex pages can also be broken up into low-coupling modules to aid code maintenance. Custom components are very similar to the base components when used.

preface

Contact after the vue since last year, open the floodgates, especially the thought of everything in the vue component, by the separation of data, each function module componentization, will also be code decoupling, again write code efficiency raised, ideas and more clear, in 2017, began to responsible for the company’s small application development, after stepped on countless pit, Also have released the two projects, small program also cited the thinking of the vue, data binding, page module separation, but again not like vue can disassemble the components separation of freedom, at last, just before half month, small program started the custom components open beta, I also is first introduced in the development of new project custom components, as before, Looking at super subtractive version of the official documents, began a small program to fill the pit trip.

Start componentization

As we all know, small program pages are modular management, each page is corresponding to four files, respectively responsible for the structure, logic, style and basic configuration, similarly, custom components also maintain such a structure, a custom component is composed of WXML, WXSS, JS, JSON, four files, If you want to introduce the corresponding component to the page, you need to write the following configuration in the JSON file of the page:

{ "component": true, "usingComponents": { "component-Name": "Path", ...... }}Copy the code

Similarly, if the component is also composed of more subdivided components, the configuration is the same, and the corresponding component is loaded directly as a tag in the upper WXML:

<component-Name></component-Name>
Copy the code

This completes a custom component that corresponds to the tag, such as the following page:

image.png

Product display area is composed of components, is divided into three components, display area > > title list, the list also can be divided into two components, continue to list > list, for this kind of high reusability, componentization can greatly reduce the amount of code and optimize the structure of the code, for example, point after opening more pages, You can reuse list + list content components, if the area below the product has dynamic display, transaction records, etc., you can reuse the above components, but how is the data transfer between components?

Component data passing

Data transfer between components can be divided into various types, for example, data and event transfer from the parent component to the subordinate page, the parent page listens for event callback from the subordinate page, and data transfer across levels, for example, product list data obtained from the home page is passed to the product list component:

Superior components:

<component-list list-data="{{ListData}}"></component-list>
Copy the code

Sub-components:

wxml:
  <view wx:for="{{ListData}}">
    <view class="item">{{item.data}}</view>
    ......
  </view>

js:
  Component({
    properties: {
    ListData: {
      type: Array,
      value: [],
      observer: function(newData, oldData){
        ......
      }
    }
  },
  data: {
    someData: {}
  },
  methods: {
    customMethod: function(){}
  }
})
Copy the code

Properties should declare any data that is passed from a Component. The data type should be a required value, and the Observer should listen for changes in the data. If the value passed by the parent page changes, two values, newData and oldData, can be captured in the Observer. In the Observer, methods of the component can be invoked to perform different operations. Also, components have a life cycle, which is slightly different from page, and is well documented. But what about data passing across components?

Components, according to official events are passed one by one, don’t broadcast mechanism and so on some trouble, pictured above, if the home page to display component list data is passed to the product details of the component (round), will be declared in each layer components, then put the massive time and data transmission.

According to the characteristics of multi-component data transmission, the identification of data or API can be passed down to request and render in the component. In this way, it is easier to manage components with high reuse rate. For example, home-show is the lower-level component. Home – in the show also includes components home – show – the title and the home – list, only into the appropriate logo, the different data in different components can be request and the rendering:

<home-show showTitle=" more="product" detailApi="{{ProductDetailApi}}" showList="{{info.EntProductModelList}}"></home-show>Copy the code

<list loadApi="{{api}}" root="{{root}}" detailApi="{{detailApi}}" isRefresh="{{isRefresh}}"></list>
Copy the code

<view class="show_container">
  <home-show-title title="{{showTitle}}" more="{{more}}"></home-show-title>
  <home-list list="{{showList}}" detailApi="{{detailApi}}" isNews="{{isNews}}"></home-list>
</view>
Copy the code

Component events

According to the official documentation, pages referencing components can listen for any event triggered by the component, written as follows:

<! <component-tag-name bindmyevent="onMyEvent" /> <component-tag-name bindmyevent="onMyEvent" />Copy the code

However, in actual use, it is found that the first method does not seem to have good compatibility and can be replaced by the following method:

<component-tag-name bind:myevent="onMyEvent" />
Copy the code

The triggerEvent method can be used to trigger events in a component, which is clearly documented and directly copied:

<! <button bindtap="onTap"> Click this button to trigger the "myevent" event </button>Copy the code

Component({ properties: {} methods: { onTap: Function (){var myEventDetail = {} // detail object Var myEventOption = {} // This. TriggerEvent ('myevent', myEventDetail, myEventOption)}})Copy the code

behaviors

Behaviors are features used to share code between components, similar to “mixins” or “traits” in some programming languages. Each behavior can contain a set of properties, data, lifecycle functions, and methods that are incorporated into the component when the component references it, and lifecycle functions that are called at the appropriate time. Each component can reference multiple behaviors. Behaviors can also reference other behaviors.

Behaviors are often cloudy when I first encounter them. In practice, I find that it actually involves extracting the content that needs to be defined separately from different components. You can reference it at the beginning of a component’s JS file, just like any library or file. When components have attributes or methods of the same name, they are overwritten, and the latter overwrites the former, while data is combined. For details, refer to the rules for covering and combining fields in documents. With behaviors, the possibilities of customized components are extended and different combinations can be made according to business needs

end

WeChat open, on the whole, the custom component, also once again open the small degree, developers can more efficiently and free development, but it’s still in beta, attention should be paid to the problems in the development or a lot of, for example, through component in WXSS file, you can define the style of the component, but there are some rules of the style of the custom component, Refer to the documented component templates and styles for this; In json files that reference component pages, adding usingComponents will also cause the page to be abnormal, and occasionally the path of the reference component will be inconsistent.

Pit filling is ongoing…