【小程式】微信小程式基礎文法講解（一）

一、概述

微信小程式是一種快速建構應用的平台，其基礎文法主要包括以下幾個方面：

• WXML：微信小程式的模闆語言，類似于 HTML，用于描述頁面結構。
• WXSS：微信小程式的樣式語言，類似于 CSS，用于描述頁面樣式。
• JS：微信小程式的腳本語言，用于實作頁面的邏輯和互動。
• JSON：微信小程式的配置檔案，用于配置小程式的全局配置、頁面配置等資訊。

在微信小程式中，可以通過在 WXML 中使用标簽和屬性，設定頁面的結構和樣式；在 JS 中編寫邏輯和事件處理函數，實作頁面的互動和動态效果；在 JSON 中配置小程式的全局資訊和頁面的配置資訊，如頁面路徑、标題欄顔色等。同時，微信小程式也提供了一些内置元件和 API，可以友善地實作各種功能和效果，如音頻、視訊、地圖、掃碼等。

二、小程式代碼組成

小程式由配置代碼JSON檔案、模闆代碼 WXML 檔案、樣式代碼 WXSS檔案以及邏輯代碼 JavaScript檔案組成。

小程式代碼主要由四個部分組成：

• JSON（JavaScript Object Notation） 配置：JSON 是一種資料格式，并不是程式設計語言，在小程式中，JSON扮演的靜态配置的角色。
• WXML（WeiXin Markup Language）模闆：類似于HTML的标記語言，用于描述小程式的結構層次。
• WXSS（WeiXin Style Sheets）樣式：類似于CSS的樣式表語言，用于設定小程式的樣式和布局。
• JS（JavaScript）邏輯互動：用于實作小程式的邏輯和互動效果。

以上三個部分分别對應小程式的結構層、樣式層和行為層，它們共同組成了小程式的整體代碼。此外，小程式還可以使用JSON檔案來配置一些全局資訊，如視窗标題、頁面路徑等。

1）JSON 配置

JSON（JavaScript Object Notation）是一種輕量級的資料交換格式，具有易于了解、讀寫和解析等特點，廣泛應用于Web應用、移動應用等領域。在小程式中，JSON被用于配置小程式的各種屬性和資訊。

小程式的 JSON 配置包括兩部分：

• app.json 和頁面的配置檔案。其中，app.json 是小程式的全局配置檔案，用于配置小程式的視窗屬性、底部導航欄屬性、頁面路徑等資訊。
• 頁面的配置檔案包括 .json、.wxml、.wxss、.js 四個檔案，用于配置頁面的資料、結構、樣式和行為等資訊。

JSON 配置的作用主要有以下幾個方面：

1. 配置小程式的基本資訊：小程式的标題、視窗大小、導航欄樣式等。
2. 配置頁面的路徑和導航欄資訊：在 app.json 檔案中配置小程式的頁面路徑，可以通過導航欄進行頁面的跳轉。
3. 配置底部導航欄：可以通過 tabBar 屬性來配置小程式的底部導航欄，使得使用者可以快速切換頁面。
4. 配置頁面的資料和結構：在頁面的 .json 和 .wxml 檔案中配置頁面的資料和結構資訊，包括頁面的标題、背景色、布局等。
5. 配置頁面的樣式和行為：在頁面的 .wxss 和 .js 檔案中配置頁面的樣式和行為資訊，包括頁面的字型、顔色、動畫等。

通過配置小程式的 JSON 檔案，開發者可以控制小程式的外觀和行為，進而提升小程式的使用者體驗。

讓我們來看一個小程式的 JSON 配置示例：

{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  "window": {
    "navigationBarTitleText": "小程式示例",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "關于",
        "iconPath": "images/about.png",
        "selectedIconPath": "images/about-active.png"
      }
    ]
  }
}
           

在這個示例中，我們定義了小程式的三個部分的配置資訊：

• "pages"：定義了小程式的頁面路徑，可以在其中指定小程式的各個頁面。
• "window"：定義了小程式的視窗屬性，可以在其中設定小程式的标題、導航欄背景色等。
• "tabBar"：定義了小程式的底部導航欄屬性，可以在其中設定底部導航欄的顔色、選中顔色等，以及每個導航欄的文字、圖示等。

以上三個部分的配置資訊都是以JSON格式呈現的，小程式可以通過讀取這些配置檔案，來确定小程式的結構、樣式和行為等方面的資訊。

2）WXML 模闆

WXML（WeiXin Markup Language）是一種類似HTML的标記語言，是小程式開發中的一部分。它用于描述小程式的結構群組件，可以像HTML一樣編寫靜态頁面。

