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