This article brings you related issues about WeChat Mini Program, which mainly introduces some basic content, including custom components, style isolation, data, methods and properties, etc. , let’s take a look at it, I hope it will be helpful to everyone.

【Related learning recommendations: 小program learning tutorial】

1. Custom components

1.1. Create components

• In the root directory of the project, right-click and create components -> test folder

• On the newly created components -> test folder, right-click the mouse and click New Component

• Type the name of the component and press Enter, the 4 corresponding to the component will be automatically generated files, the suffixes are .js, .json, .wxml and .wxss

1.2, reference components

• Local reference: The component can only be used within the currently referenced page

• Global reference: The component can be used in each mini program page

1.3. Local reference components

The way to reference components in the .json configuration file of the page is called local reference. The sample code is as follows:

# 在頁(yè)面的 .json 文件中，引入組件
{
  "usingComponents": {
    "my-test": "/components/test/test"
  }
}
# 在頁(yè)面的 .wxml 文件中，使用組件
<my-test></my-test>

1.4. Global reference components

The way to reference components in the app.json global configuration file is called global reference . The sample code is as follows:

# 在 app.json 文件中，引入組件
{
  "usingComponents": {
    "my-test": "/components/test/test"
  }
}

1.5. Global reference VS local reference

Choose the appropriate reference method based on the frequency and scope of use of the component. ：

• If a component is frequently used in multiple pages, it is recommended to make a global reference

• Use a component only on a specific page is used in, it is recommended to make a local reference

1.6. The difference between components and pages

From the surface , components and pages are composed of four files: .js, .json, .wxml and .wxss. However, there are obvious differences between the .js and .json files of components and pages:

• The "component": true attribute needs to be declared in the .json file of the component

• The Component() function is called in the .js file of the component

• The event processing function of the component needs to be defined in the methods node

2. Style isolation

##2.1. Component style isolation

By default, custom components The style only takes effect on the current component and will not affect the UI structure outside the component.

Prevent external styles from affecting the internal styles of components

Prevent component styles from destroying external styles

2.2. Notes on component style isolation

The global styles in app.wxss are not valid for components

Only the class selector will have the style isolation effect, and the id selector, attribute selector, and label selector will not be affected. Impact of style isolation

It is recommended to use class selectors in components and pages that reference components. Do not use id, attribute, and label selectors

2.3. Modify the style of the component Isolation options

By default, the style isolation feature of custom components can prevent the interference between internal and external styles of the component. But sometimes, we want to be able to control the style inside the component from the outside. At this time, you can modify the style isolation option of the component through stylelsolation. The usage is as follows:

# 在組件的 .js 文件中新增如下配置
Component({
  options: {
    stylelsolation: 'isolated'
  }
})
# 或在組件的 .json 文件中新增如下配置
{
  "stylelsolation": "isolated"
}

2.4. Optional values ??of stylelsolation

| Selected value | Default value | Description? ? ? ? |

| :----------: | :----: | --------------- -------------------------------------------------- -------------------------------------------------- ---------- | --------------------------------------- ---------------------------------- |

| isolated | 是 | 表示啟用樣式隔離 | 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會(huì)互相影響 |

| apply-shared | 否 | 表示頁(yè)面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁(yè)面 |

| shared | 否 | 表示頁(yè)面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會(huì)影響頁(yè)面和其他設(shè)置了 apply-shared 或 shared 的自定義組件 |

3、數(shù)據(jù)、方法和屬性

3.1、data 數(shù)據(jù)

在小程序組件中，用于組件模板渲染和私有數(shù)據(jù)，需要定義到 data 節(jié)點(diǎn)中，示例如下：

Component({
  <!-- 組件的初始數(shù)據(jù) -->
  data: {
    count: 0
  }
})

3.2、methods 數(shù)據(jù)

在小程序組件中，事件處理函數(shù)和自定義方法需要定義到 methods 節(jié)點(diǎn)中，示例代碼如下：