• WXML 模闆由一系列的标簽和屬性組成，用于描述小程式頁面的結構和内容。與HTML類似，WXML 也是一種階層化結構，标簽可以嵌套，形成父子關系。在WXML中，每一個标簽都有一個對應的屬性，用于控制标簽的顯示和行為。
• 與HTML不同的是，WXML的标簽和屬性名稱與HTML略有不同，同時WXML也提供了一些專門的元件，用于描述小程式的特殊功能，如導航欄、下拉重新整理等。

WXML模闆的優點在于：

• 簡潔：WXML使用了類似HTML的文法，使得開發者可以用更少的代碼實作頁面的效果。
• 專門為小程式設計：WXML提供了許多專門為小程式設計的标簽群組件，可以友善地實作小程式的各種功能。
• 與JS互動友善：WXML可以通過綁定資料、事件等方式與JS互動，使得頁面的資料和行為可以友善地控制。
• 元件化開發：WXML支援元件化開發，可以将頁面拆分成多個元件，降低代碼耦合度，提高代碼的複用性。

通過WXML模闆，開發者可以輕松建立小程式的頁面結構和布局，并實作小程式的各種功能和互動效果。

1、WXML 模闆常用标簽

• <view>：視圖容器，類似于 HTML 中的 <div> 标簽。
• <text>：文本容器，用于顯示文本内容。
• <image>：圖檔容器，用于顯示圖檔。
• <block>：塊級容器，可以替代 <view> 使用，但是不會在頁面中生成額外的節點。
• <swiper>：滑塊視圖容器，用于展示輪播圖等内容。
• <scroll-view>：可滾動視圖容器，用于展示大量資料時，可以滾動檢視。
• <icon>：圖示容器，用于顯示小圖示。
• <button>：按鈕容器，用于實作使用者互動。
• <input>：輸入框容器，用于接收使用者輸入。
• <checkbox>：複選框容器，用于選擇多個選項。
• <radio>：單選框容器，用于選擇一個選項。
• <picker>：選擇器容器，用于從預設的選項中選擇一個或多個選項。
• <form>：表單容器，用于收集使用者輸入的資料。
• <navigator>：導航容器，用于實作頁面跳轉。

以上是 WXML 模闆中常用的标簽，當然還有其他的标簽和屬性，可以根據具體需求進行選擇使用。

2、view 标簽與 block 标簽的差別

在 WXML 模闆中，<view> 和 <block> 都是容器标簽，用于包裹其他元件或元素，但是它們在渲染和表現上有一些差別：

• 渲染差異：<view> 在渲染時會被轉換為 div 标簽，而 <block> 則不會被轉換，它隻是一個純粹的容器标簽，不會在頁面中生成額外的節點。
• 樣式差異：<view> 和 <block> 的樣式類别都是塊級元素，但是在一些情況下它們的預設樣式可能不同。比如，<view> 預設有一些邊距和内邊距，而 <block> 則沒有，這可能會影響布局效果。
• 使用場景：<view> 和 <block> 在使用場景上也有一些差異，<view> 更适合用于布局容器，比如頁面的主要結構、清單的項等；而 <block> 更适合用于臨時包裹一些元素，比如在一個條件判斷中，将一些元素作為一個整體進行包裹等。

綜上所述，<view> 和 <block> 都是容器标簽，具有類似的功能，但是它們在渲染、樣式和使用場景上可能有一些差別，開發者可以根據具體需求進行選擇和使用。

下面是一個簡單的 WXML 模闆示例：

<!-- index.wxml -->
<view class="container">
  <view class="title">Hello World!</view>
  <image src="../../images/avatar.png" class="avatar"></image>
  <view class="description">This is a demo for WXML template.</view>
  <button class="button" bindtap="onTap">Click Me</button>
</view>
           

在這個示例中，<view> 标簽表示一個視圖容器，可以嵌套其他标簽。<image> 标簽表示一個圖檔标簽，用于顯示圖檔。<button> 标簽表示一個按鈕，用于觸發事件。

• 在 WXML 中，每個标簽都可以有一些屬性，用于控制标簽的顯示和行為。比如，class 屬性用于指定标簽的樣式類，src 屬性用于指定圖檔的 URL，bindtap 屬性用于指定按鈕的點選事件。
• 這個示例中的 onTap 是一個在 JavaScript 檔案中定義的函數，用于處理按鈕點選事件。通過在 WXML 中綁定事件，開發者可以輕松地實作小程式的互動效果。
• WXML 的文法與 HTML 類似，但是也有一些差別。在 WXML 中，不能使用 HTML 的标簽和屬性，而是要使用小程式提供的标簽和屬性。同時，WXML也支援一些特殊的文法，如 {{ }} 雙大括号表示資料綁定、wx:if 條件渲染、wx:for 清單渲染等，可以友善地實作複雜的頁面效果。

