微信小程序開發指南介紹

1、小程序介紹與開發環境：

一、helloworld代碼 【1】請前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信開發者工具下載頁面根據本身的操做系統下載對應的安裝包進行安裝。 【2】打開微信開發者工具，選擇新建小程序項目，咱們先不需理解AppID的概念，新建項目時選擇無AppID，並取消勾選「創建普通快速啓動模板」的選項。

二、小程序介紹 【1】小程序技術發展歷史 【2】小程序與普通網頁開發的區別

三、小程序的特點 小程序的模式使得微信能夠開放更多的數據，開發者能夠獲取到用戶的一些基本信息，甚至可以獲取微信羣的一些信息，使得小程序的開放能力變得更增強大。

四、小程序的開發準備 【1】申請AppID： mp.weixin.qq.com/  【2】 安裝開發者工具 【3】 編寫代碼

五、總結 簡單介紹了小程序是什麼，小程序的技術發展歷史以及開發小程序以前須要作的準備工做。

2、小程序代碼組成：

一、JSON配置 【1】 打開例子，查看代碼 【2】 json語法 【3】 json數據格式：數字，字符串，布爾，數組，對象，Null 注意：JSON 文件中沒法使用註釋，試圖添加註釋將會引起報錯。

二、WXML模板 【1】 簡介 WXML 文件後綴名是 .wxml ，打開 pages/wxml/index.wxml 文件，有過 HTML 的開發經驗的讀者應該會很熟悉這種代碼的書寫方式，簡單的 WXML語句在語法上同 HTML 很是類似。 【2】 數據綁定 數據綁定正確的寫法

【3】邏輯語法 { name: 'world' }

【4】條件邏輯 if單個分支

if多個分支

【5】列表渲染 array是一個數組

【6】模板

【7】引用 WXML 提供兩種文件引用方式import和include。 《1》import 能夠在該文件中使用目標文件定義的 template。須要注意的是 import 有做用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件中 import 的 template，簡言之就是 import 不具備遞歸的特性。 《2》include 能夠將目標文件中除了template外的整個代碼引入，至關因而拷貝到 include位置。 【8】共同屬性 id：組件的惟一標識 class：組件的樣式類 style：組件的內聯樣式 hidden：組件是否顯示 data-：自定義屬性 bind/catch*：組件的事件

三、WXSS樣式 【1】簡介 WXSS（WeiXin Style Sheets）是一套用於小程序的樣式語言，用於描述WXML的組件樣式，也就是視覺上的效果。 【2】文件組成 other.wxss(其它樣式)：其它樣式能夠被項目公共樣式和頁面樣式引用 index.wxss(頁面樣式)：與app.json註冊過的頁面同名且位置同級的WXSS文件 app.wxss(項目公共樣式)：根目錄中的app.wxss爲項目公共樣式，它會被注入到小程序的每一個頁面 【3】尺寸單位 rpx：responsive pixel(尺寸單位) 公式是： iPhone 5：1rpx = 320 / 750 px = 0.42px iPhone 6：1rpx = 375 / 750 px = 0.5px iPhone 6 Plus：1rpx = 414 / 750 px = 0.552px 【4】WXSS引用 @import './test_0.wxss' 這種方法在請求上不會把test_0.css合併到index.css中，也就是請求index.css的時候，會多一個test_0.css的請求。WXSS最終會被編譯打包到目標文件中，用戶只須要下載一次，在使用過程當中不會由於樣式的引用而產生多餘的文件請求。 【5】內聯樣式 <!—靜態內聯樣式-->

<!—動態內聯樣式--> { eleColor: 'red', eleFontsize: '48rpx' }

【6】選擇器 權重越高越優先。在優先級相同的狀況下，後設置的樣式優先級高於先設置的樣式。 id選擇器：#id 類選擇器：.class 元素選擇器：element 僞元素選擇器：::after 僞元素選擇器：::before 【7】官方樣式庫 爲了減輕開發者樣式開發的工做量，咱們提供了WeUI.wxss基礎樣式庫。WeUI是一套與微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

四、Javascript腳本 【1】 ECMAScript介紹： ECMAScript是一種由Ecma國際經過ECMA-262標準化的腳本程序設計語言， JavaScript 是 ECMAScript 的一種實現。  ECMAScript語言的重要組成部分：語法、類型、語句、關鍵字、操做符、對象 瀏覽器中JavaScript 構成：ECMAScript、BOM(瀏覽器對象模型)、DOM(文檔對象模型) NodeJS中JavaScript 構成：ECMAScript、NPM(包管理系統)、Native(模塊) 小程序中JavaScript 構成：ECMAScript、小程序框架、小程序API 【2】 小程序的執行環境： 《1》iOS平臺，包括iOS九、iOS十、iOS11 《2》Android平臺 《3》小程序IDE 【3】 模塊化： 瀏覽器中，全部 JavaScript 是在運行在同一個做用域下的，定義的參數或者方法能夠被後續加載的腳本訪問或者改寫。同瀏覽器不一樣，小程序中能夠將任何一個JavaScript 文件做爲一個模塊，經過module.exports 或者 exports 對外暴露接口。 【4】 腳本執行的順序： 瀏覽器中，腳本嚴格按照加載的順序執行。而在小程序中的腳本執行順序有所不一樣。小程序的執行的入口文件是 app.js 。而且會根據其中 require 的模塊順序決定文件的運行順序， 【5】 做用域： 同瀏覽器中運行的腳本文件有所不一樣，小程序的腳本的做用域同 NodeJS 更爲類似。在文件中聲明的變量和函數只在該文件中有效，不一樣的文件中能夠聲明相同名字的變量和函數，不會互相影響。