Component({
   <!-- 組件的方法列表 -->
  methods: {
    <!-- 事件處理函數(shù) -->
    addCount() {
      this.setData({count: this.data.count + 1});
      <!-- 通過(guò) this 直接調(diào)用自定義方法 -->
      this._showCount()
    },
    <!-- 自定義方法建議以 _ 開(kāi)頭 -->
    _showCount() {
      wx.showToast({
        title: &#39;count值為：&#39; + this.data.count,
        icon: &#39;none&#39;
      })
    }
  }
})

3.3、properties 屬性

在小程序組件中，properties 是組件的對(duì)外屬性，用來(lái)接收外界傳遞到組件中的數(shù)據(jù)，示例代碼如下：

Component({
  <!-- 屬性定義 -->
  properties: {
    <!-- 完整定義屬性的方式 -->
    max: {
      type: Number,
      value: 10
    },
    <!-- 簡(jiǎn)化定義屬性的方式 -->
    max: Number
  }
})

3.4、data 和 properties 的區(qū)別

在小程序的組件中，properties 屬性和 data 數(shù)據(jù)的用法相同，它們都是可讀可寫的，只不過(guò)：

• data 更傾向于存儲(chǔ)組件的私有數(shù)據(jù)

• properties 更傾向于存儲(chǔ)外界傳遞到組件中的數(shù)據(jù)

Component({
  methods: {
    showInfo() {
      <!-- 結(jié)果為 true，證明 data 數(shù)據(jù)和 properties 屬性本質(zhì)上是一樣的，都是可讀可寫的 -->
      console.log(this.data === this.properties)
    }
  }
})

3.5、使用 setData 修改 properties 的值

由于 data 數(shù)據(jù)和 properties 屬性在本質(zhì)上沒(méi)有任何區(qū)別，因此 properties 屬性的值也可以用于頁(yè)面渲染，或使用 setData 為 properties 中的屬性重新賦值，示例代碼如下：

# 在組建的 .wxml 文件中使用 properties 屬性的值
<view>max屬性的值為：{{max}}</view>
Component({
  properties: { max: Number },
  methods: {
    addCount() {
      this.setData({ max: this.properties.max + 1 })
    }
  }
})

4、數(shù)據(jù)監(jiān)聽(tīng)器

4.1、什么是數(shù)據(jù)監(jiān)聽(tīng)器

數(shù)據(jù)監(jiān)聽(tīng)器用于監(jiān)聽(tīng)和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于 vue 中的 watch 偵聽(tīng)器。在小程序組件中，數(shù)據(jù)監(jiān)聽(tīng)器的基本語(yǔ)法格式如下：

Component({
  observers: {
    '字段A, 字段B': function(字段A的心智, 字段B的新值) {
    }
  }
})

4.2、數(shù)據(jù)監(jiān)聽(tīng)器的基本用法

Component({
  data: { n1: 0, n2: 0, sum: 0 },
  methods: {
    addN1() { sthis.setData({ n1: this.data.n1 + 1 })},
    addN2() { sthis.setData({ n2: this.data.n2 + 1 })}
  },
  observers: {
    'n1, n2': function(n1, n2) {
      this.setData({sum: n1 + n2})
    }
  }
})

4.3、監(jiān)聽(tīng)對(duì)象屬性的變化

# 數(shù)據(jù)監(jiān)聽(tīng)器支持監(jiān)聽(tīng)對(duì)象中單個(gè)或多個(gè)屬性的變化，示例代碼如下：
Component({
  observers: {
    '對(duì)象.屬性A, 對(duì)象.屬性B': function(屬性A的新值, 屬性B的心智){}
  }
})
# 監(jiān)聽(tīng)對(duì)象中所有屬性的變化
Component({
  observers: {
    'obj.**': function(obj){}
  }
})

5、純數(shù)據(jù)字段

5.1、什么是純數(shù)據(jù)字段

純數(shù)據(jù)字段指的是那些不用于界面渲染的 data 字段。

應(yīng)用場(chǎng)景：例如有些情況下，某些 data 中的字段既不會(huì)展示在界面上，也不會(huì)傳遞給其他組件，僅僅在當(dāng)前組件內(nèi)部使用。帶有這種特性的 data 字段適合備設(shè)置為儲(chǔ)數(shù)據(jù)字段