3、條件控制

1、wx:if 條件控制

WXML 模闆中，可以使用 wx:if 條件渲染标簽，實作根據條件顯示不同内容的效果。下面是一個 WXML 模闆條件示例：

<!-- index.wxml -->
<view class="container">
  <view wx:if="{{isShow}}" class="title">Hello World!</view>
  <view wx:if="{{!isShow}}" class="title">Goodbye World!</view>
  <button class="button" bindtap="onToggle">Toggle</button>
</view>
           

在這個示例中，我們定義了一個 isShow 資料項，用于控制顯示不同的标題。在 WXML 中，我們使用 wx:if 條件渲染标簽，根據 isShow 的值來判斷顯示哪個标題。

在 JavaScript 檔案中，我們定義了一個 onToggle 函數，用于切換 isShow 的值。當使用者點選按鈕時，isShow 的值會發生變化，進而實作标題的切換效果。

// index.js
Page({
  data: {
    isShow: true
  },
  onToggle: function() {
    this.setData({
      isShow: !this.data.isShow
    })
  }
})
           

在 JavaScript 檔案中，我們使用 setData 函數來更新 isShow 的值，進而觸發模闆的重新渲染。

通過使用 wx:if 條件渲染标簽，我們可以友善地實作根據條件顯示不同内容的效果，進而增強小程式的互動性和可用性。

2、wx:if/else 條件控制

WXML 模闆中，除了使用 wx:if 條件渲染标簽，還可以使用 wx:else 标簽來實作條件判斷的 else 分支。下面是一個 WXML 模闆條件 if/else 示例：

<!-- index.wxml -->
<view class="container">
  <view class="title">Welcome to My Page!</view>
  <view wx:if="{{isVIP}}" class="subtitle">VIP User</view>
  <view wx:else class="subtitle">Normal User</view>
</view>

<!--elif-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
           

在這個示例中，我們定義了一個 isVIP 資料項，用于控制顯示不同的使用者類型。在 WXML 中，我們使用 wx:if 和 wx:else 标簽，根據 isVIP 的值來判斷顯示不同的使用者類型。

在 JavaScript 檔案中，我們定義了一個 onLoad 函數，用于初始化 isVIP 資料項。

// index.js
Page({
  data: {
    isVIP: true
  },
  onLoad: function () {
  }
})
           

在 JavaScript 檔案中，我們可以使用各種方式來初始化資料項，例如從伺服器擷取資料、從本地緩存擷取資料、從使用者輸入擷取資料等等。

通過使用 wx:if 和 wx:else 标簽，我們可以友善地實作條件判斷的 else 分支，進而增強小程式的可用性和互動性。

3、wx:for 循環

WXML 模闆中，可以使用 wx:for 清單渲染标簽，實作根據資料循環渲染清單的效果。下面是一個 WXML 模闆循環示例：

<!-- index.wxml -->
<view class="container">
  <view class="title">List:</view>
  <view wx:for="{{list}}" wx:key="id" class="item">{{item.name}}</view>
</view>
           

在這個示例中，我們定義了一個 list 資料項，它是一個數組，包含了一些對象。在 WXML 中，我們使用 wx:for 清單渲染标簽，周遊 list 數組中的每個對象，然後根據對象的屬性渲染清單項。

在 JavaScript 檔案中，我們定義了一個 onLoad 函數，用于初始化 list 資料項。

// index.js
Page({
  data: {
    list: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  },
  onLoad: function () {
  }
})
           

在 JavaScript 檔案中，我們可以使用各種方式來初始化資料項，例如從伺服器擷取資料、從本地緩存擷取資料、從使用者輸入擷取資料等等。

通過使用 wx:for 清單渲染标簽，我們可以友善地實作根據資料循環渲染清單的效果，進而增強小程式的可用性和互動性。

3）WXSS 樣式

WXSS（WeiXin Style Sheets）是小程式的樣式語言，用于控制小程式界面的外觀和布局。它是一種 CSS 擴充語言，具有類似 CSS 的文法，但也有一些自己的特點和限制。

WXSS 支援大部分 CSS 文法和特性，如選擇器、盒模型、浮動、定位、字型、背景、顔色、動畫等等。目前支援的選擇器有：

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的元件
#id	#firstname	選擇擁有 id="firstname" 的元件
element	view	選擇所有view 元件
element, element	view, checkbox	選擇所有文檔的 view 元件和所有的 checkbox 元件
::after	view::after	在 view 元件後邊插入内容
::before	view::before	在 view 元件前邊插入内容

