上一講,簡要講述了微信小程序demo示例的生成,直觀上感受了一下小程序的基本操作。本講接着講解:小程序基本組成及框架結構。
1、小程序基本組成
微信小程序 = javascript + 小程序代碼框架 + 小程序組件 + 小程序API + 微信web開發者工具
2、小程序框架結構
小程序開發框架的目標:通過儘可能簡單、高效的方式,讓開發者可以在微信中開發具有原生APP同等體驗的服務。
框架提供了:視圖層描述語言WXML、微信樣式表WXSS,基於JavaScript的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統。這樣可以使開發者的精力都專注於數據與業務邏輯上。
3、框架代碼文件結構
框架代碼文件結構如下圖所示:
(1)小程序全局整體描述文件
app.js文件:小程序主入口邏輯
app.json文件:小程序公共設置
app.wxss文件:小程序公共樣式表
(2)小程序頁面描述文件(以上圖logs頁面爲例)
每個小程序頁面均由4個文件組成,這四個文件的定義如下:
logs.js:頁面邏輯
logs.wxml:頁面佈局結構
logs.wxss:頁面樣式表
logs.json:頁面配置
注意:
1)如果頁面樣式表與“小程序公共樣式表”有同名樣式定義,則“頁面樣式表”中樣式效果會覆蓋“小程序公共樣式表”中的同名樣式定義。
2)爲了方便開發者使用,減少開發者配置項,這4個文件必須同名。
4、框架代碼文件簡單舉例
(1)app.json文件全局配置示例
全局配置項說明:
1)pages:小程序中添加/刪除頁面的總配置項。接受一個數組,每一項是字符串類型,用於指定小程序有哪些頁面組成。每一項表示對應頁面的“路徑 + 文件名”信息。小程序開發過程中增加/減少頁面時,都要對pages配置項進行修改。
2)window:用於設置小程序的狀態欄、導航條、標題、窗口背景色等信息。
舉例:
3)tabBar:小程序還能支持多tab應用。通過設置tabBar配置項,可以指定小程序tab條在頂部(top)還是底部(bottom)出現。
注意:
i、當設置position爲top時,則不顯示tab icon(tab的圖標)。
ii、tabBar中的list是數組,用於設定tab標籤個數。只能支持2~5個tab標籤,且tab標籤按數組順序排序。
4)networdTimeout:設置網絡超時時間,單位:毫秒;
5)debug:是否開啓調試模式,true、是;false、否;
(2)小程序頁面的.json文件配置說明
小程序單獨頁面的json配置與app.json全局配置類似,且簡單的多。需要注意的是:單獨頁面中配置window選項時,其效果會覆蓋app.json中的window配置項。
好了,小程序的基本組成及框架結構就先講到這裏。各位吃瓜羣衆先消化一下,下節課我將使用具體代碼實例爲大家展示本節課中涉及到的常用配置項以及它們在實際程序中是如何使用的。
敬請關注:第四講,“小程序是怎樣煉成的”。