小程序使用(yong)的微信自己開(kai)發(fa) MINA 框架(jia),提供了視(shi)圖層描述(shu)語言，WXML 和(he) WXSS 以及基于JavaScript的邏(luo)(luo)輯(ji)層框架(jia)，并在(zai)視(shi)圖層與邏(luo)(luo)輯(ji)層間提供了數據(ju)傳(chuan)輸和(he)事件系(xi)統(tong)，可以讓開(kai)發(fa)者可以方便的聚焦于數據(ju)與邏(luo)(luo)輯(ji)上。

打(da)開的時候(hou)會自動提示(shi)創建一(yi)個demo，demo結構文件樹(shu)如下：

其中app.js、app.json、app.wxss 是必不可少(shao)的(de)，是小程序生(sheng)成的(de)依賴(lai)文(wen)件。

app.js 監聽并(bing)控制這整個程序的(de)生命周期，也是(shi)全局(ju)變(bian)量聲明的(de)地方(fang)。如(ru)下是(shi) app.js 中的(de)一段代碼：

app.json 是對整個小程序的全局配置(zhi)。不可注釋。

pages為注(zhu)冊頁面(mian)的列表，均為相(xiang)對路徑，省去了(le)后綴名，程序默認(ren)顯示列表第一個。

app.wxss 是整個小程序的公共(gong)樣(yang)式表。

其中：

 apx 是尺寸單位(wei)，可根據屏幕(mu)寬(kuan)度(du)(du)自適應(ying)大小。與之對(dui)應(ying)的有rem：規(gui)定屏幕(mu)寬(kuan)度(du)(du)為20rem；1rem = (750/20)rpx 。

index.wxml 文件

這(zhe)是(shi)一(yi)個(ge)展示頁面，作用(yong)于html相同。可(ke)以看出(chu)，內容(rong)分塊均采用(yong) view 標(biao)(biao)簽，這(zhe)也(ye)很(hen)容(rong)易(yi)(yi)讓人(ren)想(xiang)到Android 中的(de)布局，但其實只是(shi)更多的(de)是(shi) div 標(biao)(biao)簽的(de)另一(yi)個(ge)版本，在這(zhe)里面有很(hen)多 MINA 自定(ding)義的(de)屬(shu)性，而且在我(wo)們(men)在其中也(ye)看到了{{ }}樣式的(de)值操(cao)作，這(zhe)也(ye)很(hen)容(rong)易(yi)(yi)讓人(ren)聯想(xiang)到 angularJS 中的(de)數(shu)據雙向綁(bang)定(ding)，在 MINA 中也(ye)是(shi)支持的(de)。

同時，頁面(mian)的展示，均需要在小(xiao)程序全局的json配(pei)置(zhi)文(wen)件中配(pei)置(zhi)，前(qian)面(mian)已有說明。

index.js 文(wen)件

其中：

getApp() 獲取應用(yong)實例

Page ： 聲明頁面。

data: 定義數據

bindViewTap ：為在view中綁定的是(shi)tap事件定義操作(zuo)方(fang)法。

wx.navigateTo ：導航到響應(ying)頁面。

onLoad ： 定(ding)(ding)(ding)義頁面(mian)加載(zai)時的(de)(de)事件。在這(zhe)里使(shi)用了在全局 app.js 中(zhong)(zhong)定(ding)(ding)(ding)義的(de)(de)回調函數，將(jiang)data中(zhong)(zhong)的(de)(de)數據更新(xin)，由于雙(shuang)向的(de)(de)綁(bang)定(ding)(ding)(ding)，頁面(mian)中(zhong)(zhong)的(de)(de) userInfo 實(shi)例(li)也會更新(xin)，顯示(shi)出(chu)您的(de)(de)頭(tou)像和昵稱(cheng)。

index.wxss 中同樣(yang)定義(yi)了一些(xie)樣(yang)式，寫法思路與css文件基(ji)本一致，只是不需要再去(qu)關心屏幕適(shi)配問題。

隨后就是(shi)效果(guo)展(zhan)示(shi)了，在開發者工具中掃碼即可查看效果(guo)。