小程序開發指南之小程序代碼組成

小程序介紹與開發環境

小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。任何一個普通的開發者，經過簡單的學習和練習後，都可以輕鬆地完成一個小程序的開發和發布。

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與Web開發中的CSS類似。為了更適合小程序開發，WXSS對CSS做了一些補充以及修改。

2.3.1 尺寸單位

在WXSS中，引入了rpx（responsive pixel）尺寸單位。引用新尺寸單位的目的是，適配不同寬度的屏幕，開發起來更簡單。

如圖2-9所示，同一個元素，在不同寬度的屏幕下，如果使用px為尺寸單位，有可能造成頁面留白過多。

修改為rpx尺寸單位

2.3.2 wxss的引入

由於WXSS最終會被編譯打包到目標文件中，用戶只需要下載一次，在使用過程中不會因為樣式的引用而產生多餘的文件請求。

2.4 JavaScript 腳本

小程序的主要開發語言是 JavaScript ，開發者使用 JavaScript 來開發業務邏輯以及調用小程序的API 來完成業務需求。

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 來實現的。同瀏覽器中的JavaScript 相比沒有 BOM 以及 DOM 對象，所以類似 JQuery、Zepto這種瀏覽器類庫是無法在小程序中運行起來的，同樣的缺少 Native 模塊和NPM包管理的機制，小程序中無法載入原生庫，也無法直接使用大部分的 NPM 包。

2.4.1 小程序的執行環境

明白了小程序中的 JavaScript 同瀏覽器以及NodeJS有所不同後，開發者還需要注意到另外一個問題，不同的平台的小程序的腳本執行環境也是有所區別的。

小程序目前可以運行在三大平台：

iOS平台，包括iOS9、iOS10、iOS11Android平台小程序IDE

這種區別主要是體現三大平台實現的 ECMAScript 的標準有所不同。

目前開發者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的標準，但是在小程序中， iOS9和iOS10 所使用的運行環境並沒有完全的兼容到 ECMAScript 6 標準，一些 ECMAScript 6 中規定的語法和關鍵字是沒有的或者同標準是有所不同的。

例如：

箭頭函數

let

const

模板字元串

…

小程序IDE提供語法轉碼工具幫助開發者，將 ECMAScript 6代碼轉為 ECMAScript 5代碼，從而在所有的環境都能得到很好的執行。

開發者需要在項目設置中，勾選 ES6 轉 ES5 開啟此功能。

2.4.2 模塊化

瀏覽器中，所有 JavaScript 是在運行在同一個作用域下的，定義的參數或者方法可以被後續載入的腳本訪問或者改寫。同瀏覽器不同，小程序中可以將任何一個JavaScript 文件作為一個模塊，通過module.exports 或者 exports 對外暴露介面。

您看此文用·秒，轉發只需1秒呦~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！