Artikel ini membawakan anda isu yang berkaitan dengan Program Mini WeChat Ia terutamanya memperkenalkan beberapa kandungan asas, termasuk komponen tersuai, pengasingan gaya, data, kaedah dan sifat, dll. , mari kita lihat bersama-sama. , saya harap ia akan membantu semua orang.

[Cadangan pembelajaran berkaitan: Tutorial Pembelajaran Program Mini]

1. Komponen tersuai

1.1. Cipta komponen

• Dalam direktori akar projek, klik kanan dan cipta folder ujian

• Pada komponen yang baru dibuat -> folder ujian, klik kanan tetikus dan klik Komponen Baharu

• Taip nama komponen dan tekan Enter, 4 yang sepadan dengan komponen akan dijana secara automatik, akhiran ialah .js, .json, .wxml dan .wxss masing-masing

1.2 Komponen rujukan

• Rujukan tempatan: komponen hanya boleh digunakan dalam halaman yang dirujuk semasa

• Rujukan global: komponen boleh digunakan dalam setiap halaman program mini

1.3 Komponen rujukan setempat

Cara untuk merujuk komponen dalam fail konfigurasi .json. halaman itu dipanggil rujukan tempatan. Kod sampel adalah seperti berikut:

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

1.4 Komponen rujukan global

Cara untuk merujuk komponen dalam app.json global. fail konfigurasi dipanggil rujukan Global. Kod sampel adalah seperti berikut:

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

1.5 Rujukan global VS rujukan tempatan

Pilih yang sesuai berdasarkan kekerapan dan. skop penggunaan kaedah rujukan:

• Jika komponen kerap digunakan dalam berbilang halaman, adalah disyorkan untuk merujuknya secara global

• Gunakan komponen hanya secara khusus digunakan dalam halaman, adalah disyorkan untuk membuat rujukan setempat

1.6 Perbezaan antara komponen dan halaman

Dari permukaan Nampaknya komponen dan halaman terdiri daripada empat fail: .js, .json, .wxml dan .wxss. Walau bagaimanapun, terdapat perbezaan yang jelas antara fail .js dan .json bagi komponen dan halaman:

• Atribut "komponen": true perlu diisytiharkan dalam fail .json komponen

• Fungsi Komponen() dipanggil dalam fail .js komponen

• Fungsi pemprosesan acara komponen perlu ditakrifkan dalam nod kaedah

2. Pengasingan gaya

2.1 ??>Secara lalai, komponen tersuai Gaya hanya berkuat kuasa pada komponen semasa dan tidak akan menjejaskan struktur UI di luar komponen.

Halang gaya luaran daripada menjejaskan gaya dalaman komponen

Halang gaya komponen daripada memusnahkan gaya luaran

2.2

Gaya global dalam app.wxss tidak sah untuk komponen

Hanya pemilih kelas akan mempunyai kesan pengasingan gaya, pemilih id, pemilih atribut dan pemilih label tidak terjejas Kesan pengasingan gaya

Adalah disyorkan untuk menggunakan pemilih kelas dalam komponen dan halaman yang merujuk komponen Jangan gunakan pemilih id, atribut dan label

2.3 gaya pilihan Pengasingan komponen

Secara lalai, ciri pengasingan gaya komponen tersuai boleh menghalang gangguan antara gaya dalaman dan luaran komponen. Tetapi kadang-kadang, kita mahu dapat mengawal gaya dalam komponen dari luar. Pada masa ini, anda boleh mengubah suai pilihan pengasingan gaya komponen melalui pengasingan gaya Penggunaannya adalah seperti berikut:

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

2.4 Nilai pilihan pengasingan gaya

|. Nilai pilihan |.?????????????????? |

| ------------------------- --------------------------------------- ------------------------- --------------------------------------- ----------- ------------ |. ----------------------- ----------------------------------- |

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

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

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

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

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

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

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

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

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

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

3.3、properties 屬性

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

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

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

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

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

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

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

3.5、使用 setData 修改 properties 的值

由于 data 數(shù)據(jù)和 properties 屬性在本質上沒有任何區(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)聽和響應任何屬性和數(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)聽對象屬性的變化

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

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

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

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

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

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

5.2、使用規(guī)則

在 Component 構造器的 options 節(jié)點中，指定 pureDataPattern 為一個正則表達式，字段名符合這個正則表達式的字段將成為純數(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 個，分別是 created、attached、detached。它們各自的特點如下：

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

此時還不能調用 setData

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

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

此時，this.data 已被初始化完畢

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

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

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

此時適合做一些清理性質的工作

6.3、lifetimes 節(jié)點

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

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

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

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

6.5、pageLifetimes 節(jié)點

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

7、插槽

7.1、什么是插槽

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

7.2、單個插槽

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

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

7.3、啟用多個插槽

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

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

7.4、定義多個插槽

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

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

7.5、使用多個插槽

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

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

8、父子組件之間的通信

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

屬性綁定

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

事件綁定

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

獲取組件實例

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

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

8.2、屬性綁定

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

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

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

8.3、事件綁定

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

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

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

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

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

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

<!-- 子組件的 wxml 結構 -->
<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、獲取組件實例

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

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

9、behaviors

9.1、什么是 behaviors

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

9.2、behaviors 的工作方式

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

每個組件可以引用多個 behavior，behavior 也可以引用其它 behavior

9.3、創(chuàng)建 behavior

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

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

9.4、導入并使用 behavior

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

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

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

10、使用 npm 包

10.1、小程序對 npm 的支持與限制

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

• 不支持依賴于 Node.js 內置庫的包

• 不支持依賴于瀏覽器內置對象的包

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

10.2、API Promise 化

• 基于回調函數(shù)的異步 API 的缺點

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

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

缺點：容易造成回調地獄的問題，代碼的可讀性、維護性差

• 什么是 API Promise 化

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

• 實現(xiàn) API Promise 化

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

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

• 調用 Promise 化之后的異步 API

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

11、全局數(shù)據(jù)共享

11.1、什么是全局數(shù)據(jù)共享

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

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

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

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

• mobx-miniprogram 用來創(chuàng)建 Store 實例對象

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

安裝 MobX 相關的包

# 在項目運行如下的命令，安裝MobX相關的包
npm install --save mobx-miniprogram mobx-miniprogram-bindings

注意：MobX 相關的包安裝完畢之后，記得刪除 miniprogram_npm 目錄后，重新構建 npm

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

import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  // 數(shù)據(jù)字段
  numA: 1,
  numB: 2,
  //計算屬性
  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 結構
<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)
}

【相關學習推薦：小程序學習教程】

Atas ialah kandungan terperinci Ringkasan pengukuhan asas program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!