好處：純數(shù)據(jù)字段有助于提升頁(yè)面更新的性能

5.2、使用規(guī)則

在 Component 構(gòu)造器的 options 節(jié)點(diǎn)中，指定 pureDataPattern 為一個(gè)正則表達(dá)式，字段名符合這個(gè)正則表達(dá)式的字段將成為純數(shù)據(jù)字段，示例代碼如下：

Component({
  options: {
    <!-- 指定所有 _ 開(kāi)頭的數(shù)據(jù)字段為純數(shù)據(jù)字段 -->
    pureDataPattern: /^_/
  },
  data: {
    a: true, // 普通數(shù)據(jù)字段
    _b: true // 純數(shù)據(jù)字段
  }
})

6、組件的生命周期

6.1、組件的全部生命周期函數(shù)

6.2、組件主要的生命周期函數(shù)

在小程序組件中，最重要的生命周期函數(shù)有 3 個(gè)，分別是 created、attached、detached。它們各自的特點(diǎn)如下：

• 組件實(shí)例剛被創(chuàng)建好的時(shí)候，created 生命周期函數(shù)會(huì)被觸發(fā)

此時(shí)還不能調(diào)用 setData

通常在這個(gè)生命周期函數(shù)中，只應(yīng)該用于給組件的 this 添加一些自定義的屬性字段

• 在組建完全初始化完畢、進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)后，attached 生命周期函數(shù)會(huì)被觸發(fā)

此時(shí)，this.data 已被初始化完畢

這個(gè)生命周期很有用，絕大多數(shù)初始化的工作可以在這個(gè)時(shí)機(jī)進(jìn)行

• 組件離開(kāi)頁(yè)面節(jié)點(diǎn)樹(shù)后，detached 生命周期函數(shù)會(huì)被觸發(fā)

退出一個(gè)頁(yè)面時(shí)，會(huì)觸發(fā)頁(yè)面內(nèi)每個(gè)自定義組件的 detached 生命周期函數(shù)

此時(shí)適合做一些清理性質(zhì)的工作

6.3、lifetimes 節(jié)點(diǎn)

在小程序組件中，生命周期函數(shù)可以直接定義在 Component 構(gòu)造器的第一級(jí)參數(shù)中，可以在 lifetimes 字段內(nèi)進(jìn)行聲明（這是推薦的方式，其優(yōu)先級(jí)最高）。示例代碼如下：

Component({
  <!-- 推薦用法 -->
  lifetimes: {
    attached() {}, // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
    detached() {}, // 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行
  },
  <!-- 以下是舊的定義方式 -->
  attached() {}, // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
  detached() {}, // 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行
})

6.4、什么是組件所在頁(yè)面的生命周期

有時(shí)，自定義組件的行為依賴于頁(yè)面狀態(tài)的變化，此時(shí)就需要用到組件所在頁(yè)面的生命周期

6.5、pageLifetimes 節(jié)點(diǎn)

# 組件所在頁(yè)面的生命周期函數(shù)，需要定義在 pageLifetimes 節(jié)點(diǎn)中
Component({
  pageLifetimes: {
    show: function() {}, // 頁(yè)面被展示
    hide: function() {}, // 頁(yè)面被隱藏
    resize: function(size) {} // 頁(yè)面尺寸變化
  }
})

7、插槽

7.1、什么是插槽

在自定義組件的 wxml 結(jié)構(gòu)中，可以提供一個(gè) slot 節(jié)點(diǎn)（插槽），用于承載組件使用者提供的 wxml 結(jié)構(gòu)。

7.2、單個(gè)插槽

在小程序中，默認(rèn)每個(gè)自定義組件中只允許使用一個(gè) slot 進(jìn)行占位，這種個(gè)數(shù)上限制叫做單個(gè)插槽

<!-- 組件的封裝者 -->
<view class="wrapper">
  <view>這里是組件的內(nèi)部節(jié)點(diǎn)</view>
  <!-- 對(duì)于不準(zhǔn)確的內(nèi)容，可以使用 slot 進(jìn)行展位 -->
  <slot></slot>
