微信小程序開發與實戰（微課版）

後端程序員需要快速學習一下小程序開發，翻了下這本書，以下是一些關鍵知識點： # 小程序開發與傳統網頁開發的區別： 1、在普通網頁中渲染線程和腳本線程是互斥的，而在小程序中二者不是互斥的。 2、普通網頁可以操作DOM和BOM對象，小程序無法操作DOM和BOM對象（因爲小程序的邏輯層運行在JSCore中），所以小程序在使用JS選擇UI時，就沒有父節點、子節點、ID選擇器這些概念了。 3、普通網頁需要適配各個瀏覽器，小程序需要考慮適配Windows或macOS環境的UI適配 # 小程序渲染機制知識點 1、基於雙線程模型（渲染層、邏輯層，分別在不同線程中運行），與傳統web的單線程模型有很大區別。 2、渲染層的界面使用web-view進行渲染，邏輯層採用JSCore線程運行JS腳本。（一個小程序存在多個頁面，所以渲染層會存在多個web-view線程） 3、雙線程通信是由微信客戶端(Native)做中轉，同時邏輯層發送網絡請求也經由Native轉發。 4、爲了最快加載出整個頁面，需要像 Web技術那樣，有一份隨時可更新的資源包放在雲端，動態渲染界面。 5、數據驅動原理：通過 JS對象來表達 DOM樹的結構（這棵 DOM樹實際上就是WXML結構。WXML可以先轉換成JS對象，再由JS對象渲染出真正的DOM樹） 6、總結：在渲染層中，小程序的宿主環境會把 WXML轉換成 JS對象，而 JS是運行在邏輯層的。當邏輯層的數據發生變化時，通過this.setData()方法把數據從邏輯層再傳遞到渲染層，經過對比前後的差異，把更改後的數據應用在原來的DOM樹上，以此實現UI界面的渲染 # 程序和頁面 1、小程序的宿主環境提供了 App()函數作爲程序的構造方法，以此來註冊一個程序的 App對象。構造方法App()需要聲明在小程序項目的根目錄下的app.js文件中，App實例也是一個單例對象，其構造方法接收一個對象參數，參數對象中可以聲明小程序全局生命週期函數。 2、單個小程序由多個頁面組成，每個頁面分別由界面、配置、邏輯這3個部分構成。 3、業務邏輯要寫到當前文件夾的page.js文件中，Page()方法也是要接收一個對象參數，參數對象的屬性中除了要聲明頁面的生命週期函數與上方保持一致外，還可以聲明事件方法和頁面的初始化數據data屬性 4、開發者不需要主動調用 Page()構造器中定義的生命週期方法，而是由微信客戶端根據監聽用戶的操作而主動觸發的，這樣就避免了程序調用上的混亂。 ## 小程序的內置組件 1、組件就是對應用視圖層的拆分，一個小程序的頁面也可以被拆分成多個組件，組件是小程序頁面的基本組成單元。 2、小程序的宿主環境提供了一系列的基礎組件（小程序的內置組件） 3、組件是在 WXML模板文件中聲明使用的（與 HTML語法相似），WXML模板文件遵循JSX(JavaScript XML)語法規範 4、組件標記的屬性主要包含樣式和事件綁定。也可以包括自定義的屬性 ## 小程序的API 1、小程序提供的API按照功能主要分爲幾大類：網絡、媒體、文件、數據緩存、位置、設備、界面、微信開放能力等 2、小程序API的約定 ● 小程序所有的API都必須掛載到名爲wx的全局對象下。 ● 用於監聽事件的API函數都是以wx.on* 開頭。 ● API的Object參數一般由success、fail、complete 3個回調函數來接收接口調用的結果。 ● 在API中凡是以wx.set*和wx.get*開頭的都是用於寫入數據和獲取數據的接口。 ● 如果沒有特殊說明，大部分的API函數都是異步函數，並且都接收一個Object作爲參數。 ## 小程序的事件處理 1、事件就是被控件所識別的操作 2、在小程序中，任何渲染層的行爲事件都需要向開發者反饋（可能是用戶主動觸發，也可能是組件狀態改變導致） 3、比如頁面按鈕點擊事件，事件通過組件上綁定的bindtap屬性觸發，同時在用於頁面構造的 Page()方法中聲明對應的onBtnClick()方法來處理對應的事件 # 小程序應用能力 ## CSS佈局 1、建議使用Flex彈性盒子佈局。Flex彈性盒子佈局提供了一種靈活的佈局模型（使容器能通過改變裏面項目的高寬、順序來對可用空間實現最佳的填充，以方便適配不同大小的內容區域） 2、Flex不單是一個屬性，它包含了一套新的屬性集。屬性集包括用於設置容器和用於設置項目兩個部分 ## 界面交互反饋 1、常用的界面交互行爲包括屏幕觸摸反饋、彈框提示、界面滾動等 2、除了這種設置區域不同的觸發樣式外，還有常用的用戶觸發反饋效果（例如button組件設置loading屬性，彈出 Toast提示框等效果） ## HTTPS網絡通信 1、小程序通過宿主環境提供的wx.request()函數發起網絡請求來實現從服務器拉取信息 2、小程序宿主環境要求request發起的網絡請求必須是HTTPS請求，因此開發者服務器必須提供HTTPS服務的接口。 3、小程序request默認超時時間是60s。小程序項目根目錄下的app.json中可以指定request的超時時間。 ## 本地數據緩存 1、小程序提供了讀寫本地數據緩存的接口，通過wx.getStorage/wx.getStorageSync讀取本地緩存，通過wx.setStorage/wx.setStorageSync寫數據到緩存，其中帶有Sync後綴的接口表示是同步接口，執行完畢會立馬返回 2、小程序的本地緩存不僅僅通過小程序這個維度來隔離空間，宿主環境還對不同用戶進行了緩存隔離，以避免用戶間的數據隱私泄露 ## 全局配置文件（app.json） 1、涵蓋了小程序的頁面路徑、窗口表現、底部tab欄、默認啓動頁、網絡超時時間等幾十項配置信息 2、pages屬性用於配置小程序的所有頁面路徑，指定哪些頁面可被顯示 3、window屬性用於配置小程序的窗口樣式與表現，配置項包含小程序的狀態欄、導航欄、標題、窗口背景顏色等 4、tabBar屬性用於配置小程序底部tab欄的樣式與表現 5、networkTimeout屬性用於設置各類網絡請求的超時時間 6、permission屬性用於設置小程序相關接口權限 7、usingComponents屬性用於全局聲明自定義組件 8、entryPagePath屬性用於配置小程序的默認啓動路徑，即小程序的默認首頁 ## 頁面配置文件 1、page.json就是當前頁面的配置文件，用於對當前頁面的窗口表現進行配置 2、page.json可以對當前頁面的導航欄、窗口背景、下拉刷新、上拉觸底、頁面自定義組件等表現能力進行配置。頁面的窗口配置在當前頁面會覆蓋app.json的window屬性中的相同配置項。 ## sitemap配置文件 1、通過sitemap.json配置文件來配置小程序頁面是否允許被微信索引

因爲想做小程序，所以我馬馬虎虎看了這本書，大概對微信小程序有個瞭解，其實不少東西跟官方文檔差不多，後續可能還要找些視頻跟着實際操作纔行。

因爲想要做一個移動端的報表，而想到了小程序，也是從零開始看的，其從小程序的發展史，框架結構，宿主環境，開發工具，文檔，模板渲染，mina框架，生命週期，內置容器，組件，生態API, 第三方組件集成，雲開發部署等，等都做了基礎的介紹，整個知識技能體系是完善的，個人很受用，後續想要深入哪個模塊就再細究一下即可。很適合像我這樣非專業選手。