Dieser Artikel bringt Ihnen einige verwandte Themen zum WeChat Mini-Programm. Er stellt haupts?chlich einige grundlegende Inhalte vor, darunter benutzerdefinierte Komponenten, Stilisolierung, Daten, Methoden und Eigenschaften usw. Schauen wir uns das gemeinsam an, ich hoffe, es hilft allen .

【Verwandte Lernempfehlungen: Mini-Programm-Lern-Tutorial

1. Benutzerdefinierte Komponenten

1.1. Komponenten erstellen

• Klicken Sie mit der rechten Maustaste und erstellen Sie Komponenten -> Testordner

• Neue Komponenten -> Testordner, klicken Sie mit der rechten Maustaste, klicken Sie auf Neue Komponente

• Geben Sie den Namen der Komponente ein und drücken Sie die Eingabetaste. Es werden 4 Dateien angezeigt, die der Komponente entsprechen automatisch generiert, mit dem Suffix Die Namen sind .js, .json, .wxml bzw. .wxss

1.2. Referenzkomponenten

• Lokale Referenz: Die Komponente kann nur innerhalb der aktuell referenzierten verwendet werden Seite

• Globale Referenz: Komponenten k?nnen in jeder Miniprogrammseite verwendet werden

1.3. Lokale Referenzkomponenten

Die Art und Weise, Komponenten in der .json-Konfigurationsdatei der Seite zu referenzieren, wird als lokale Referenz bezeichnet . Der Beispielcode lautet wie folgt:

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

1.4. Globale Referenzkomponenten

Die Art und Weise, Komponenten in der globalen Konfigurationsdatei app.json zu referenzieren, wird als globale Referenz bezeichnet. Der Beispielcode lautet wie folgt:

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

1.5. Globale Referenz vs. lokale Referenz

W?hlen Sie die geeignete Referenzmethode entsprechend der H?ufigkeit und dem Umfang der Verwendung der Komponente:

• Wenn eine Komponente h?ufig verwendet wird auf mehreren Seiten Es wird empfohlen, globale Referenzen zu verwenden. Eine bestimmte Komponente wird nur auf einer bestimmten Seite verwendet. Es wird empfohlen, lokale Referenzen zu verwenden. 1.6. Der Unterschied zwischen Komponenten und Seiten Oberfl?chlich betrachtet bestehen Komponenten und Seiten aus vier Dateien: .js, .json, .wxml und .wxss. Es gibt jedoch offensichtliche Unterschiede zwischen den .js- und .json-Dateien von Komponenten und Seiten:

• Die .json-Datei der Komponente muss das Attribut ?component“: true deklarieren

Die .js-Datei der Komponentenaufrufe Component( )-Funktion

Die Ereignisbehandlungsfunktion der Komponente muss im Methodenknoten definiert werden

2. Stilisolation
• 2.1. Komponentenstilisolation

• Standardm??ig , Der Stil einer benutzerdefinierten Komponente ist nur Es wirkt sich auf die aktuelle Komponente aus und hat keinen Einfluss auf die UI-Struktur au?erhalb der Komponente.
  Verhindern Sie, dass externe Stile die internen Stile von Komponenten beeinflussen.

Verhindern Sie, dass Komponentenstile externe Stile zerst?ren Der Klassenselektor hat einen Stilisolationseffekt. Der ID-Selektor und der Beschriftungsselektor sind von der Stilisolation nicht betroffen.

Es wird empfohlen, den Klassenselektor in Komponenten und Seiten zu verwenden, die auf Komponenten verweisen. Attribut- und Beschriftungsselektoren.

2.3 ?ndern Sie die Stilisolationsoption der Komponente.

Standardm??ig kann die Stilisolationsfunktion der benutzerdefinierten Komponente die gegenseitige Beeintr?chtigung zwischen den internen und externen Stilen der Komponente verhindern. Aber manchmal m?chten wir den Stil innerhalb der Komponente von au?en steuern k?nnen. Zu diesem Zeitpunkt k?nnen Sie die Stilisolationsoptionen der Komponente wie folgt ?ndern:

2.4, optionaler Wert von stylelsolation |. Beschreibung ? ? ? ? ? ???????????????????????????????????????????????????????????????????????????????????????--- --: |. :----: | ----------------------------------- ---- ---------------------------------------------- ---- --------------------- |. -------- ----- --------------------------------------------- ----- -------- |

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

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

| shared | 否 | 表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會(huì)影響頁面和其他設(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});
      <!-- 通過 this 直接調(diào)用自定義方法 -->
      this._showCount()
    },
    <!-- 自定義方法建議以 _ 開頭 -->
    _showCount() {
      wx.showToast({
        title: &#39;count值為：&#39; + this.data.count,
        icon: &#39;none&#39;
      })
    }
  }
})

3.3、properties 屬性

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

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

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

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

• 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ì)上沒有任何區(qū)別，因此 properties 屬性的值也可以用于頁面渲染，或使用 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)聽器

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

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

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

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

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)聽對(duì)象屬性的變化

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

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

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

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

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

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

5.2、使用規(guī)則

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

Component({
  options: {
    <!-- 指定所有 _ 開頭的數(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)入頁面節(jié)點(diǎn)樹后，attached 生命周期函數(shù)會(huì)被觸發(fā)

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

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

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

退出一個(gè)頁面時(shí)，會(huì)觸發(fā)頁面內(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)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
    detached() {}, // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
  },
  <!-- 以下是舊的定義方式 -->
  attached() {}, // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
  detached() {}, // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
})

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

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

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

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

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 文件中，通過如下方式進(jìn)行啟用，示例代碼如下：

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

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

可以在組件的 .wxml 中使用多個(gè) slot 標(biāo)簽，以不同的 name 來區(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 屬性來將節(jié)點(diǎn)插入到不同的 slot 中。示例代碼如下：

<!-- 引用組件的頁面模板 -->
<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í)例

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

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

8.2、屬性綁定

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

<!-- 父組件的 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)子向父傳值，可以傳遞任何類型的數(shù)據(jù)。使用步驟如下：

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

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

在父組件的 wxml 中，通過自定義事件的形式，將步驟 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 中，通過調(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 中，通過 e.detail 獲取到子組件傳遞過來的數(shù)據(jù)

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

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

可在父組件里調(diào)用 this.selectComponent('id 或 class 選擇器')，獲取子組件的實(shí)例對(duì)象，從而直接訪問子組件的任意數(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，掛載后即可訪問 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 安裝第三方包，從而來提高小程序的開發(fā)效率。但是，在小程序中使用 npm 包有如下 3 個(gè)限制：

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

• 不支持依賴于瀏覽器內(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)地獄的問題，代碼的可讀性、維護(hù)性差

• 什么是 API Promise 化

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

• 實(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

# 頁面的 .wxml 結(jié)構(gòu)
<button bindtap="getInfo">vant按鈕</button>
# 在頁面的 .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ù)共享的問題

開發(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 用來創(chuàng)建 Store 實(shí)例對(duì)象

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

安裝 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 方法，用來修改 store 中的數(shù)據(jù)
  updateNumA: action(function(step) {
    this.numA += step
  }),
  updateNumB: action(function(step) {
    this.numB += step
  }),
})

將 Store 中的成員綁定到頁面中

# 頁面的 .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)聽頁面卸載 -->
  onUnload() {
    this.storeBindings.destroyBindings()
  }
})

在頁面上使用 Store 中的成員

# 頁面的 .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í)教程】

Das obige ist der detaillierte Inhalt vonZusammenfassung der St?rkung der Grundlagen von WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!