全局樣式與局部樣式：

如果您想要在多個頁面或元件中使用相同的樣式，可以使用小程式提供的全局樣式(global style)或公共樣式(common style)功能。具體來說，您可以在 app.wxss 中定義全局樣式或在一個獨立的wxss檔案中定義公共樣式，然後在頁面或元件的樣式标簽中引用它們。

定義全局樣式的方法是在 app.wxss 中定義樣式類，這些類可以在整個小程式中使用。例如：

/* app.wxss */
.global-text {
  font-size: 16px;
  color: #333;
}
           

然後，您可以在任何頁面或元件中使用這個樣式類：

/* 頁面或元件的樣式标簽 */
<view class="global-text">這是全局樣式中定義的文本樣式</view>
           

定義公共樣式的方法是在一個獨立的wxss檔案中定義樣式類，然後在頁面或元件的樣式标簽中引用它們。例如：

/* common.wxss */
.common-button {
  background-color: #00c2ff;
  color: #fff;
  padding: 10px 20px;
}

/* 頁面或元件的樣式标簽 */
<view class="common-button">這是公共樣式中定義的按鈕樣式</view>
           

請注意，如果使用公共樣式，您需要在頁面或元件中引入該檔案。例如，在頁面的config對象中設定 usingComponents 字段：

/* 頁面的js檔案 */
Page({
  config: {
    usingComponents: {
      'common-style': '/path/to/common.wxss'
    }
  }
})
           

然後在頁面或元件的樣式标簽中使用 @import 語句引入該檔案：

/* 頁面或元件的樣式标簽 */
@import 'common-style';

<view class="common-button">這是公共樣式中定義的按鈕樣式</view>
           

除了支援 CSS 文法和特性之外，WXSS 還有一些自己的特點和擴充，例如：

• 支援尺寸機關 rpx，可以根據螢幕寬度自動縮放；
• 支援導入外部樣式檔案，可以使用 @import 關鍵字；
• 支援樣式繼承，可以使用 inherit 和 initial 值；
• 支援全局樣式覆寫，可以使用 !important 關鍵字。

通過使用 WXSS，我們可以友善地控制小程式界面的外觀和布局，進而實作各種視覺效果和互動效果。

以下是一個基本的WXSS樣式示例：

/* 定義樣式 */
.page {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  padding: 10px;
}