五、總結 介紹了小程序裏的代碼文件構成，以及他們所扮演的角色。

3、理解小程序宿主環境：

一、簡介 小程序能夠調用宿主環境提供的微信客戶端的能力，這就使得小程序比普通網頁擁有更多的能力。你也會了解到，你的小程序會運行在不一樣版本的宿主環境下，所以針對各個版本的宿主環境作程序上的兼容也是在所不免的。

二、渲染層和邏輯層 《1》渲染層 渲染層和數據相關。 邏輯層負責產生、處理數據。 邏輯層經過 Page 實例的 setData 方法傳遞數據到渲染層。

三、通訊模型 小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層採用JsCore線程運行JS腳本。一個小程序存在多個界面，因此渲染層存在多個WebView線程，這兩個線程的通訊會經由微信客戶端（下文中也會採用Native來代指微信客戶端）作中轉，邏輯層發送網絡請求也經由Native轉發。

四、數據驅動 在開發UI界面過程當中，程序須要維護不少變量狀態，同時要操做對應的UI元素。隨着界面愈來愈複雜，咱們須要維護不少變量狀態，同時要處理不少界面上的交互事件，整個程序變得愈來愈複雜。一般界面視圖和變量狀態是相關聯的，若是有某種「方法」可讓狀態和視圖綁定在一塊兒（狀態變動時，視圖也能自動變動），那咱們就能夠省去手動修改視圖的工做。

五、雙線程下的界面渲染 小程序的邏輯層和渲染層是分開的兩個線程。在渲染層，宿主環境會把WXML轉化成對應的JS對象，在邏輯層發生數據變動的時候，咱們須要經過宿主環境提供的setData方法把數據從邏輯層傳遞到渲染層，再通過對比先後差別，把差別應用在原來的Dom樹上，渲染出正確的UI界面

六、程序和頁面 【1】程序：「小程序」指的是產品層面的程序，而「程序」指的是代碼層面的程序實例 《1》程序構造器App() 宿主環境提供了 App() 構造器用來註冊一個程序App，須要留意的是App() 構造器必須寫在項目根目錄的app.js裏，App實例是單例對象，在其餘JS腳本中可使用宿主環境提供的 getApp() 來獲取程序實例。 App實例的生命週期函數：onLaunch / onShow / onHide / onError 《2》程序的生命週期和打開場景 初次進入小程序的時候，微信客戶端初始化好宿主環境，同時從網絡下載或者從本地緩存中拿到小程序的代碼包，把它注入到宿主環境，初始化完畢後，微信客戶端就會給App實例派發onLaunch事件，App構造器參數所定義的onLaunch方法會被調用。 《3》小程序全局數據 在上文中說道App實例是單例的，所以不一樣頁面直接能夠經過App實例下的屬性來共享數據。App構造器能夠傳遞其餘參數做爲全局屬性以達到全局共享數據的目的。

【2】頁面：一個小程序能夠有不少頁面，每一個頁面承載不一樣的功能，頁面之間能夠互相跳轉。 《1》文件構成和路徑 一個頁面是分三部分組成：界面、配置和邏輯。界面由WXML文件和WXSS文件來負責描述，配置由JSON文件進行描述，頁面邏輯則是由JS腳本文件負責。 《2》頁面構造器Page() 宿主環境提供了 Page() 構造器用來註冊一個小程序頁面，Page()在頁面腳本page.js中調用。 Page實例的生命週期函數：onLoad / onReady / onShow / onHide /onUnload 頁面的用戶行爲函數：onPullDownRefresh / onReachBottom / onShareAppMessage / onPageScroll 《3》頁面的生命週期和打開參數 頁面初次加載的時候，微信客戶端就會給Page實例派發onLoad事件，頁面顯示以後，Page構造器參數所定義的onShow方法會被調用, 在頁面初次渲染完成時，Page構造器參數所定義的onReady方法會被調用。 《4》頁面的數據 小程序的頁面結構由WXML進行描述，WXML能夠經過數據綁定的語法綁定從邏輯層傳遞過來的數據字段，這裏所說的數據其實就是來自於頁面Page構造器的data字段，data參數是頁面第一次渲染時從邏輯層傳遞到渲染層的數據。 《5》頁面的用戶行爲 下拉刷新 onPullDownRefresh 上拉觸底 onReachBottom 頁面滾動 onPageScroll 用戶轉發 onShareAppMessage 《6》頁面跳轉和路由 一個小程序擁有多個頁面，咱們能夠經過wx.navigateTo推入一個新的頁面。 打開新頁面 調用：API wx.navigateTo 頁面重定向 調用：API wx.redirectTo 頁面返回 調用：API wx.navigateBack Tab：切換 調用 API wx.switchTab 重啓動：調用 API wx.reLaunch

七、組件 一個小程序頁面能夠分解成多個部分組成，組件就是小程序頁面的基本組成單元。爲了讓開發者能夠快速進行開發，小程序的宿主環境提供了一系列基礎組件。組件是在WXML模板文件聲明中使用的，WXML的語法和HTML語法類似，小程序使用標籤名來引用一個組件，一般包含開始標籤和結束標籤，該標籤的屬性用來描述該組件。

八、API 宿主環境提供了豐富的API，能夠很方便調起微信提供的能力。 通常調用的約定：