</view>
<!-- 組件的使用者 -->
<component>
  <view>這里是插入到組件slot中的內(nèi)容</view>
</component>

7.3、啟用多個(gè)插槽

在小程序的自定義組件中，需要使用多個(gè) slot 插槽是，可以在組件的 .js 文件中，通過(guò)如下方式進(jìn)行啟用，示例代碼如下：

Component({
  options: {
    multipleSlots: true // 在組件定義時(shí)，啟用多個(gè) slot 支持
  }
})

7.4、定義多個(gè)插槽

可以在組件的 .wxml 中使用多個(gè) slot 標(biāo)簽，以不同的 name 來(lái)區(qū)分不同的插槽。示例代碼如下：

<!-- 組件模板 -->
<view class="wrapper">
  <!-- name 為 before 的第一個(gè) slot 插槽 -->
  <slot name="before"></slot>
  <view>這是一段固定的文本內(nèi)容</view>
  <!-- name 為 after 的第二個(gè) slot 插槽 -->
  <slot name="after"></slot>
</view>

7.5、使用多個(gè)插槽

在使用帶有多個(gè)插槽的自定義組件時(shí)，需要用 slot 屬性來(lái)將節(jié)點(diǎn)插入到不同的 slot 中。示例代碼如下：

<!-- 引用組件的頁(yè)面模板 -->
<component>
  <!-- 這部分內(nèi)容將被放置在組件 <slot name="before"></slot> 的位置上 -->
  <view slot="before">這里是插入到組件 slot name="before"中的內(nèi)容</view>
  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"></slot> 的位置上 -->
  <view slot="after">這里是插入到組件 slot name="after"中的內(nèi)容</view>
</component>

8、父子組件之間的通信

8.1、父子組件之間的通信的 3 種方式

屬性綁定

用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)，僅能設(shè)置 JSON 兼容的數(shù)據(jù)

事件綁定

用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)

獲取組件實(shí)例

父組件還可以通過(guò) this.selectComponent() 獲取子組件實(shí)例對(duì)象

這樣舊可以直接訪問(wèn)子組件的任意數(shù)據(jù)和方法

8.2、屬性綁定

屬性綁定用于實(shí)現(xiàn)父向子傳值，而且只能傳遞普通類型的數(shù)據(jù)，無(wú)法將方法傳遞給子組件。父組件的示例代碼如下：

<!-- 父組件的 data 節(jié)點(diǎn) -->
data: {
  count: 0
}
<!-- 父組件的 wxml 結(jié)構(gòu) -->
<my-child count="{{count}}"></my-child>

<!-- 子組件的 properties 節(jié)點(diǎn) -->
properties: {
  count: Number
}
<!-- 子組件的 wxml -->
<view>子組件種，count值為：{{count}}</view>

8.3、事件綁定

事件綁定用于實(shí)現(xiàn)子向父?jìng)髦?，可以傳遞任何類型的數(shù)據(jù)。使用步驟如下：

在父組件的 js 中，定義一個(gè)函數(shù)，這個(gè)函數(shù)即將通過(guò)自定義事件的形式，傳遞給子組件