.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.subtitle {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

.text {
  line-height: 1.5;
  margin-bottom: 10px;
}

.link {
  color: #00c2ff;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* 使用樣式 */
<view class="page">
  <view class="title">這是标題</view>
  <view class="subtitle">這是副标題</view>
  <view class="text">這是文本内容</view>
  <a class="link" href="https://www.example.com">這是連結</a>
</view>

           

在這個示例中，定義了一些基本樣式，如背景色、字型大小、邊距和顔色等，并分别給不同的元素應用了不同的樣式類。在使用樣式時，隻需要在對應的元素上添加對應的類名即可。

4）JS（JavaScript）邏輯互動

微信小程式中的JS主要用于實作頁面的邏輯互動和資料處理等功能。以下是一些常見的JS互動方式：

• 資料綁定和事件綁定：在WXML中通過{{}}文法進行資料綁定，在WXSS中使用{{}}文法綁定樣式，同時也可以在JS中使用 setData 方法更新頁面資料。事件綁定則可以使用 bind 和 catch 字首綁定事件處理函數。
• API調用：微信小程式提供了豐富的API接口，可以通過JS代碼調用這些API來實作各種功能，例如擷取使用者資訊、調用支付接口、發送請求等。
• 生命周期函數：微信小程式中提供了多個生命周期函數，可以在不同的階段執行相應的操作，例如onLoad、onShow、onReady、onHide、onUnload等。
• 自定義元件：自定義元件可以将一組WXML、WXSS和JS封裝成一個獨立的元件，可以在不同的頁面中複用。自定義元件中可以使用屬性和事件來實作資料傳遞和互動。

總之，微信小程式中的JS主要用于實作頁面的邏輯互動和資料處理，可以通過資料綁定、事件綁定、API調用、生命周期函數、自定義元件等方式來實作不同的功能。需要注意的是，為了提高小程式的性能和體驗，應盡量減少不必要的操作和網絡請求，同時避免頻繁更新頁面資料。

下面是一個簡單的微信小程式JS邏輯互動的示例：

1、WXML檔案

<view>{{message}}</view>
<button bindtap="changeMessage">點選我修改消息</button>
           

2、JS檔案

Page({
  data: {
    message: 'Hello World'
  },
  changeMessage: function () {
    this.setData({
      message: '你好，世界！'
    })
  }
})
           

這個示例中，我們在WXML中定義了一個 view 元素和一個 button 元素。view 元素用于顯示一個消息，button 元素用于觸發一個事件。在JS檔案中，我們定義了一個名為 changeMessage 的事件處理函數，當使用者點選按鈕時，會觸發這個事件處理函數。changeMessage 函數使用 setData 方法來更新 message 資料，将其改為“你好，世界！”。由于 message 資料已經被綁定到view元素中，是以當資料更新後，頁面上的消息也會相應地更新。

在這個示例中，我們示範了資料綁定、事件綁定和API調用的基本用法。其中，setData方法用于更新頁面資料，可以在changeMessage事件處理函數中實作資料更新；bindtap用于綁定點選事件，可以在button元素上使用該屬性來綁定事件處理函數。

1、生命周期函數

微信小程式生命周期函數的執行順序如下：

• onLaunch：當小程式初始化完成時，會觸發onLaunch函數，這是整個小程式生命周期的第一個函數，隻執行一次。一般用來做一些初始化操作。
• onShow：當小程式啟動或從背景進入前台顯示時，會觸發onShow函數。在小程式生命周期中，onShow函數可能會被多次執行。一般用來擷取小程式的狀态資訊。
• onPageLoad 和 onReady：當小程式頁面加載完成時，會依次觸發onLoad和onReady函數。onLoad函數會在頁面加載時觸發，而onReady函數會在頁面初次渲染完成時觸發。onPageLoad 一般用來初始化頁面資料。onReady 一般用來進行頁面布局操作。
• onTabItemTap：當使用者點選tab欄時，會觸發onTabItemTap函數。
• onPullDownRefresh：當使用者下拉重新整理頁面時，會觸發onPullDownRefresh函數。
• onReachBottom：當頁面滾動到底部時，會觸發onReachBottom函數。
• onHide：當小程式從前台進入背景時，會觸發onHide函數。
• onUnload：當小程式退出時，會觸發onUnload函數。

以頁面為例，可以在.js檔案中定義相應的生命周期函數：

Page({
  // 頁面的初始資料
  data: {
    message: 'Hello World!'
  },
  // 生命周期函數--監聽頁面加載
  onLoad: function (options) {
    console.log('頁面加載完成')
  },
  // 生命周期函數--監聽頁面初次渲染完成
  onReady: function () {
    console.log('頁面初次渲染完成')
  },
  // 生命周期函數--監聽頁面顯示
  onShow: function () {
    console.log('頁面顯示')
  },
  // 生命周期函數--監聽頁面隐藏
  onHide: function () {
    console.log('頁面隐藏')
  },
  // 生命周期函數--監聽頁面解除安裝
  onUnload: function () {
    console.log('頁面解除安裝')
  },
  // 頁面相關事件處理函數--監聽使用者下拉動作
  onPullDownRefresh: function () {
    console.log('使用者下拉重新整理')
  },
  // 頁面上拉觸底事件的處理函數
  onReachBottom: function () {
    console.log('頁面上拉觸底')
  },
  // 使用者點選右上角分享
  onShareAppMessage: function () {
    console.log('使用者點選分享')
    return {
      title: '小程式分享',
      path: '/pages/index/index'
    }
  }
})

           

在元件中也可以使用相應的生命周期函數進行配置。需要注意的是，在小程式中，元件的生命周期函數會受到父元件的影響，具體的執行順序會受到元件的嵌套關系的影響。

2、事件函數

在微信小程式中，事件函數是指在小程式中發生事件時所執行的函數，例如使用者點選按鈕、滑動頁面、輸入内容等。事件函數可以通過wxss樣式表中的bind或catch屬性和wxml模闆中的event對象來綁定和觸發。

微信小程式中常見的事件函數有：

• bindtap/catchtap：點選事件函數，當使用者點選某個元素時觸發。

bindtap和catchtap都是用來綁定點選事件的屬性，它們之間的差別在于事件冒泡的處理方式不同。

具體來說：

- bindtap是捕獲型事件，觸發事件後先執行目前元素的事件函數，再向上冒泡執行父元素的事件函數。如果父元素也綁定了bindtap事件，那麼該事件也會被觸發執行。

- catchtap是冒泡型事件，觸發事件後先執行父元素的事件函數，再向下捕獲執行目前元素的事件函數。如果目前元素綁定了catchtap事件，那麼該事件會阻止冒泡，不會繼續向上執行父元素的事件函數。
           

• bindinput/catchinput：輸入事件函數，當使用者在輸入框中輸入内容時觸發。這兩者的差別跟上面的差別一樣。
• bindscroll/catchscroll：滾動事件函數，當使用者在頁面上滑動時觸發。這兩者的差別跟上面的差別一樣。
• bindlongpress/catchlongpress：長按事件函數，當使用者長按某個元素時觸發。這兩者的差別跟上面的差別一樣。
• bindsubmit/catchsubmit：表單送出事件函數，當使用者送出表單時觸發。這兩者的差別跟上面的差別一樣。
• bindcancel/catchcancel：表單取消事件函數，當使用者取消表單時觸發。這兩者的差別跟上面的差別一樣。

除了以上常見的事件函數外，微信小程式還提供了很多其他的事件函數，具體可以參考微信小程式開發文檔。

在編寫事件函數時，需要注意以下幾點：

• 事件函數的名稱應該與綁定事件的屬性名稱一緻，以便能夠正确地觸發事件。
• 事件函數中可以通過event對象擷取事件的相關資訊，例如事件類型、觸發元素、觸發位置等。
• 事件函數中可以使用this關鍵字來擷取事件的源對象，例如點選事件中的this指向被點選的元素。
• 在事件函數中可以調用小程式提供的API來實作相應的功能和效果。

需要注意的是，事件函數的觸發順序與綁定的先後順序有關，即先綁定的事件函數先執行。同時，在一個元素上綁定多個事件函數時，需要使用 bind 和 catch 來區分冒泡事件和非冒泡事件。

3、雙向綁定

微信小程式支援雙向綁定的方式是通過使用 <input>、<textarea> 等表單元素的 value 屬性實作的。當使用者在表單元素中輸入内容時，value 屬性會自動更新綁定的資料，反之，當資料更新時，表單元素的值也會随之更新。

以下是一個示例，示範了如何在微信小程式中實作雙向綁定：

<!-- 在 wxml 檔案中 -->
<view class="container">
  <input type="text" value="{{inputValue}}" bindinput="onInput" />
  <text>輸入的内容是：{{inputValue}}</text>
</view>
           

js 檔案

// 在 js 檔案中
Page({
  data: {
    inputValue: ''
  },
  onInput: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
  }
})
           

在這個示例中，<input> 元素的 value 屬性與 inputValue 資料進行了雙向綁定。當使用者在輸入框中輸入内容時，onInput 方法會被調用，并通過 setData 更新 inputValue 資料的值。這個過程中，value 屬性會自動更新，以反映 inputValue 資料的目前值。同時，在頁面中也會展示出使用者輸入的内容。

三、目錄結構

微信小程式的目錄結構如下：

├── app.js             // 小程式邏輯
├── app.json           // 小程式公共配置
├── app.wxss           // 小程式公共樣式
├── pages              // 頁面目錄
│   ├── index          // index頁面目錄
│   │   ├── index.js   // index頁面邏輯
│   │   ├── index.wxml // index頁面結構
│   │   └── index.wxss // index頁面樣式
│   └── ...
├── components         // 元件目錄
│   ├── my-component   // my-component元件目錄
│   │   ├── my-component.js     // my-component元件邏輯
│   │   ├── my-component.wxml   // my-component元件結構
│   │   └── my-component.wxss   // my-component元件樣式
│   └── ...
├── images             // 圖檔目錄
├── utils              // 工具目錄
├── package.json       // 項目配置檔案
└── README.md          // 項目說明檔案
           

其中說明：

• app.js 是小程式的全局邏輯檔案，包括小程式的生命周期函數等。
• app.json 是小程式的公共配置檔案，包括小程式的頁面路徑、視窗配置、全局樣式等。
• app.wxss 是小程式的公共樣式檔案，包括全局樣式和公共元件樣式等。
• pages 目錄下存放小程式的頁面檔案，每個頁面檔案包括對應的js、wxml和wxss檔案。
• components 目錄下存放小程式的元件檔案，每個元件檔案包括對應的js、wxml和wxss檔案。
• images 目錄下存放小程式的圖檔資源檔案。
• utils 目錄下存放小程式的工具函數檔案，用于封裝一些常用的功能函數，如請求函數、驗證函數等。
• package.json 是小程式的項目配置檔案，包括小程式的依賴庫、開發者工具版本等。
• README.md 是小程式的項目說明檔案，包括小程式的介紹、使用方法、常見問題等。

四、Page 構造器和 Component 構造器的差別

基礎庫 1.6.3 開始支援，低版本需做相容處理。

微信小程式中，Page 構造器和 Component 構造器都是用來建立頁面或元件的工具，但是它們的使用方式和作用有所不同。

• Page 構造器用來建立頁面，它是一個對象，用于定義頁面的初始資料、生命周期函數、事件處理函數等。每個小程式頁面都必須至少包含一個 Page 構造器。通過 Page 構造器可以建立一個新頁面，也可以重用一個已有的頁面，進而實作頁面的複用。
• Component 構造器則用來建立元件，它也是一個對象，用于定義元件的屬性、資料、方法和生命周期函數。元件是小程式中的一個重要概念，它可以被多個頁面引用和複用。與Paget 不同，Component 本身并不具有生命周期，它的生命周期由引用它的頁面或元件決定。 Component 構造器的主要差別是：方法需要放在 methods: { } 裡面。

Component 代碼示例：

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 頁面建立時執行
    },
    onPullDownRefresh: function() {
      // 下拉重新整理時執行
    },
    // 事件響應函數
    viewTap: function() {
      // ...
    }
  }
})
           