1. wx.on* 開頭的 API 是監聽某個事件發生的API接口，接受一個 Callback 函數做爲參數。當該事件觸發時，會調用 Callback 函數。
2. 如未特殊約定，多數 API 接口爲異步接口 ，都接受一個Object做爲參數。
3. API的Object參數通常由success、fail、complete三個回調來接收接口調用結果，示例代碼如代碼清單3-17所示，詳細說明如表3-9所示。
4. wx.get* 開頭的API是獲取宿主環境數據的接口。
5. wx.set* 開頭的API是寫入數據到宿主環境的接口。 【6】事件 《1》事件簡介 在小程序裏邊，咱們把這種「用戶在渲染層的行爲反饋」以及「組件的部分狀態反饋」抽象爲渲染層傳遞給邏輯層的「事件」。

《2》事件類型和事件對象

《3》事件綁定與冒泡捕獲 事件綁定的寫法和組件屬性一致，以key="value"的形式：

1. key以bind或者catch開頭，而後跟上事件的類型，如bindtap、catchtouchstart。
2. bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

九、兼容 小程序的宿主環境一直在迭代更新，提供更多的能力給開發者去完成更多的事情，因此你的小程序會運行在不一樣版本的宿主環境下。爲了讓你的小程序在不一樣環境下都能提供相應的服務，咱們須要來了解一下在小程序中如何實現兼容辦法。

十、總結 介紹了小程序宿主環境的基本運行機制以及它所提供的各類能力，組合這些能力能夠完成一個體驗很是流暢的小程序，同時讀者也瞭解到如何對小程序在不一樣環境下兼容的辦法，以便給不一樣環境下的的微信用戶提供可靠或者降級的服務。

4、場景應用：

一、開發流程基本介紹 在啓動開發前，首先咱們對整個小程序總體的產品體驗有一個清晰的規劃和定義，通常會經過交互圖或者手稿描繪小程序的界面交互和界面之間的跳轉關係。

二、基本的佈局方法-Flex佈局 【1】簡介 若是你的小程序要求兼容到iOS8如下版本，須要開啓樣式自動補全。開啓樣式自動補全，在「項目」—「項目設置」—勾選「上傳代碼時樣式自動補全」。 【2】基本概念 flex的概念最先是在2009年被提出，目的是提供一種更靈活的佈局模型，使容器能經過改變裏面項目的高寬、順序，來對可用空間實現最佳的填充，方便適配不一樣大小的內容區域。 【3】容器屬性 display屬性: flex; flex-direction屬性: row（默認值） | row-reverse | column |column-reverse flex-wrap:nowrap（默認值） | wrap | wrap-reverse justify-content屬性: flex-start（默認值） | flex-end | center |space-between | space-around | space-evenly align-items屬性: stretch（默認值） | center | flex-end | baseline | flex-start align-content屬性: stretch（默認值） | flex-start | center |flex-end | space-between | space-around | space-evenly 【4】項目屬性 order屬性: 0（默認值） | flex-shrink屬性: 1（默認值） | flex-grow屬性: 0（默認值） | flex-basis屬性: auto（默認值） | flex屬性: none | auto | @flex-grow @flex-shrink @flex-basis align-self屬性: auto（默認值） | flex-start | flex-end |center | baseline| stretch

三、界面的常見交互反饋 【1】觸摸反饋 一般頁面會擺放一些button按鈕或者view區域，用戶觸摸按鈕以後會觸發下一步的操做。 【2】Toast和模態對話框 在完成某個操做成功以後，咱們但願告訴用戶此次操做成功而且不打斷用戶接下來的操做。彈出式提示Toast就是用在這樣的場景上，Toast提示默認1.5秒後自動消失。 【3】界面滾動 每每手機屏幕是承載不了全部信息的，因此內容區域確定會超出屏幕區域，用戶能夠經過滑動屏幕來查看下一屏的內容，這是很是常見的界面滾動的交互。

