この記事では、WeChat ミニ プログラム に関する関連問題を紹介します。主に、カスタム コンポーネント、スタイル分離、データ、メソッド、プロパティなどの基本的なコンテンツを紹介します。見てみましょう。皆様のお役に立てれば幸いです。

#【関連する學(xué)習(xí)の推奨事項(xiàng):

小さなプログラム學(xué)習(xí)チュートリアル】

1. カスタム コンポーネント

#1.1. コンポーネントの作成

プロジェクトのルート ディレクトリで右クリックし、コンポーネントを作成し、テスト フォルダーを作成します
新しく作成したコンポーネント -> テスト フォルダーで、マウスを右クリックして [新しいコンポーネント] をクリックします
コンポーネントの名前を入力し、Enter キーを押します。コンポーネントに対応するファイルが自動(dòng)的に生成されます。サフィックスは .js、.json、.wxml、および .wxss

1.2 です。參照コンポーネント

• ローカル?yún)⒄? コンポーネントは現(xiàn)在參照されているページ內(nèi)でのみ使用できます

• グローバル?yún)⒄? コンポーネントはそれぞれのページで使用できますミニ プログラム ページ

1.3. ローカル?yún)⒄榨偿螗荸`ネント

.json 設(shè)定ファイルでコンポーネントを參照する方法このページはローカル?yún)⒄栅群簸肖欷蓼?。サンプルコードは次のとおりです:

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

1.4. グローバル?yún)⒄榨偿螗荸`ネント

app.json グローバル設(shè)定ファイルでコンポーネントを參照する方法はグローバル?yún)⒄栅群簸肖欷蓼?。サンプ?コードは次のとおりです:

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

1.5. グローバル?yún)⒄?VS ローカル?yún)⒄?strong>

頻度と範(fàn)囲に基づいて適切な參照方法を選択します。 ：

• コンポーネントが複數(shù)のページで頻繁に使用される場(chǎng)合は、グローバル?yún)⒄栅蜃鞒嗓工毪长趣颏獎(jiǎng)幛幛筏蓼?p>

• 使用特定のページでのみコンポーネントが使用される場(chǎng)合は、ローカル?yún)⒄栅蜃鞒嗓工毪长趣颏獎(jiǎng)幛幛筏蓼?p>

#1.6. コンポーネントとページの違い表面から見ると、コンポーネントとページは .js、.json、.wxml、および .wxss の 4 つのファイルで構(gòu)成されています。ただし、コンポーネントとページの .js ファイルと .json ファイルの間には明らかな違いがあります。

コンポーネントの .json ファイルで "component": true 屬性を宣言する必要があります。
Component() 関數(shù)はコンポーネントの .js ファイルで呼び出されます。
コンポーネントのイベント処理関數(shù)を定義する必要がありますメソッドノード內(nèi)
##2. スタイルの分離

##2.1. コンポーネントのスタイルの分離

デフォルトでは、カスタム コンポーネント スタイルは現(xiàn)在のコンポーネントにのみ有効であり、コンポーネントの外部の UI 構(gòu)造には影響しません。 外部スタイルがコンポーネントの內(nèi)部スタイルに影響を與えないようにする

コンポーネント スタイルが外部スタイルを破壊しないようにする

2.2. コンポーネント スタイルの分離に関する注意事項(xiàng)

app.wxss のグローバル スタイルはコンポーネントに対して無効ですクラス セレクターのみがスタイル分離効果を持ち、ID セレクター、屬性セレクター、およびラベル セレクターに影響します。スタイル分離の影響

コンポーネントおよびコンポーネントを參照するページではクラス セレクターを使用することをお?jiǎng)幛幛筏蓼?。ID、屬性、およびラベル セレクターは使用しないでください

2.3. コンポーネントのスタイルを変更する 分離オプション

デフォルトでは、カスタム コンポーネントのスタイル分離機(jī)能により、コンポーネントの內(nèi)部スタイルと外部スタイル間の干渉を防ぐことができます。ただし、コンポーネント內(nèi)のスタイルを外部から制御できるようにしたい場(chǎng)合もあります。このとき、stylelsolation を通じてコン??ポーネントのスタイル分離オプションを変更できます。使用方法は次のとおりです:

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

2.4. stylelsolation

のオプションの値| 選択した値 | デフォルト値 | 説明 || :----------: | :----: | ---- ----------- -------------------------------------- ----------- -------------------------------------- ----------- ---------- | ---------------------------- ----------- ---------------------------------- |

| 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
    },
    <!-- 簡(jiǎn)化定義屬性的方式 -->
    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)用場(chǎ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)子向父?jìng)髦?，可以傳遞任何類型的數(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í)教程】

以上がWeChatミニプログラムの基礎(chǔ)強(qiáng)化まとめの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。