互聯網信息化咨詢/技術開發/整合營銷
請通過以下方式免費咨詢
提交
一、概述
微信小程序組成結構包含兩層，邏輯層和視圖層。邏輯層是由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)監聽用戶單擊頁面內「轉發」按鈕（
2.4. 組件事件處理函數
Page()中可以定義組件事件處理函數，在WXML頁面的組件上添加事件綁定，當事件被觸發時就會主動執行Page()中對應的事件處理函數。
三、視圖層
視圖層主要負責頁面結構的呈現，WXML頁面、WXSS樣式和組件都是視圖層的內容。
3. WXML
WXML(WeiXin Markup Language)微信標記語言，類似于HTML，使用<標簽>構建頁面的語言。WXML具有數據綁定、列表渲染、條件渲染、模板、事件和引用功能。
3.1. 數據綁定
數據綁定分為簡單綁定（可以使用{{變量名}}形式表示動態數據，比如，
組件屬性綁定(可以使用動態數據，比如，
控制屬性綁定（使用動態數據,比如，
關鍵字綁定（比如，
運算綁定（在花括號內部還可以進行簡單的運算，支持三元運算、算術運算、邏輯判斷、字符串運算和數據路徑運算）;
組合綁定(可以在花括號內直接進行變量和值的組合，構成新的對像或者數組)。
3.2. 列表渲染
(1)簡單列表
小程序在組件上使用wx:for屬性實現列表渲染，即同一個組件批量出現多次，內容可以不同。
嵌套列表：wx:for可以多層次嵌套，比如，二維數組數據渲染。
多節點列表：用戶可以將wx:for用在
條件渲染
簡單條件：使用wx:if="{{condition}}" 判斷是否需要渲染該代碼塊。
（2）多節點條件
如果一次性判斷多個組件標簽，可以使用
3.3. 模板
小程序框架允許在WXML文件中提供模板(template)，模板可以用于定義代碼片段，然后在不同頁面被重復調用。
3.4. 事件
事件是視圖層到邏輯層的通信方式，有以下特點：
可以將用戶的行為反潰到邏輯層進行處理；可以綁定在組件上，當觸發事件時就會執行邏輯層中對應的事件處理函數；對像可以攜帶額外信息。
(1) 事件的分類
事件分為 冒泡事件和非冒泡事件，說明如下。
冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。
非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。
3.5. 引用
WXML提供了import和include兩種文件引用方式。
import 在小程序可以使用
四、WXSS
WXSS （WeiXin Style Sheets）微信樣式表，這是一種樣式語言，用于描述WXML的組件樣式。樣式分為全局樣式與局部樣式，根據在app.wxss中樣式為全局樣式；在頁面WXSS文件中定義的樣式為局部樣式。
4.1. 尺寸單位
小程序規定了全新的尺寸單位rpx(responsove pixel)，可以根據屏幕寬度進行自適應。其原理是無視設備原先的尺寸，統一規定屏幕寬度為750rpx。
4.2. 樣式倒入
小程序在WXSS樣式表中使用@import語句導入外聯樣式表，@import后跟需要導入的外聯樣式的相對路徑。
五、fiex布局
小程序使用fiex模型提高頁面布局的效率。這是一種靈活的布局模型，當頁面需要適應不同屏幕尺寸及設備類型時該模型可以確保元素在恰當的位置。
更多新聞
