小程序(xu)使(shi)用的(de)微信(xin)自(zi)己開發(fa) MINA 框架(jia),提(ti)供了視圖層描述語(yu)言(yan)，WXML 和 WXSS 以(yi)及基于JavaScript的(de)邏(luo)(luo)(luo)輯(ji)層框架(jia)，并在視圖層與(yu)邏(luo)(luo)(luo)輯(ji)層間(jian)提(ti)供了數據(ju)(ju)傳輸和事件系統，可(ke)以(yi)讓開發(fa)者可(ke)以(yi)方便(bian)的(de)聚(ju)焦于數據(ju)(ju)與(yu)邏(luo)(luo)(luo)輯(ji)上。

 打(da)開(kai)的時候會自動提(ti)示(shi)創建(jian)一個(ge)demo，demo結構文件樹如下(xia)：

其(qi)中app.js、app.json、app.wxss 是必(bi)不可少的，是小程序生成(cheng)的依賴文件。

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

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

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

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

其中：

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

index.wxml 文(wen)件(jian)

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

同時(shi)，頁(ye)面的(de)展示(shi)，均需要在小程序全局的(de)json配(pei)置文件(jian)中配(pei)置，前面已有說明。

index.js 文件

其中：

getApp() 獲取應用實例

Page ： 聲明(ming)頁面。

data: 定義數據

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

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

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

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

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