---恢復內容開始---
一、認識小程序
1.1 小程序介紹
微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。
1.2 小程序與普通網頁開發的區別
小程序的主要開發語言是 JavaScript ，小程序的開發同普通的網頁開發相比有很大的相似性。對於前端開發者而言，從網頁開發遷移到小程序的開發成本並不高，但是二者還是有些許區別的。
網頁開發渲染線程和腳本線程是互斥的，這也是為什么長時間的腳本運行可能會導致頁面失去響應，而在小程序中，二者是分開的，分別運行在不同的線程中。網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API，進行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，並沒有一個完整瀏覽器對象，因而缺少相關的DOM API和BOM API。這一區別導致了前端開發非常熟悉的一些庫，例如 jQuery、 Zepto 等，在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同，所以一些 NPM 的包在小程序中也是無法運行的。
網頁開發者需要面對的環境是各式各樣的瀏覽器，PC 端需要面對 IE、Chrome、QQ瀏覽器等，在移動端需要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。而小程序開發過程中需要面對的是兩大操作系統 iOS 和 Android 的微信客戶端，以及用於輔助開發的小程序開發者工具，小程序中三大運行環境也是有所區別的，如表1-1所示。
表1-1 小程序的運行環境
| 運行環境 | 邏輯層 | 渲染層 |
|---|---|---|
| iOS | JavaScriptCore | WKWebView |
| 安卓 | V8 | chromium定制內核 |
| 小程序開發者工具 | NWJS | Chrome WebView |
二、環境搭建
2.1 開發工具下載
前往 開發者工具下載頁面 ，根據自己的操作系統下載對應的安裝包進行安裝，有關開發者工具更詳細的介紹可以查看 《開發者工具介紹》 。
按指示安裝成功后導入或者新建如圖所示
2.2 小程序項目框架
2.2.1 .json 后綴的 JSON 配置文件
JSON 是一種數據格式，並不是編程語言，在小程序中，JSON扮演的靜態配置的角色。 我們可以看到在項目的根目錄有一個 app.json 和 project.config.json，此外在 page/logs 目錄下還有一個 logs.json，我們依次來說明一下它們的用途。
2.2.2 .wxml 后綴的 WXML 模板文件
從事過網頁編程的人知道，網頁編程采用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。同樣道理，在小程序中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。
2.2.3 .wxss 后綴的 WXSS 樣式文件
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴充和修改。
新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機設備的屏幕會有不同的寬度和設備像素比，采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程序底層來換算即可，由於換算采用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全局樣式，會作用於當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
此外 WXSS 僅支持部分 CSS 選擇器
2.2.4 .js 后綴的 JS 腳本邏輯文件
一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫 JS 腳本文件來處理用戶的操作。
2.3 小程序的運行環境
小程序的運行環境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。
小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層采用JsCore線程運行JS腳本。一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經由微信客戶端（下文中也會采用Native來代指微信客戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通信模型下圖所示。