四、發起HTTPS網絡通訊 【1】簡介 小程序常常須要往服務器傳遞數據或者從服務器拉取信息，這個時候可使用wx.request這個API，在這一節咱們會重點討論wx.request的使用和注意事項。 【2】wx.request接口 url：開發者服務器接口地址 data：請求的參數 header：設置請求的 header，header 中不能設置 Referer，默認header['content-type'] = 'application/json' method：（需大寫）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT dataType：回包的內容格式，若是設爲json，會嘗試對返回的數據作一次 JSON解析 success：收到開發者服務成功返回的回調函數，其參數是一個Object fail：接口調用失敗的回調函數 complete：接口調用結束的回調函數（調用成功、失敗都會執行） 【3】服務器接口 url參數是當前發起請求的服務器接口地址，小程序宿主環境要求request發起的網絡請求必須是https協議請求，所以開發者服務器必須提供HTTPS服務的接口，同時爲了保證小程序不亂用任意域名的服務，wx.request請求的域名須要在小程序管理平臺進行配置[2]，若是小程序正式版使用wx.request請求未配置的域名，在控制檯會有相應的報錯。 【4】請求參數 經過wx.request這個API，有兩種方法把數據傳遞到服務器：經過url上的參數以及經過data參數。舉個例子：咱們須要向服務器拿id爲1的用戶的信息，同時咱們把當前小程序的版本帶給服務器，讓服務器能夠作新舊版邏輯兼容。 【5】收到回包 經過wx.request發送請求後，服務器處理請求並返回HTTP包，小程序端收到回包後會觸發success回調，同時回調會帶上一個Object信息。 【6】通常使用技巧 《1》設置超時時間 小程序發出一個HTTPS網絡請求，有時網絡存在一些異常或者服務器存在問題，在通過一段時間後仍然沒有收到網絡回包，咱們把這一段等待的最長時間稱爲請求超時時間。小程序request默認超時時間是60秒，通常來講，咱們不須要這麼長的一個等待時間才收到回包，可能在等待3秒後還沒收到回包就須要給用戶一個明確的服務不可用的提示。 《2》請求先後的狀態處理 大部分場景多是這樣的，用戶點擊一個按鈕，界面出現「加載中...」的Loading界面，而後發送一個請求到後臺，後臺返回成功直接進入下一個業務邏輯處理，後臺返回失敗或者網絡異常等狀況則顯示一個「系統錯誤」的Toast，同時一開始的Loading界面會消失。 【7】排查異常的方法 《1》檢查手機網絡狀態以及wifi鏈接點是否工做正常。 《2》檢查小程序是否爲開發版或者體驗版，由於開發版和體驗版的小程序不會校驗域名。 《3》檢查對應請求的HTTPS證書是否有效，同時TLS的版本必須支持1.2及以上版本，能夠在開發者工具的console面板輸入showRequestInfo()查看相關信息。 《4》域名不要使用IP地址或者localhost，而且不能帶端口號，同時域名須要通過ICP備案。 《5》檢查app.json配置的超時時間配置是否過短，超時時間過短會致使還沒收到回報就觸發fail回調。 《6》檢查發出去的請求是否302到其餘域名的接口，這種302的狀況會被視爲請求別的域名接口致使沒法發起請求。

五、微信登陸 【1】獲取微信登陸憑證code 【2】發送code到開發者服務器 【3】到微信服務器換取微信用戶身份id 【4】綁定微信用戶身份id和業務用戶身份（openid:微信用戶的惟一標識,session_key:會話密鑰,unionid:用戶在微信開放平臺的惟一標識符） 【5】業務登陸憑證SessionId

六、本地數據緩存 【1】讀寫本地數據緩存 小程序提供了讀寫本地數據緩存的接口，經過wx.getStorage/wx.getStorageSync讀取本地緩存，經過wx.setStorage/wx.setStorageSync寫數據到緩存，其中Sync後綴的接口表示是同步接口[9]，執行完畢以後會立馬返回。 【2】緩存限制和隔離 小程序宿主環境會管理不一樣小程序的數據緩存，不一樣小程序的本地緩存空間是分開的，每一個小程序的緩存空間上限爲10MB，若是當前緩存已經達到10MB，再經過wx.setStorage寫入緩存會觸發fail回調。 【3】利用本地緩存提早渲染界面 討論一個需求：咱們要實現了一個購物商城的小程序，首頁是展現一堆商品的列表。通常的實現方法就是在頁面onLoad回調以後經過wx.request向服務器發起一個請求去拉取首頁的商品列表數據，等待wx.request的success回調以後把數據經過setData渲染到界面上。 【4】緩存用戶登陸態SessionId 處理用戶登陸態的通常方法，一般用戶在沒有主動退出登陸前，用戶的登陸態會一直保持一段時間[10]，就無需用戶頻繁地輸入帳號密碼。若是咱們把SessionId記錄在Javascript中某個內存變量，當用戶關閉小程序再進來小程序時，以前內存的SessionId已經丟失，此時咱們就須要利用本地緩存的能力來持久化存儲SessionId。

七、設備能力 【1】利用微信掃碼能力 爲了讓用戶減小輸入，咱們能夠把複雜的信息編碼成一個二維碼，利用宿主環境wx.scanCode這個API調起微信掃一掃，用戶掃碼以後，wx.scanCode的success回調會收到這個二維碼所對應的字符串信息。 【2】獲取網絡狀態 咱們知道手機鏈接到互聯網有幾種方式：Wifi、2G、3G、4G，包括很快到來的5G，每種方式的上傳速度和下載速度差別很大，它們的計費方式的差別也致使用戶在使用互聯網服務的時候有不一樣的使用習慣。

八、總結 學習了小程序開發中常常遇到的場景：利用Flex佈局來進行小程序界面佈局、常見的界面交互反饋、如何進行網絡通訊讓小程序和開發者服務器進行交互等，咱們就這些場景詳細介紹了相關的API的使用技巧和注意事項。

5、小程序的協同工做和發佈：

一、協同工做 【1】人員組織結構和權限分配 多數狀況下，一個團隊多人同時參與同一個小程序項目，每一個角色所承擔的工做或者權限不同，中大公司的分工更爲仔細。爲了更形象的表達團隊不一樣角色的關係以及權限的管理，咱們經過虛擬一個項目成員組織結構來描述平常如何協同合做完成一個小程序的發佈。 項目管理：產品組、設計組、開發組、測試組 工做流程：需求提出 —》 設計 —》 開發 —》 體驗 —》 測試 —》 發佈 【2】小程序的版本 通常的軟件開發流程，開發者編寫代碼自測開發版程序，直到程序達到一個穩定可體驗的狀態時，開發者會把這個體驗版本給到產品經理和測試人員進行體驗測試，最後修復完程序的Bug後發佈供外部用戶正式使用。 全部版本：開發版本、體驗版本、審覈中版本、線上版本