下面我将通過一個簡單的示例來看一下。

假設我們要建立一個包含一個輸入框和一個按鈕的元件，當點選按鈕時，将輸入框中的内容顯示在頁面上。

首先，我們可以使用 Component 構造器來建立這個元件，代碼如下：

// index.wxml
<custom-input bindinput="onInput"></custom-input>

// custom-input.wxml
<view class="input-container">
  <input bindinput="onInput" placeholder="請輸入内容"></input>
  <button bindtap="onTap">顯示内容</button>
</view>

// custom-input.js
Component({
  methods: {
    onInput(event) {
      this.setData({ value: event.detail.value })
    },
    onTap() {
      this.triggerEvent('show', { value: this.data.value })
    }
  }
})
           

在這個示例中，我們使用 Component 構造器建立了一個名為 custom-input 的元件。該元件包含一個輸入框和一個按鈕，當輸入框内容發生變化時，将會觸發 onInput 方法，将輸入框的值儲存在元件資料中。當按鈕被點選時，将會觸發 onTap 方法，通過 triggerEvent 方法觸發自定義事件 show，并将輸入框的值作為參數傳遞給該事件。

接下來，我們可以在一個頁面中使用這個元件，代碼如下：

// index.wxml
<custom-input bind:show="onShow"></custom-input>