<!-- 在父組件定義 syncCount 方法，將來(lái)傳遞給子組件，供子組件進(jìn)行調(diào)用 -->
syncCount() {
  console.log(&#39;syncCount&#39;)
}

在父組件的 wxml 中，通過(guò)自定義事件的形式，將步驟 1 中定義的函數(shù)引用，傳遞給子組件

<!-- 使用bind:自定義事件名稱（推薦：結(jié)構(gòu)清晰） -->
<my-test count="{{count}}" bind:sync="syncCount"></my-test>
<!-- 使用bind后面直接協(xié)商自定義事件名稱-->
<my-test count="{{count}}" bindsync="syncCount"></my-test>

在子組件的 js 中，通過(guò)調(diào)用 this.triggerEvent('自定義事件名稱',{參數(shù)對(duì)象})，將數(shù)據(jù)發(fā)送到父組件

<!-- 子組件的 wxml 結(jié)構(gòu) -->
<text>子組件中，count：{{count}}</text>
<button type="primary" bindtap="addCount">+1</button>
# 子組件的 js 代碼
methods: {
  addCount() {
    this.setData({
      count: this.properties.count + 1
    })
    this.triggerEvent(&#39;sync&#39;, { value: this.properties.count })
  }
}

在父組件的 js 中，通過(guò) e.detail 獲取到子組件傳遞過(guò)來(lái)的數(shù)據(jù)

syncCount(e) {
  this.setData({
    count: e.detail.value
  })
}

8.4、獲取組件實(shí)例

可在父組件里調(diào)用 this.selectComponent('id 或 class 選擇器')，獲取子組件的實(shí)例對(duì)象，從而直接訪問(wèn)子組件的任意數(shù)據(jù)和方法。

<my-component count="{{count}}" bind:sync="syncCount" class="test" id="test"></my-component>
<button bindtap="getChild">獲取子組件實(shí)例</button>
<!-- 按鈕的 tap 事件處理函數(shù) -->
getChild() {
  <!-- 可以傳遞 id選擇器，也可以傳遞 class 選擇器 -->
  const child = this.selectComponent(&#39;.test&#39;)
  <!-- 調(diào)用子組件的 setData 方法 -->
  child.setData({ count: child.properties.count + 1 })
  <!-- 調(diào)用子組件的 addCount 方法 -->
  child.addCount()
}

9、behaviors

9.1、什么是 behaviors

behaviors 是小程序中，用于實(shí)現(xiàn)組件間代碼共享的特性，類似于 Vue.js 中的 mixins

9.2、behaviors 的工作方式

每個(gè) behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時(shí)，它的屬性、屬性和方法會(huì)被合并到組件中。

每個(gè)組件可以引用多個(gè) behavior，behavior 也可以引用其它 behavior

9.3、創(chuàng)建 behavior

調(diào)用 Behavior(Object object) 方法即可創(chuàng)建一個(gè)共享的 behavior 實(shí)例對(duì)象，供所有的組件使用

# 調(diào)用 Behavior() 方法，創(chuàng)建實(shí)例對(duì)象
# 并使用 module.exports 將 behavior 實(shí)例對(duì)象共享出去
module.exports = Behavior({
  # 屬性節(jié)點(diǎn)
  properties: {},
  # 私有數(shù)據(jù)節(jié)點(diǎn)
  data: {},
  # 事件處理函數(shù)和自定義方法節(jié)點(diǎn)
  methods: {}
})

9.4、導(dǎo)入并使用 behavior

在組件中，使用 require() 方法導(dǎo)入需要的 behavior，掛載后即可訪問(wèn) behavior 中的數(shù)據(jù)或方法，示例代碼如下：

# 使用 require() 導(dǎo)入需要自定義 behavior 模塊
const myBehavior = require('my-behavior')
Component({
  <!-- 將導(dǎo)入的 behavior 實(shí)例對(duì)象，掛載到 behaviors 數(shù)組節(jié)點(diǎn)中即可生效 -->
  behaviors: [myBehavior]
})

9.5、behavior 中所有可用的節(jié)點(diǎn)

10、使用 npm 包

10.1、小程序?qū)?npm 的支持與限制

目前，小程序已經(jīng)支持使用 npm 安裝第三方包，從而來(lái)提高小程序的開(kāi)發(fā)效率。但是，在小程序中使用 npm 包有如下 3 個(gè)限制：

• 不支持依賴于 Node.js 內(nèi)置庫(kù)的包

• 不支持依賴于瀏覽器內(nèi)置對(duì)象的包

• 不支持依賴于 C++ 插件的包

10.2、API Promise 化

• 基于回調(diào)函數(shù)的異步 API 的缺點(diǎn)

默認(rèn)情況下，小程序官方提供的異步 API 都是基于回調(diào)函數(shù)實(shí)現(xiàn)的，例如，網(wǎng)絡(luò)請(qǐng)求的 API 需要按照如下的方式調(diào)用：

wx.request({
  method: '',
  url: '',
  data: {},
  success: () => {}
})

缺點(diǎn)：容易造成回調(diào)地獄的問(wèn)題，代碼的可讀性、維護(hù)性差

• 什么是 API Promise 化

API Promise 化，指定是通過(guò)額外的配置，將官方提供的、基于回調(diào)函數(shù)的異步 API，升級(jí)改造為基于 Promise 的異步 API，從而提高代碼的可讀性、維護(hù)性、避免回調(diào)地獄的問(wèn)題

• 實(shí)現(xiàn) API Promise 化

在小程序中，實(shí)現(xiàn) API Promise 化主要依賴于 minprogram-api-promise 這個(gè)第三方的 npm 包。它的安裝和使用步驟如下：

npm install --save minprogram-api-promise
# 在小程序入口文件中（app.js），只需要調(diào)用一次 promisifyAll() 方法
import { promisifyAll } from 'minprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

• 調(diào)用 Promise 化之后的異步 API

# 頁(yè)面的 .wxml 結(jié)構(gòu)
<button bindtap="getInfo">vant按鈕</button>
# 在頁(yè)面的 .js 文件中，定義對(duì)應(yīng)的 tap 事件處理函數(shù)
async getInfo() {
  const { data: res } = await wx.p.request({
    method: &#39;GET&#39;,
    url: &#39;&#39;,
    data: {}
  })
}

11、全局?jǐn)?shù)據(jù)共享

