我們曾經(jīng)講解了小程序創(chuàng)建流程，本課主要為大家講解小程序框架及核心內容。小程序框架可讓開發(fā)者在微信中用盡可能簡單、高效的方式開發(fā)出具有原生App體驗的服務，這套框架控制著小程序完整的生命周期，負責頁面的加載、渲染、銷毀等工作，它是小程序的核心，學習小程序前，我們一定要對這套框架有深入的了解。本章主要對小程序目錄結構、文件類型進行詳細分析，重點介紹小程序視圖層WXML、MXSS，邏輯層JS，這些是小程序開發(fā)的核心內容。本章個別小節(jié)內容比較深，學習過程中不必過于深究，能對框架有個整體認識即可。
小程序框架將整個系統(tǒng)劃分為視圖層和邏輯層，視圖層是由框架設計的標簽語言WXML (WeiXin Markup Language)和用于描述WXML組件樣式的WXSS (WeiXin Style Sheets）組成，它們的關系就像HTML和CSS的關系。WXML和WXSS在渲染時會被框架解析為不同端的本地渲染文件，這樣保證一套代碼能在多處運行，并且能最大化地接近原生App。渲染原理和React Native、Weex十分接近，開發(fā)過程中我們不必深究WXML的渲染原理,只需要有個大致了解即可。小程序邏輯層是一套運行在本地JavaScript引擎的JavaScript代碼，在此基礎上框架實現(xiàn)了一套模塊化機制，讓每個JS文件有獨立的作用域和模塊化能力，這套模塊化機制遵循CommonJS規(guī)范，熟悉NodeJs的開發(fā)者應該有一定了解。
小程序整體開發(fā)流程非常接近前端HTML+CSS+JavaScript的開發(fā)模式，與前端開發(fā)不同的是，在小程序中沒有DOM的概念，在本地的JavaScript引擎中也沒有window、document等對象，我們不能想當然地通過操作DOM來操作頁面，小程序中的視圖層和邏輯層的交互是通過數(shù)據(jù)綁定和事件響應實現(xiàn)的，這是一種單向綁定的機制。這套機制需要首先將邏輯層和視圖層的數(shù)據(jù)和事件進行綁定，當需要修改頁面時，邏輯層只需要調用特定的setData方法修改已綁定的數(shù)據(jù)，這時框架會自動觸發(fā)WXML重新渲染，達到邏輯層對視圖層的控制;當框架接收到用戶交互操作時，會根據(jù)視圖層綁定的事件，執(zhí)行邏輯層中對應的事件函數(shù)，達到邏輯層對視圖層的響應，視圖層與邏輯層的關系如圖2-1所示。這套機制是小程序框架的工作原理，在后續(xù)內容中我們將反復提及，加深大家對它的理解。
2.2“徒手”創(chuàng)建小程序
為了讓開發(fā)者更好地理解小程序框架運行機制，接下來將帶領大家“徒手”創(chuàng)建一個結構最簡單的小程序，這樣每個細節(jié)都是開發(fā)者自己完成的，這對理解小程序框架有很大幫助。步驟如下:
1)創(chuàng)建項目目錄，這里以E: lweixinImyproject為例。
2)按圖2-2所示的目錄結構創(chuàng)建文件:
3)打開app.json，寫入以下代碼:
{
"pages" : [
*指定默認啟動頁面地址*/"mypages/index/index"]
}
4)打開index.wxml，寫入以下代碼:
<view bindtap="countClick">我是index頁面,你點擊了{count}}次</view>
5)打開index.js文件，寫入以下代碼:
Page( {
data : {count : 0},
countClick : function() {this.setData( {
count : this.data.count + 1});
}});
就這么幾步，一個最簡單的小程序便搭建好了，項目中僅包含一個index頁面，這個目錄結構是最簡單、最基礎的小程序結構。接下來我們將它導入開發(fā)者工具中看看運行效果。
6)打開微信開發(fā)者工具，填寫Appld和項目名稱，點擊“選擇”按鈕添加項目，項目目錄選擇剛才創(chuàng)建的目錄E: lweixinImyproject,點擊“添加項目”完成添加，如圖2-3所示:
圖2-3項目配置界面
7)導入項目后我們便能看到運行界面，當我們點擊文字時，點擊次數(shù)也會隨之增加(如圖2-4所示)。
這就是最簡單的小程序，所有復雜的項目都是圍繞這個結構進行拓展的。當運行這個項目時，框架首先會解析配置文件app.json，通過pages設置找到默認首頁頁面mypages/index/index (pages第一個路徑默認為首頁)，然后加載 mypage/index目錄中index.wxml、index.wxss、index.js、index.json這4個文件進行頁面渲染。
圖2-4myproject運行界面
在index.wxml文件中，我們簡單使用了<view/>組件，頁面渲染時，框架將邏輯層中data的count屬性與視圖層的count進行了綁定，所以—打開頁面會顯示點擊次數(shù)為0。當點擊<viewl>時，會觸發(fā)tap事件，這時視圖層根據(jù)<viewl>組件bindtap屬性值，將綁定的countClick事件發(fā)送給邏輯層，邏輯層根據(jù)方法名找到對應的事件處理函數(shù)countClick并執(zhí)行。countClick函數(shù)中，我們調用了setData方法修改count值，并觸發(fā)視圖層渲染，所以頁面中的數(shù)字隨著點擊次數(shù)增加，這種視圖層和邏輯層之間相互通信的機制便是小程序的數(shù)據(jù)綁定和事件響應系統(tǒng)。
在一個完整的小程序中，文件主要分為框架程序主體文件和頁面文件兩大類:
-框架程序主體文件是系統(tǒng)級別文件，一個項目只有一份，分別是app.json、app.js和app.wxss，它們分別控制小程序整體配置、邏輯和整體樣式，小程序啟動時只會執(zhí)行一次。這3個文件必須放在項目根目錄，且文件名必須是app，其中app.json和app.js是必須的。
.一個小程序有一個或多個頁面，一個頁面由.wxml、.wxss、.js和json四個文件組成，它們分別控制頁面的結構、樣式、邏輯和配置，其中.wxml文件和.js文件是必須的，按照框架規(guī)定，同一個頁面的這4個文件必須具有相同的路徑和文件名，所以在這個項目中我們將它們放置在mypages/index路徑下且文件名統(tǒng)一為index，其中index目錄名可以和頁面文件名不一致，為了便于管理我們盡量將頁面目錄名和頁面文件名保持一致。
現(xiàn)在我們對小程序框架有個大致的認識，下面，將分別為大家講解框架主體文件和框架頁面的特性及使用方法。
您當前瀏覽的文章：《微信小程序開發(fā)核心講解》由小程序開發(fā)服務品牌九尾狐整理發(fā)布。
轉載請注明：http://www.jytsl.com.cn/index.php/shows/6/24.html
文章標簽：