// index.js
Page({
  data: {
    inputValue: ''
  },
  methods: {
    onShow(event) {
      this.setData({ inputValue: event.detail.value })
    }
  }
})

           

在這個示例中，我們使用 Page 構造器建立了一個名為 index 的頁面。該頁面引用了 custom-input 元件，并監聽了它的 show 事件。當該事件觸發時，将輸入框的值儲存在頁面資料中。

可以看到，Page 構造器用于建立頁面，可以在頁面中引用和使用自定義元件。而 Component 構造器用于建立元件，可以在多個頁面中複用。這是兩者的主要差別。

總的來說，Page 構造器和 Component 構造器都是用來建立小程式中的不同類型的對象，它們的作用和使用方式略有不同。Page 構造器用來建立頁面，而Component 構造器用來建立元件。

五、小程式的生命周期

微信小程式有兩種生命周期，一種是應用生命周期，另一種是頁面生命周期。

1）應用生命周期

應用生命周期指的是整個小程式從打開到關閉的過程中的生命周期，包括小程式的啟動、進入前台/背景、退出等事件。小程式的應用生命周期包括以下事件：

• onLaunch：小程式初始化時觸發，隻會觸發一次。
• onShow：小程式啟動或從背景進入前台時觸發。
• onHide：小程式從前台進入背景時觸發。
• onError：小程式發生腳本錯誤或 API 調用失敗時觸發。

2）頁面生命周期

頁面生命周期指的是小程式中每個頁面的生命周期，包括頁面的建立、顯示、隐藏和銷毀等事件。每個頁面都有自己的生命周期函數，可以在這些函數中執行相應的操作。下圖說明了頁面 Page 執行個體的生命周期。

以下是小程式頁面生命周期函數的執行順序：

• onLoad：頁面加載時觸發，隻會觸發一次。
• onShow：頁面顯示時觸發，每次打開頁面都會觸發。
• onReady：頁面初次渲染完成時觸發，隻會觸發一次。
• onHide：頁面隐藏時觸發。
• onUnload：頁面解除安裝時觸發。

除了上述五個生命周期函數外，還有一些其他的生命周期函數，例如：

• onPullDownRefresh：下拉重新整理時觸發。
• onReachBottom：上拉觸底時觸發。
• onShareAppMessage：點選分享按鈕時觸發。
• onPageScroll：頁面滾動時觸發。

