(Essence) On July 15, 2020, the use of wechat mini program Component

Component definition

Component({
  // behavior1.js
  // module.exports = Behavior({
  // behaviors: [require('behavior2.js')],
  DefinitionFilter (defFields, definitionFilterArr) {},// Define segment filters for custom component extensions.
  // })
  // A code reuse mechanism between components similar to mixins and traits
  behaviors: [require('behavior1.js')].// The external property of the component is the mapping table from the property name to the property Settings
  properties: {
    myProperty: { / / the property name
      type: String.// Type (mandatory), currently accepted types include: String, Number, Boolean, Object, Array, null (for any type)
      value: ' '.// The initial value of the property (optional), if not specified one will be selected based on the type
      observer: function (newVal, oldVal) {} // The function executed when the property is changed (optional). Alternatively, it can be written as the method name string defined in the methods section, e.g. '_propertyChange'.
    },
    myProperty2: String // A simplified definition
  },
  // Component data
  data: {
    A: [{
      B: 'init data.A[0].B'}},// Private data that can be used for template rendering
  relations: {}, // Define the relationship between components
  externalClass: [].// The external style class accepted by the component
  // Some options
  options: {
    multipleSlots: true // Enable multiple slot support in the options at component definition
  },
  lifetimes: {
    // The lifecycle function can be a function, or a method name defined in the Methods section
    created: function () {}, // Execute when the component instance has just been created. Note that setData cannot be called at this time
    attached: function () {}, // Executed when the component instance enters the page node tree
    ready: function () {}, // Execute after component layout is complete
    moved: function () {}, Execute when the component instance is moved to another location in the node tree
    detached: function () {}, // Executed when the component instance is removed from the page node tree
    error: function () {
      // The page is displayed
    },
    show: function () {
      // The page is displayed
    },
    hide: function () {
      // The page is hidden
    },
    resize: function (size) {
      // Page size changes}},pageLifetimes: {
    // The lifecycle function of the page on which the component is located
    created: function () {}, // Execute when the component instance has just been created. Note that setData cannot be called at this time
    attached: function () {}, // Executed when the component instance enters the page node tree
    ready: function () {}, // Execute after component layout is complete
    moved: function () {}, Execute when the component instance is moved to another location in the node tree
    detached: function () {}, // Executed when the component instance is removed from the page node tree
    error: function () {
      // The page is displayed
    },
    show: function () {
      // The page is displayed
    },
    hide: function () {
      // The page is hidden
    },
    resize: function (size) {
      // Page size changes}},// Component methods, including (event response functions) and (arbitrary custom methods)
  methods: {
    onMyButtonTap: function () {
      this.setData({
        // Attributes and data are updated in a similar way to page data
        myProperty: 'Test'})},_myPrivateMethod: function () {
      // Internal methods suggest starting with an underscore
      this.replaceDataOnPath(['A'.0.'B'].'myPrivateData') // set data.a [0].B to myPrivateData
      this.applyDataUpdates() // Update data
    },
    _propertyChange: function (newVal, oldVal) {}}})Copy the code

<! -- component custom-component.wxml --><custom-component>
  <view>{{myProperty}}</view>
  <button bindtap='onMyButtonTap'>Button</button>
  <view>{{A[0].B}}</view>
  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button>
</custom-component>
Copy the code

{
  "component": true."usingComponents": {}}Copy the code

Page usage component

{
  "usingComponents": {
    "my-component": "/components/custom-component"}}Copy the code

<! -- Page WXML --><my-component my-property="example" />
Copy the code