本篇文章為大家?guī)?lái)了關(guān)於微信小程式的相關(guān)問(wèn)題，其中主要介紹了一些基礎(chǔ)內(nèi)容，包括了自訂元件、樣式隔離、資料、方法和屬性等等內(nèi)容，下面一起來(lái)看一下，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

1、自訂元件

#1.1、建立元件

• 在專案的根目錄中，滑鼠右鍵，建立components -> test 資料夾

• #新建的components -> test 資料夾上，滑鼠右鍵，點(diǎn)選新建Component

• 鍵入元件的名稱後回車(chē)，會(huì)自動(dòng)產(chǎn)生元件對(duì)應(yīng)的4個(gè)文件，後綴名分別為.js、.json、.wxml 和.wxss

#1.2、引用元件

局部引用：元件只能在目前被引用的頁(yè)面內(nèi)使用

#全域引用：元件可以在每個(gè)小程式頁(yè)面中使用

1.3、局部引用元件

• #在頁(yè)面的.json 設(shè)定檔中引用元件的方式，叫做局部引用。範(fàn)例程式碼如下：

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

• 1.4、全域引用元件

在app.json 全域設(shè)定檔中引用元件的方式，叫做全域引用。範(fàn)例程式碼如下：

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

1.5、全域參考VS 局部參考

根據(jù)元件的使用頻率和範(fàn)圍，來(lái)選擇適當(dāng)?shù)囊梅绞剑?li>
如果某元件在多個(gè)頁(yè)面中常被用到，建議進(jìn)行全域參考
使用某元件只在特定的頁(yè)面中被用到，建議進(jìn)行局部引用

1.6、元件和頁(yè)面的區(qū)別

從表面來(lái)看，元件和頁(yè)面都是由.js、.json、.wxml 和.wxss 這四個(gè)檔案組成的。但是，元件和頁(yè)面的.js 與.json 檔案有明顯的不同：元件的.json 檔案中需要宣告"component": true 屬性

#元件的.js 檔案中呼叫的是Component() 函數(shù)

#元件的事件處理函數(shù)需要定義到methods 節(jié)點(diǎn)中

2、樣式隔離

2.1、元件樣式隔離

預(yù)設(shè)情況下，自訂元件的樣式只對(duì)目前元件生效，不會(huì)影響元件以外的UI 結(jié)構(gòu)。 防止外界的樣式影響元件內(nèi)部的樣式

防止元件的樣式破壞外界的樣式

2.2、元件樣式隔離的注意點(diǎn)

app.wxss 中的全域樣式對(duì)元件無(wú)效

只有class 選擇器會(huì)有樣式隔離效果，id 選擇器、屬性選擇器、標(biāo)籤選擇器不受樣式隔離影響

###在元件和參考元件的頁(yè)面中建議使用class 選擇器，不要使用id、屬性、標(biāo)籤選擇器############2.3、修改元件的樣式隔離選項(xiàng)############預(yù)設(shè)情況下，自訂元件的樣式隔離特性能夠防止元件內(nèi)外樣式互相干擾的問(wèn)題。但有時(shí)，我們希望在外界能夠控制組件內(nèi)部的樣式。此時(shí)，可以透過(guò)stylelsolation 修改元件的樣式隔離選項(xiàng)，用法如下：###

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

#########2.4、stylelsolation 的選用值############|? ? 可選值? ? | 預(yù)設(shè)值| 描述? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-------------------------------------------------- -------------------------------------------------- ----------- | -------------------------------------- -------------------------------- |###

| 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ù)的用法相同，它們都是可讀可寫(xiě)的，只不過(guò)：

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

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

Component({
  methods: {
    showInfo() {
      <!-- 結(jié)果為 true，證明 data 數(shù)據(jù)和 properties 屬性本質(zhì)上是一樣的，都是可讀可寫(xiě)的 -->
      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í)行特定的操作。它的作用類(lèi)似于 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)父向子傳值，而且只能傳遞普通類(lèi)型的數(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)髦?，可以傳遞任何類(lèi)型的數(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)組件間代碼共享的特性，類(lèi)似于 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í)教程】

以上是微信小程式基礎(chǔ)加強(qiáng)總結(jié)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！