小程序開發指南之小程序代碼組成
小程序介紹與開發環境
小程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色
的使用體驗。任何一個普通的開發者,經過簡單的學習和練習後,都可以輕鬆地完成一個小程序的開發和發布。
1.小程序與普通網頁開發的區別
小程序的主要開發語言是 JavaScript ,所以通常小程序的開發會被用來同普通的網頁開發來做對比。兩者有很大的相似性,對於前端開發者而言,從網頁開發遷移到小程序的開發成
本並不高,但是二者還是有些許區別的。
網頁開發渲染線程和腳本線程是互斥的,這也是為什麼長時間的腳本運行可能會導致頁面失去響應,而在小程序中,二者是分開的,分別運行在不同的進程中。 網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API,進行 DOM 選中和操作。而如上文所述,小程序的邏輯層和渲染層是分開的,邏輯層運行在 JSCore 中,並沒有一個完整瀏覽器對象,因而缺少相關的DOM API和BOM API。這一區別導致了前端開發非常熟悉的一些庫,例如 jQuery、 Zepto 等,在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同,所以一些 NPM 的包在小程序中也是無法運行的。
1.1小程序運行的環境
運行環境 邏輯層 渲染層
IOS JavaScriptCore WKWebView
安卓 X5 JSCore X5瀏覽器
小程序開發者工具 NWJS Chrome WebView
1.2小程序的特色
對於普通用戶,小程序實現了應用的觸手可及,只需要通過掃描二維碼、搜索或者是朋友的分享就可以直接打開,加上優秀的體驗,小程序使得服務提供者的觸達能力變得更強。
2.小程序代碼組成 小程序由配置代碼JSON文件、模板代碼 WXML 文件、樣式代碼 WXSS文件以及邏輯代碼JavaScript文件組成。
2.1 JSON
2.1.1 JSON 配置
SON 是一種數據格式,並不是編程語言,在小程序中,JSON扮演的靜態配置的角色。
2.1.2 JSON語法
相比於XML ,JSON格式最大的優點是易於人的閱讀和編寫,通常不需要特殊的工具,就能讀懂和修改,是一種輕量級的數據交換格式。
JSON文件都是被包裹在一個大括弧中 {},通過key-value的方式來表達數據。
JSON的Key必須包裹在一個雙引號中,在實踐中,編寫 JSON 的時候,忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。
JSON的值只能是以下幾種數據格式:
- 數字,包含浮點數和整數
- 字元串,需要包裹在雙引號中
- Bool值,true 或者 false數組,需要包裹在方括弧中 []對象,需要包裹在大括弧中 {}Null
- 其他任何格式都會觸發報錯,例如 JavaScript 中的 undefined 。
2.3 WXSS 樣式
WXSS(WeiXin Style Sheets)是一套用於小程序的樣式語言,用於描述WXML的組件樣式,也就是視覺上的效果。
WXSS與Web開發中的CSS類似。為了更適合小程序開發,WXSS對CSS做了一些補充以及修改。