二、用戶體驗審視 【1】產品和運營思路 在運營行爲上，小程序須要聽從微信小程序運營規範。若開發者的小程序違反了其中的條款、相關平臺規則或法律法規，或對公衆平臺、開放平臺形成了影響，可能會被強制處罰。條款將根據新問題、相關法律法規或產品運營須要對其內容進行修改並更新，詳細條款請查閱小程序運營文檔。 【2】體驗和設計評估 9點基礎設計原則： 《1》導航清晰 《2》流程明確 《3》重點突出 《4》符合預期 《5》 等待與反饋 《6》 異常處理 《7》內容和文案准確友好 《8》和諧統一 《9》平臺適配

【3】用戶體驗測試和完善體驗 《1》用戶體驗測試，能夠在設計、開發、測試等所有階段使用。是一種低成本檢測設計質量的方法。 《2》儘早進行用戶體驗測試。在產品及設計過程當中，還沒有啓動開發時，即可以用低保真/高保真模型進行用戶體驗測試，以檢測設計質量。這樣更有利於及早發現問題並進行調整，減小開發成本。 《3》用戶測試以前須要肯定好須要被檢驗的流程和任務，須要爲用戶構建明確的目標，並提示用戶以完成任務的方式完成目標。 《4》最好選擇產品真實的受衆，做爲被測試的用戶。並在測試時，使用戶處於真實的場景和時間下。 《5》設計開放性的問題讓用戶回答。不用帶有主觀性的詢問語言，引導用戶回答。 《6》在用戶測試過程當中，須要全程作好記錄。

三、發佈 【1】發佈前最後的檢查 《1》若是小程序使用到Flex佈局，而且須要兼容iOS8如下系統時，請檢查上傳小程序包時，開發者工具是否已經開啓「上傳代碼時樣式自動補全」。 《2》小程序使用的服務器接口應該走HTTPS協議，而且對應的網絡域名確保已經在小程序管理平臺配置好。 《3》在測試階段不要打開小程序的調試模式進行測試，由於在調試模式下，微信不會校驗域名合法性，容易致使開發者誤覺得測試經過，致使正式版小程序由於遇到非法域名沒法正常工做。 《4》發佈前請檢查小程序使用到的網絡接口已經在現網部署好，而且評估好服務器的機器負載狀況。

【2】發佈模式 小程序提供了兩種發佈模式：全量發佈和分階段發佈。 《1》全量發佈是指當點擊發布以後，全部用戶訪問小程序時都會使用當前最新的發佈版本。 《2》分階段發佈是指分不一樣時間段來控制部分用戶使用最新的發佈版本，分階段發佈咱們也稱爲灰度發佈。

【3】小程序碼 小程序碼在樣式上更具辨識度和視覺衝擊力，相對於二維碼來講，小程序主題的品牌形象更加清晰明顯，能夠幫助開發者更好地推廣小程序。在發佈小程序以後，小程序管理平臺會提供對應的小程序碼的預覽和下載，開發者能夠自行下載用於線上和線下的小程序服務推廣。

四、運營 【1】數據分析 《1》常規分析 小程序數據分析，是面向小程序開發者、運營者的數據分析工具，提供關鍵指標統計、實時訪問監控、自定義分析等，幫助小程序產品迭代優化和運營。主要功能包括每日例行統計的標準分析，以及知足用戶個性化需求的自定義分析。 《2》自定義分析 除了小程序宿主環境提供的數據分析能力，爲了讓開發者能夠更加靈活多維和近實時的用戶行爲分析，小程序平臺提供了自定義上報的特性，開發者能夠對用戶在小程序內的行爲作精細化跟蹤，知足頁面訪問等標準統計之外的個性化分析需求。

【2】運維中心 咱們的程序變動總會伴隨一些Bug產生，小程序的邏輯代碼由JavaScript腳本編寫，JavaScript能夠經過一些方法[7]來檢測運行時異常的發生，小程序宿主環境已經內置了異常檢測的模塊，而且上報到小程序平臺，開發者能夠經過小程序平臺的「運維中心」查看具體的錯誤日誌，開發者根據日誌詳細定位本身代碼的異常處並及時修復。

【3】微信開發者社區 小程序的宿主環境和微信客戶端持續在迭代變動，避免不了變動的同時引發一些Bug致使小程序沒法正常工做，因此微信官方提供了微信開發者社區[8]，開發者能夠在社區上進行提問或者查看問題進展，小程序官方會在社區第一時間同步各類Bug的解決辦法。因爲小程序官方的人力有限，因此咱們鼓勵開發者在社區上互助答疑，提升效率。

通常提問反饋Bug時須要的信息： 《1》一個清晰的問題標題，直接簡潔的描述問題的核心點，能夠有效的讓回答者在問題列表中更快的理解你的難處。 《2》Bug的類型歸屬，例如是開發者工具出現的問題，仍是小程序API出現的問題，開發者要描述清楚。 《3》Bug發生的環境是什麼？是在微信客戶端的iOS端仍是安卓端，對應的微信版本是多少，宿主環境的版本是多少？ 《4》Bug詳細的描述，開發者應該清晰地描述Bug的具體表現，產生Bug的具體途徑，而且給出本身指望的結果，以便回答者能夠驗證是否能解決此問題。 《5》給出一個最簡單可以復現問題的代碼可以讓回答者更快的定位問題所在。

