微信小程式的開發架構組成結構

一、概述

微信小程式組成結構包含兩層，邏輯層和視圖層。邏輯層是由javascript編寫而成，視圖層是由WXML和WXSS組合構成。還有flex模型，flex布局可以確定頁面需要适應不同螢幕尺寸及裝置類型時元素在恰當的位置。本文主要内容是以上幾點。

二、邏輯層

小程式開發架構邏輯層又稱App Service，所有的邏輯互動都是由JavaScript程式設計語言實作。邏輯層的作用是處理業務資料之後，發送給視圖層進行渲染和接收視圖層所産生事件的回報。

1. 注冊程式

小程式通過使用App(OBJECT)方法進行注冊，用于指定小程式的生命周期函數。 需要注意的是，App()隻能寫在小程式根目錄的app.js檔案中，有且隻能注冊一個。

App()中的函數均可為可選函數，比如，onLaunch()、onShow（）、onError等函數。在實際開發過程中根據需要可以自行删除部分函數，或者保留函數不具體編寫内容。

小程式背景是指小程式沒有在手機目前畫面顯示，但是并沒有被消毀。比如，當使用者點選左上角的按鈕關閉小程式時，會進入背景運作狀态。

小程式前台是指小程式在手機目前畫面正在被使用。比如，進入小程式所前呈現給使用者的狀态，或打開處于背景運作狀态時重新進入前的台運作狀态。

2. 注冊頁面

小程式每個頁面JS檔案中通過使用Page(OBJECT)方法進行頁面注冊，該方法可以用于指定小程式頁面的生命周期函數。Page()隻能寫在小程式根每個頁面對應的JS檔案中，每個頁面有且隻能注冊一個。

Page()和App()的函數類似，可以根據實際情況删除或保留該函數不具體編寫内容。Page()支援自定義頁面變量，包括變量名稱、取值和數量。

2.1. 初始資料

Page()預設生成的第一項就是data屬性，該屬性是頁面第一次渲染使用的初始資料。data會以JSON字元串的形式由邏輯層傳至渲染層，是以data中的資料必須是可以轉成JSON的類型。

2.2. 生命周期回調函數

Page()中預設生成的onLoad()、onShow()、onReady()、onHide()、onUnload()均屬于頁面生命周期回調函數。

onLoad()頁面加載時觸發一次，可以在onLoad()參數中擷取打開目前頁面路徑附帶參數。onShow() 當頁面顯示或從小程式背景切入前台時觸發。onReady()當頁面初次渲染完成時觸發，一個頁面隻會調用一次，頁面已經準備妥當，可以和視圖層進行互動。onHide() 當頁面隐藏/切入背景時觸發。比如，navigateTo或底部tab切換到其他頁面，小程式會切入背景等。

onUnload() 當頁面解除安裝時觸發，比如，redirectTo或navigateBack到其他頁面時。

2.3. 頁面事件處理函數

Page()中預設生成onPullDownRefresh()、onReachBottom()、onShareAppMessage()、以及未自動生成的onPageScroll()、onTabItemTap()均屬于頁面事件處理函數。

onPullDownRefresh() 監聽使用者下拉重新整理事件。需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。

onReachBottom() 監聽使用者上拉觸底事件。在app.json的window選項中或頁面配置中設定觸發距離onReachBottomDistance。觸發距離内滑動間，事件隻會被觸發一次。

onPageScroll(OBJECT) 監聽使用者滑動頁面事件。參數OBJECT具有唯一屬性scrollTop，該屬性為number類型表示頁面在錘直方向已滾動的距離(機關為px)。

onShareAppMessage(OBJECT)監聽使用者單擊頁面内「轉發」按鈕（<button>其屬性值open-type="share"）或者右上角菜單「轉發」按鈕行為。

onTabItemTap(OBJECT) 單擊tab時觸發。

2.4. 元件事件處理函數

Page()中可以定義元件事件處理函數，在WXML頁面的元件上添加事件綁定，當事件被觸發時就會主動執行Page()中對應的事件處理函數。

三、視圖層

視圖層主要負責頁面結構的呈現，WXML頁面、WXSS樣式群組件都是視圖層的内容。

3. WXML

WXML(WeiXin Markup Language)微信标記語言，類似于HTML，使用<标簽></标簽>建構頁面的語言。WXML具有資料綁定、清單渲染、條件渲染、模闆、事件和引用功能。

3.1. 資料綁定

資料綁定分為簡單綁定（可以使用{{變量名}}形式表示動态資料，比如，<view>{{msg}}</view>）;

元件屬性綁定(可以使用動态資料，比如，<view id="{{msg}}" ></view>);

控制屬性綁定（使用動态資料,比如，<view wx:if="{{condition}}"><view>）;

關鍵字綁定（比如，<view wx:if="{{false}}"><view>);

運算綁定（在花括号内部還可以進行簡單的運算，支援三元運算、算術運算、邏輯判斷、字元串運算和資料路徑運算）;

組合綁定(可以在花括号内直接進行變量和值的組合，構成新的對像或者數組)。

3.2. 清單渲染

(1)簡單清單

小程式在元件上使用wx:for屬性實作清單渲染，即同一個元件批量出現多次，内容可以不同。

嵌套清單：wx:for可以多層次嵌套，比如，二維數組資料渲染。

多節點清單：使用者可以将wx:for用在<block>标簽上，以渲染一個包含多節點的結構塊。

條件渲染

簡單條件：使用wx:if="{{condition}}" 判斷是否需要渲染該代碼塊。

（2）多節點條件

如果一次性判斷多個元件标簽，可以使用<block>标簽将多個元件包裝起來，并在<block>上使用wx:if控制屬性。

3.3. 模闆

小程式架構允許在WXML檔案中提供模闆(template)，模闆可以用于定義代碼片段，然後在不同頁面被重複調用。

3.4. 事件

事件是視圖層到邏輯層的通信方式，有以下特點：

可以将使用者的行為反潰到邏輯層進行處理；可以綁定在元件上，當觸發事件時就會執行邏輯層中對應的事件處理函數；對像可以攜帶額外資訊。

(1) 事件的分類

事件分為 冒泡事件和非冒泡事件，說明如下。

冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。

非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。

3.5. 引用

WXML提供了import和include兩種檔案引用方式。

import 在小程式可以使用<template>标簽在目标檔案中事先定義好模闆，然後在目前頁面使用<import>标簽引用<template>中的内容。

include 在小程式使用<include>将目标檔案除了<template>以外的整個代碼引入，相當于把目标檔案的代碼直接複制到了<include>标簽的位置。

四、WXSS

WXSS （WeiXin Style Sheets）微信樣式表，這是一種樣式語言，用于描述WXML的元件樣式。樣式分為全局樣式與局部樣式，根據在app.wxss中樣式為全局樣式；在頁面WXSS檔案中定義的樣式為局部樣式。

4.1. 尺寸機關

小程式規定了全新的尺寸機關rpx(responsove pixel)，可以根據螢幕寬度進行自适應。其原理是無視裝置原先的尺寸，統一規定螢幕寬度為750rpx。

4.2. 樣式倒入

小程式在WXSS樣式表中使用@import語句導入外聯樣式表，@import後跟需要導入的外聯樣式的相對路徑。

五、fiex布局

小程式使用fiex模型提高頁面布局的效率。這是一種靈活的布局模型，當頁面需要适應不同螢幕尺寸及裝置類型時該模型可以確定元素在恰當的位置。