1.點(diǎn)擊開(kāi)發(fā)者工具左側(cè)導(dǎo)航的“編輯”,我們可以看到這個(gè)項(xiàng)目,已經(jīng)初始化并包含了一些簡(jiǎn)單的代碼文件。最關(guān)鍵也是必不可少的,是 app.js、app.json、app.wxss這三個(gè)
1)app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API
2)app.json是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成,配置小程序的窗口背景色,配置導(dǎo)航條樣式,配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。
3)app.wxss 是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的class 屬性上直接使用app.wxss 中聲明的樣式規(guī)則。
2.每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。
.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。
1.框架提供了自己的視圖層描述語(yǔ)言WXML 和WXSS,以及基于JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),可以讓開(kāi)發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上
2.響應(yīng)的數(shù)據(jù)綁定
框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)
整個(gè)系統(tǒng)分為兩塊視圖層(View)和邏輯層(App Service)
框架可以讓數(shù)據(jù)與視圖非常簡(jiǎn)單地保持同步。當(dāng)做數(shù)據(jù)修改的時(shí)候,只需要在邏輯層修改數(shù)據(jù),視圖層就會(huì)做相應(yīng)的更新
3.頁(yè)面管理
框架 管理了整個(gè)小程序的頁(yè)面路由,可以做到頁(yè)面間的無(wú)縫切換,并給以頁(yè)面完整的生命周期。開(kāi)發(fā)者需要做的只是將頁(yè)面的數(shù)據(jù),方法,生命周期函數(shù)注冊(cè)進(jìn) 框架 中,其他的一切復(fù)雜的操作都交由 框架 處理。
4.基礎(chǔ)組件
框架 提供了一套基礎(chǔ)的組件,這些組件自帶微信風(fēng)格的樣式以及特殊的邏輯,開(kāi)發(fā)者可以通過(guò)組合基礎(chǔ)組件,創(chuàng)建出強(qiáng)大的微信小程序
5.微信小程序API
框架 提供豐富的微信原生 API,可以方便的調(diào)起微信提供的能力,如獲取用戶信息,本地存儲(chǔ),支付功能等。
6.文件結(jié)構(gòu)
框架程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁(yè)面的 page。
一個(gè)框架程序主體部分由三個(gè)文件組成,必須放在項(xiàng)目的根目錄,如下:
app.js
app.json
app.wxss
一個(gè)架構(gòu)頁(yè)面由四個(gè)文件組成:
js
wxml
wxss
json
注意:為了方便開(kāi)發(fā)者減少配置項(xiàng),我們規(guī)定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。
7.我們使用app.json
文件來(lái)對(duì)微信小程序進(jìn)行全局配置,決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
8.邏輯層(App Service)
小程序開(kāi)發(fā)框架的邏輯層是由JavaScript編寫(xiě)
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層,同時(shí)接受視圖層的事件反饋。 在 JavaScript 的基礎(chǔ)上,我們做了一些修改,以方便地開(kāi)發(fā)小程序。