五、總結 闡述了軟件項目的各個角色的合做流程，羅列了小程序提供的角色權限管理，讓項目管理者能夠更便捷地管理團隊成員。同時爲了配合項目開展的各個流程，小程序提供了不一樣的版本，開發者要合理運用不一樣版本的特色來進行開發、測試、體驗等工做。咱們還給了一些用戶體驗審視的原則，開發者能夠在發佈小程序以前認真審視本身的小程序體驗，以達到更高的用戶水準。最後咱們提到發佈時能夠利用小程序平臺提供的兩種模式進行發佈，開發者根據業務狀況選擇合理的模式進行發佈，而且利用小程序平臺提供的數據分析服務來幫助運營本身的小程序，讓用戶可使用一個穩定可靠的小程序服務。

6、底層框架：

一、雙線程模型 【1】技術上選型 《1》用純客戶端原生技術來渲染 《2》用純 Web 技術來渲染 《3》用客戶端原生技術與 Web 技術結合的混合技術（下稱 Hybrid 技術）來渲染 【2】管控與安全 【3】天生的延時

二、組件系統 【1】Exparser框架 Exparser的主要特色包括如下幾點： 《1》基於Shadow DOM模型：模型上與WebComponents的ShadowDOM高度類似，但不依賴瀏覽器的原生支持，也沒有其餘依賴庫；實現時，還針對性地增長了其餘API以支持小程序組件編程。 《2》可在純JS環境中運行：這意味着邏輯層也具備必定的組件樹組織能力。 《3》高效輕量：性能表現好，在組件實例極多的環境下表現尤爲優異，同時代碼尺寸也較小。

【2】內置組件 基於Exparser框架，內置了一套組件，提供了視圖容器類、表單類、導航類、媒體類、開放類等幾十種組件。有了這麼豐富的組件，再配合WXSS，咱們能夠搭建出任何效果的界面。在功能層面上，也知足絕大部分需求。

【3】自定義組件 《1》ShadowTree的概念 在Exparser的組件模型中，這兩個節點樹能夠被拼接成上方的頁面節點樹。其中，組件的節點樹稱爲「ShadowTree」，即組件內部的實現；最終拼接成的頁面節點樹被稱爲「Composed Tree」，即將頁面全部組件節點樹合成以後的樹。在進行了這樣的組件分離以後，整個頁面節點樹實質上被拆分紅了若干個ShadowTree（頁面的body實質上也是一個組件，於是也是一個ShadowTree）。 《2》運行原理 在使用自定義組件的小程序頁面中，Exparser將接管全部的自定義組件註冊與實例化。 組件建立的過程大體有如下幾個要點： 《1》根據組件註冊信息，從組件原型上建立出組件節點的JS對象，即組件的this； 《2》將組件註冊信息中的data 複製一份，做爲組件數據，即this.data； 《3》將這份數據結合組件WXML，據此建立出Shadow Tree，因爲Shadow Tree中可能引用有其餘組件，於是這會遞歸觸發其餘組件建立過程； 《4》將ShadowTree拼接到Composed Tree上，並生成一些緩存數據用於優化組件更新性能； 《5》觸發組件的created生命週期函數； 《6》若是不是頁面根組件，須要根據組件節點上的屬性定義，來設置組件的屬性值； 《7》 當組件實例被展現在頁面上時，觸發組件的attached 生命週期函數，若是Shadw Tree中有其餘組件，也逐個觸發它們的生命週期函數。 《3》組件間通訊 不一樣組件實例間的通訊有WXML屬性值傳遞、事件系統、selectComponent和relations等方式。其中，WXML屬性值傳遞是從父組件向子組件的基本通訊方式，而事件系統是從子組件向父組件的基本通訊方式。

三、原生組件 【1】原生組件運行機制 渲染的幾個步聚： 《1》組件被建立，包括組件屬性會依次賦值。 《2》組件被插入到DOM樹裏，瀏覽器內核會當即計算佈局，此時咱們能夠讀取出組件相對頁面的位置（x, y座標）、寬高。 《3》組件通知客戶端，客戶端在相同的位置上，根據寬高插入一塊原生區域，以後客戶端就在這塊區域渲染界面。 《4》當位置或寬高發生變化時，組件會通知客戶端作相應的調整。

【2】原生組件渲染機制 原生組件脫離在WebView渲染流程外，這帶來了一些限制。最主要的限制是一些CSS樣式沒法應用於原生組件，例如，不能在父級節點使用overflow:hidden來裁剪原生組件的顯示區域；不能使用transformrotate讓原生組件產生旋轉等。

四、小程序與客戶端通訊原理 【1】視圖層組件 內置組件中有部分組件是利用到客戶端原生提供的能力，這類組件基本都是前一個章節描述的原生組件。既然須要客戶端原生提供的能力，那就會涉及到視圖層與客戶端的交互通訊。

【2】邏輯層接口 邏輯層與客戶端原生通訊機制與渲染層相似，不一樣在於，iOS平臺能夠往JavaScripCore框架注入一個全局的原生方法，而安卓方面則是跟渲染層一致的。

五、總結 介紹了小程序底層框架的設計和原理，提出了一個全新的雙線程模型，這是小程序框架與業界大多數前端Web框架不一樣之處。基於這個模型，咱們能夠作到更好地管控以及提供更安全的環境。但同時帶來了無處不在的異步問題，不過咱們在框架層面去封裝好異步帶來的時序問題，讓開發者只須要懂得上層更易爲理解的接口。此外，咱們也介紹了基於雙線程模型的組件框架，以及原生組件的機制，讓開發者進一步理解以寫出更合理的代碼。最後，咱們也闡述了小程序是如何與客戶端通訊的，這是小程序運行起來的最基本的原理。