需要注意的是，不同的頁面可能具有不同的生命周期，具體的生命周期函數觸發順序和觸發次數也會因頁面類型的不同而不同。

六、小程式頁面路由

微信小程式的頁面路由是指在小程式中切換頁面的過程。小程式中有兩種方式可以進行頁面路由：

1） 聲明式導航

小程式中可以使用 <navigator> 标簽實作聲明式導航，類似于 HTML 中的超連結。通過設定 url 屬性，可以指定要跳轉的頁面路徑，例如：

<navigator url="/pages/index/index">跳轉到首頁</navigator>
           

也可以通過 open-type 屬性指定跳轉類型，例如：

• navigateTo：普通跳轉，關閉目前頁面打開新頁面。
• redirectTo：重定向，關閉目前頁面并跳轉到新頁面。
• switchTab：跳轉到 tabBar 頁面，隻能跳轉到帶有 tabBar 的頁面。
• reLaunch：關閉所有頁面并跳轉到新頁面。
• navigateBack：使用者按左上角傳回按鈕。

<navigator url="/pages/index/index" open-type="navigateTo">跳轉到首頁</navigator>           

注意事項

• navigateTo, redirectTo 隻能打開非 tabBar 頁面。
• switchTab 隻能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即隻要是定義為 tabBar 的頁面，底部都有 tabBar。
• 調用頁面路由帶的參數可以在目标頁面的onLoad中擷取。

2）程式設計式導航

小程式中也可以使用程式設計式導航進行頁面路由，通過調用 wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.reLaunch()等 API 實作。例如：

wx.navigateTo({
  url: '/pages/index/index'
})
           

【注意】在小程式中使用程式設計式導航時，需要在 app.json 檔案中聲明要跳轉的頁面路徑。

{
  "pages": [
    "pages/index/index",
    "pages/about/about",
    "pages/contact/contact"
  ]
}
           

小程式中還可以通過 getCurrentPages() API 擷取目前所有頁面棧，通過 getCurrentRoute() API 擷取目前頁面路徑，以及通過 onRouteChange 生命周期函數監聽頁面路由變化事件。

const pages = getCurrentPages()
const currentRoute = getCurrentRoute()

wx.onRouteChange(function(route) {
  console.log('目前路由變化為：', route)
})
           

七、小程式事件

微信小程式有許多事件可以觸發，以下是一些常見的事件：

• Page事件：包括頁面加載、頁面顯示、頁面隐藏等事件；
• View事件：包括點選事件、長按事件、滑動事件等；
• Form事件：包括表單送出事件、表單重置事件等；
• Audio事件：包括音頻播放事件、音頻暫停事件等；
• Video事件：包括視訊播放事件、視訊暫停事件等；
• NavigationBar事件：包括導航欄按鈕點選事件、導航欄高度變化事件等；
• TabBar事件：包括Tab切換事件、Tab被點選事件等；
• 互動事件：包括模态框顯示事件、動畫結束事件等。

以上隻是微信小程式事件的一部分，開發者還可以自定義事件，實作更多複雜的互動邏輯。

下面我用一個簡單的微信小程式示例來講解事件處理。

假設我們現在要實作一個功能，在頁面上顯示一個按鈕，點選按鈕後彈出一個提示框，提示框上顯示一段文本内容。

1、在 WXML 檔案中添加一個按鈕元素：

<view>
  <button bindtap="showModal">點選我</button>
</view>
           

這裡我們使用了 <button> 元素來建立一個按鈕，它有一個 bindtap 屬性，用來綁定 tap事件，并調用 showModal 函數來處理事件。

2、在 JS 檔案中添加 showModal 函數：

Page({
  showModal: function() {
    wx.showModal({
      title: '提示',
      content: 'Hello, world!'
    })
  }
})
           

這裡我們使用了 wx.showModal 函數來建立一個提示框，它有兩個參數：title 和 content，分别用來設定提示框的标題和内容。在 showModal 函數中，我們直接調用了 wx.showModal 函數，并傳入了相應的參數。

3、在微信開發者工具中預覽頁面，點選按鈕，即可看到彈出的提示框，上面顯示着 Hello, world! 這段文本内容。

以上就是一個簡單的微信小程式事件處理示例，通過綁定 tap 事件，并調用相應的函數來處理事件，實作了按鈕點選後彈出提示框的功能。開發者可以根據自己的需求來編寫相應的事件處理函數，實作更複雜的互動效果。

篇幅有點長，就先到這裡了，剩餘的内容會放到下篇文章繼續講解，有任何疑問歡迎給我留言哦，也可關注我的公衆号【大資料與雲原生技術分享】加群交流或私信溝通~