11.1、什么是全局?jǐn)?shù)據(jù)共享

全局?jǐn)?shù)據(jù)共享（又叫做：狀態(tài)管理）是為了解決組件之間數(shù)據(jù)共享的問(wèn)題

開(kāi)發(fā)中常用的數(shù)據(jù)共享方案有：Vuex、Redux、MobX 等

11.2、小程序中的全局?jǐn)?shù)據(jù)共享方案

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 實(shí)現(xiàn)全局?jǐn)?shù)據(jù)共享。其中：

• mobx-miniprogram 用來(lái)創(chuàng)建 Store 實(shí)例對(duì)象

• mobx-miniprogram-bindings 用來(lái)把 Store 中的共享數(shù)據(jù)或方法，綁定到組件或頁(yè)面中使用

安裝 MobX 相關(guān)的包

# 在項(xiàng)目運(yùn)行如下的命令，安裝MobX相關(guān)的包
npm install --save mobx-miniprogram mobx-miniprogram-bindings

注意：MobX 相關(guān)的包安裝完畢之后，記得刪除 miniprogram_npm 目錄后，重新構(gòu)建 npm

創(chuàng)建 MobX 的 Store 實(shí)例

import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  // 數(shù)據(jù)字段
  numA: 1,
  numB: 2,
  //計(jì)算屬性
  get sum() {
    return this.numA + this.numB
  },
  // actions 方法，用來(lái)修改 store 中的數(shù)據(jù)
  updateNumA: action(function(step) {
    this.numA += step
  }),
  updateNumB: action(function(step) {
    this.numB += step
  }),
})

將 Store 中的成員綁定到頁(yè)面中

# 頁(yè)面的 .js 文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from './store'
Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNumA']
    })
  },
  <!-- 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 -->
  onUnload() {
    this.storeBindings.destroyBindings()
  }
})

在頁(yè)面上使用 Store 中的成員

# 頁(yè)面的 .wxml
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
<!-- 按鈕 tap 事件的處理函數(shù) -->
btnHandler(e) {
  this.updateNumA(e.target.dataset.step)
}

將 Store 中的成員綁定到組件中

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: 'sum'
    },
    actions: {
      updateNumA: 'updateNumA'
    }
  }
})

在組件中使用 Store 中的成員

# 組件的 .wxml 結(jié)構(gòu)
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="primary" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
<!-- 按鈕 tap 事件的處理函數(shù) -->
btnHandler(e) {
  this.updateNumA(e.target.dataset.step)
}

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

The above is the detailed content of Summary of strengthening the basics of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!