六、其它框架 【1】PhoneGap 是一個採用HTML，CSS和JavaScript的技術，建立移動跨平臺移動應用程序的框架 【2】ReactNative 是一個 JavaScript 框架，用來編寫原生的 iOS 和 Android 應用 【3】微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包

7、性能優化：

一、啓動： 下載小程序代碼包 —》 加載小程序代碼包 —》 初始化小程序首頁 【1】代碼包下載 在某個小程序第一次啓動時，微信須要下載小程序代碼包。此後，若是小程序代碼包未更新且還被保留在緩存中，則下載小程序代碼包的步驟會被跳過。下載到的小程序代碼包不是小程序的源代碼，而是編譯、壓縮、打包以後的代碼包。 控制代碼包大小的方法： 《1》精簡代碼，去掉沒必要要的WXML結構和未使用的WXSS定義。 《2》減小在代碼包中直接嵌入的資源文件。 《3》壓縮圖片，使用適當的圖片格式。

【2】分包加載流程 小程序的代碼將打包在一塊兒，在小程序啓動時一次性下載完成。採用分包時，小程序的代碼包能夠被劃分爲幾個：一個是「主包」，包含小程序啓動時會立刻打開的頁面代碼和相關資源；其他是「分包」，包含其他的代碼和資源。 【3】代碼包加載 微信會在小程序啓動前爲小程序準備好通用的運行環境。這個運行環境包括幾個供小程序使用的線程，並在其中完成小程序基礎庫的初始化，預先執行通用邏輯，儘量作好小程序的啓動準備。這樣能夠顯著減小小程序的啓動時間。

二、頁面層級準備 在視圖層內，小程序的每個頁面都獨立運行在一個頁面層級上。小程序啓動時僅有一個頁面層級，每次調用wx.navigateTo，都會建立一個新的頁面層級；相對地，wx.navigateBack會銷燬一個頁面層級。 頁面層級的準備工做分爲三個階段： 第一階段是啓動一個WebView，在iOS和Android系統上，操做系統啓動WebView都須要一小段時間。 第二階段是在WebView中初始化基礎庫，此時還會進行一些基礎庫內部優化，以提高頁面渲染性能。 第三階段是注入小程序WXML結構和WXSS樣式，使小程序能在接收到頁面初始數據以後立刻開始渲染頁面（這一階段沒法在小程序啓動前執行）。

三、數據通訊 【1】頁面初始數據通訊 【2】更新數據通訊 《1》執行setData調用時，最好遵循如下原則： 不要過於頻繁調用setData，應考慮將屢次setData合併成一次setData調用； 《2》數據通訊的性能與數據量正相關，於是若是有一些數據字段不在界面中展現且數據結構比較複雜或包含長字符串，則不該使用setData來設置這些數據； 《3》與界面渲染無關的數據最好不要設置在data中，能夠考慮設置在page對象的其餘字段下。 【3】用戶事件通訊

四、視圖層渲染 【1】初始渲染 初始渲染髮生在頁面剛剛建立時。初始渲染時，將初始數據套用在對應的WXML片斷上生成節點樹。節點樹也就是在開發者工具WXML面板中看到的頁面樹結構，它包含頁面內全部組件節點的名稱、屬性值和事件回調函數等信息。最後根據節點樹包含的各個節點，在界面上依次建立出各個組件。 【2】重渲染 初始渲染完畢後，視圖層能夠屢次應用setData的數據。每次應用setData數據時，都會執行重渲染來更新界面。每次重渲染時，將data和setData數據套用在WXML片斷上，獲得一個新節點樹。而後將新節點樹與當前節點樹進行比較，這樣能夠獲得哪些節點的哪些屬性須要更新、哪些節點須要添加或移除。最後，將setData數據合併到data中，並用新節點樹替換舊節點樹，用於下一次重渲染。

五、原生組件通訊

六、總結 介紹了小程序的運行流程和一些重要細節，還介紹了進行優化的基本方法。主要的優化策略能夠概括爲三點：精簡代碼，下降WXML結構和JS代碼的複雜性；合理使用setData調用，減小setData次數和數據量；必要時使用分包優化。

8、小程序基礎庫的更新迭代：

一、小程序基礎庫 【1】基礎庫載入時機 咱們在開發網頁時，常常會引用不少開源的JS庫，在使用到這些庫所提供的API前，咱們須要先在業務代碼前邊引入這些庫。好比咱們在使用jQuery庫的$函數前，須要在業務代碼前用script標籤先引入jQuery.js。

【2】基礎庫的版本號 小程序基礎庫版本號使用 semver 規範，格式爲 Major.Minor.Patch，其中Major、Minor、Patch均爲整數，1.9.90一、2.44.32二、10.32.44 都是符合 semver 風格的版本號。一般咱們月度發佈版本會把Minor提高一位，例如從1.9.x升級到1.10.x，若是是修正版本，會把Patch提高一位，例如1.10.0升級到 1.10.1。Major位則是重大特性發布時纔會被提高一位。

二、異常 【1】JS運行異常 【2】捕捉JS異常的方法 在WebView層有兩種方法能夠捕捉JS異常： 《1》try, catch方案。你能夠針對某個代碼塊使用try,catch包裝，這個代碼塊運行時出錯時能在catch塊裏邊捕捉到。 《2》. window.onerror方案。也能夠經過window.addEventListener("error", function(evt){})，這個方法能捕捉到語法錯誤跟運行時錯誤，同時還能知道出錯的信息，以及出錯的文件，行號，列號。

