微信小程序開發學習

---恢復內容開始---

1、認識小程序

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、環境搭建

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轉發，小程序的通訊模型下圖所示。