三、基礎庫的更新 【1】基礎庫版本變更 【2】推送基礎庫

四、總結 介紹瞭如何進行小程序平常能力的迭代發佈，在發佈新版本基礎庫的過程，咱們須要有檢測異常現象的能力，避免故障的發生。正是這樣嚴格的迭代流程使得小程序框架可以穩定運行在各個版本的微信客戶端中，同時這種小步快跑的迭代速度讓開發者可使用新能力去完善他們的小程序交互。

9、微信開發者工具： 一、簡介 微信開發者工具是一個基於nw.js ，使用node.js、chromium以及系統API來實現底層模塊，使用React、Redux等前端技術框架來搭建用戶交互層，實現同一套代碼跨Mac和Windows 平臺使用。 開發者能夠藉助微信開發者工具完成小程序的代碼開發、編譯運行、界面和邏輯調試、真機預覽和提交發布版本等功能。

二、代碼編譯 【1】編譯WXML WXML（WeiXin Markup Language）是小程序框架設計的一套標籤語言，用於構建出頁面的結構。小程序的渲染層的運行環境是一個WebView，而WebView沒法直接理解WXML標籤，因此須要通過編譯。 【2】編譯WXSS WXSS (WeiXin Style Sheets) 是一套樣式語言，用來決定 WXML 的組件應該怎麼顯示。爲了適應廣大的前端開發者，WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。與 CSS 相比，WXSS 擴展的一些特性，包括rpx尺寸單位和樣式導入語法，這些特性都是WebView沒法直接理解的。 【3】編譯JavaScript 微信客戶端在運行小程序的邏輯層的時候只須要加載一個JS文件（咱們稱爲app-service.js），而小程序框架容許開發者將 JavaScript 代碼寫在不一樣的文件中，因此在代碼上傳以前，微信開發者工具會對開發者的JS 文件作一些預處理，包括ES6轉ES5和代碼壓縮（開發者能夠選擇關閉預處理操做），在服務器編譯過程將每一個JS文件的內容分別包裹在define域中，再按必定的順序合併成 app-service.js 。

三、模擬器 【1】邏輯層模擬 在iOS微信客戶端上，小程序的JavaScript代碼是運行在JavaScriptCore中，在Android微信客戶端上，小程序的JavaScript代碼是經過 X5 JSCore來解析的。而在微信開發者工具上咱們採用了一個隱藏着的Webivew來模擬小程序的邏輯運行環境。 【2】渲染層模擬 微信開發者工具使用chrome的 標籤來加載渲染層頁面，每一個渲染層WebView加載。 【3】客戶端模擬 微信客戶端爲豐富小程序的功能提供了大量的API。在微信開發者工具上，經過藉助BOM（瀏覽器對象模型）以及node.js訪問系統資源的能力，同時模擬客戶端的UI和交互流程，使得大部分的API可以正常執行。 【4】通信模擬 微信開發者工具的有一個消息中心底層模塊維持着一個WebSocket服務器，小程序的邏輯層的WebView和渲染層頁面的WebView經過WebSocket與開發者工具底層創建長連，使用WebSocket的protocol字段來區分Socket的來源。

四、調試器 代碼調試是開發者工具的最主要的功能之一，包括界面調試和邏輯調試。nw.js對提供打開Chrome Devtools調試界面的接口，使得開發者工具具有對小程序的邏輯層和渲染層進行調試的能力。同時爲了方便調試小程序，開發者工具在Chrome Devtools的基礎上進行擴展和定製。

五、總結 經過編譯過程咱們將WXML文件和WXSS文件都處理成JS代碼，使用script標籤注入在一個空的html文件中（咱們稱爲：page-frame.html）；咱們將全部的JS文件編譯成一個單獨的app-service.js。 在小程序運行時，邏輯層使用JsCore直接加載app-service.js，渲染層使用WebView加載page-frame.html，在肯定頁面路徑以後，經過動態注入script的方式調用WXML文件和WXSS文件生成的對應頁面的JS代碼，在結合邏輯層的頁面數據，最終渲染出指定的頁面。 開發者工具使用一個隱藏着的標籤來模擬JSCore做爲小程序的邏輯層運行環境，經過將JSCore中不支持的BOM對象局部變量化，使得開發者沒法在小程序代碼中正常使用BOM，從而避免沒必要要的錯誤。 在開發者工具底層有一個HTTP服務器來處理來自WebView的請求，並將開發者代碼編譯處理後的結果做爲HTTP請求的返回，WebView按照普通的網頁進行渲染。 開發者工具利用BOM、node.js以及模擬的UI和交互流程實現對大部分客戶端API的支持。 同時開發者工具底層維護着一個WebSocket服務器，用於在WebView與開發者工具之間創建可靠的消息通信鏈路，使得接口調用，事件通知，數據交換可以正常進行，從而使小程序模擬器成爲一個統一的總體。 微信開發者工具使用webview.showDevTools 打開Chrome Devtools調試邏輯層WebView的JS代碼，同時開發了Chrome Devtools插件 WXML 面板對渲染層頁面WebView進行界面調試。WXML面板對渲染層WebView中真實的DOM樹作了一個最小樹算法的裁剪以後，呈現出與WXML源碼一致的節點樹列表。