#微信小程序# 微信小程序-理論篇
-Start：關(guān)注本公眾號后，可直接聯(lián)系后臺獲取排版美化的詳細(xì)文檔！
-Hints：本篇文章所編纂的資料均來自網(wǎng)絡(luò)，特此感謝參與奉獻(xiàn)的有關(guān)人員。
微信小程序開發(fā)基礎(chǔ)
1 Html與 Html5
2 CSS
3 JavaScript
4 JQuery
5 Bootstrap
微信小程序設(shè)計規(guī)范
-友好禮貌
1 重點(diǎn)突出
2 流程明確
-清晰明確
1 導(dǎo)航明確
2 減少等待
3 異?？煽?/span>
-便捷優(yōu)雅
1減少輸入
2 避免誤操作
3 利用接口提升性能
-統(tǒng)一穩(wěn)定
不同頁面間的統(tǒng)一性和延續(xù)性，在不同的頁面盡量使用一致的控件和交互方式。統(tǒng)一的頁面體驗(yàn)和有延續(xù)性的界面元素都將幫助用最少的學(xué)習(xí)成本達(dá)成使用目標(biāo)，減輕頁面跳動所造成的不適感。
-視覺規(guī)范
1字體規(guī)范
字體類型、大小、顏色
2 列表視覺
3 表單視覺
4 按鈕視覺
5 圖標(biāo)使用
參考鏈接：
https://www.w3cschool.cn/weixinapp/weixinapp-design.html
微信小程序開發(fā)步驟
-微信小程序賬號申請
-小程序AppID獲取
-小程序開發(fā)工具部署
下載安裝
https://www.w3cschool.cn/weixinapp/weixinapp-download.html
-小程序項目初始結(jié)構(gòu)
1 pages 文件夾下有index 頁面和 logs 頁面，即歡迎頁和小程序啟動日志的展示頁
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。
Wxml:頁面結(jié)構(gòu)文件，模板文件
2 utils 存放js文件，支持公共函數(shù)
3 app.js是小程序的腳本代碼。監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量，調(diào)用微信原生 API、網(wǎng)絡(luò)超時時間、底部tab
4 app.json 是小程序的全局配置。配置小程序的頁面組成，窗口背景色，導(dǎo)航條樣式，默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。
5 app.wxss 是小程序的公共樣式表。頁面組件的 class 屬性可以直接使用 app.wxss 中聲明的樣式規(guī)則。
6 project.config.json 在工具上做的任何配置都會寫入到這個文件，當(dāng)你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發(fā)者工具就自動會幫你恢復(fù)到當(dāng)時你開發(fā)項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
7 sitemap.json 開發(fā)者可以通過sitemap.json 配置，或者管理后臺頁面收錄開關(guān)來配置其小程序頁面是否允許微信索引。當(dāng)開發(fā)者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的搜索詞條觸發(fā)該索引時，小程序的頁面將可能展示在搜索結(jié)果中。
參考鏈接：
https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
微信小程序運(yùn)行過程
-小程序宿主環(huán)境
微信客戶端給小程序所提供的環(huán)境為宿主環(huán)境。小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁無法完成的功能。
-渲染層和邏輯層
小程序的運(yùn)行環(huán)境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。
小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進(jìn)行渲染；邏輯層采用JsCore線程運(yùn)行JS腳本。一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經(jīng)由微信客戶端（下文中也會采用Native來代指微信客戶端）做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請求也經(jīng)由Native轉(zhuǎn)發(fā)
-小程序運(yùn)行流程
1 微信客戶端打開小程序之前：把整個小程序的代碼包下載到本地。
2 加載小程序的整體配置文件app.json:通過?app.json?的?pages?字段就可以知道你當(dāng)前小程序的所有頁面路徑.。寫在?pages?字段的第一個頁面就是這個小程序的首頁
3 加載首頁的相關(guān)文件，如配置文件json，模板文件wxml，樣式文件wxss,邏輯文件js
4 按照小程序的生命周期函數(shù)進(jìn)行運(yùn)行：onLaunch初始化小程序，onShow,小程序啟動后展示首頁
5 整個小程序只有一個 App 實(shí)例，是全部頁面共享的
6根據(jù)首頁操作，進(jìn)行次級頁面的跳轉(zhuǎn)。在生成次級頁面時，會根據(jù)?page.json?配置生成一個界面，緊接著裝載這個頁面的?WXML?結(jié)構(gòu)和?WXSS?樣式，最后客戶端會裝載?page.js
7 按照頁面的生命周期函數(shù)運(yùn)行：data:獲取頁面的原始數(shù)據(jù)，onLoad 頁面加載，onShow頁面顯示，onReady頁面渲染
8 多數(shù) API 的回調(diào)都是異步，需要處理好代碼邏輯的異步問題。
?
微信小程序配置文件
-1 sitemap索引配置
?sitemap.json?文件用來配置小程序及其頁面是否允許被微信索引。當(dāng)開發(fā)者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的搜索詞條觸發(fā)該索引時，小程序的頁面將可能展示在搜索結(jié)果中。爬蟲訪問小程序內(nèi)頁面時，會攜帶特定的 user-agent：mpcrawler?及場景值：1129。
-2 project.config.json開發(fā)配置
在工具上做的任何配置都會寫入到這個文件，當(dāng)你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發(fā)者工具就自動會幫你恢復(fù)到當(dāng)時你開發(fā)項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
-3 app.json 全局配置
對微信小程序進(jìn)行全局配置
-4 page.json 頁面配置
頁面中配置項在當(dāng)前頁面會覆蓋?app.json?的?window?中相同的配置項。
?
微信小程序運(yùn)行說明
-小程序運(yùn)行環(huán)境
-小程序的運(yùn)行平臺
iOS（iPhone/iPad）微信客戶端、Android 微信客戶端、PC 微信客戶端、Mac 微信客戶端和用于調(diào)試的微信開發(fā)者工具。
-JavaScript支持情況
基于安全考慮，小程序中不支持動態(tài)執(zhí)行 JS 代碼，即：
-不支持使用?eval?執(zhí)行 JS 代碼
-不支持使用?newFunction?創(chuàng)建函數(shù)
-小程序運(yùn)行機(jī)制
-前臺/后臺狀態(tài)
小程序啟動后，界面被展示給用戶，此時小程序處于前臺狀態(tài)。
當(dāng)用戶點(diǎn)擊右上角膠囊按鈕關(guān)閉小程序，或者按了設(shè)備 Home 鍵離開微信時，小程序并沒有完全終止運(yùn)行，而是進(jìn)入了后臺狀態(tài)，小程序還可以運(yùn)行一小段時間。
當(dāng)用戶再次進(jìn)入微信或再次打開小程序，小程序又會從后臺進(jìn)入前臺。但如果用戶很久沒有再進(jìn)入小程序，或者系統(tǒng)資源緊張，小程序可能被銷毀，即完全終止運(yùn)行。
-冷啟動與熱啟動
---冷啟動：如果用戶首次打開，或小程序銷毀后被用戶再次打開，此時小程序需要重新加載啟動，即冷啟動。
---熱啟動：如果用戶已經(jīng)打開過某小程序，然后在一定時間內(nèi)再次打開該小程序，此時小程序并未被銷毀，只是從后臺狀態(tài)進(jìn)入前臺狀態(tài)，這個過程就是熱啟動。
-小程序銷毀時機(jī)
通常，只有當(dāng)小程序進(jìn)入后臺一定時間，或者系統(tǒng)資源占用過高，才會被銷毀。
-啟動場景分類
A. 保留上次的瀏覽狀態(tài)。
B. relaunch 到指定頁或首頁
-退出狀態(tài)
每當(dāng)小程序可能被銷毀之前，頁面回調(diào)函數(shù)?onSaveExitState?會被調(diào)用。如果想保留頁面中的狀態(tài)，可以在這個回調(diào)函數(shù)中“保存”一些數(shù)據(jù)，下次啟動時可以通過?exitState?獲得這些已保存數(shù)據(jù)。
-小程序版本更新
-未啟動時更新
開發(fā)者在管理后臺發(fā)布新版本的小程序之后，如果某個用戶本地有小程序的歷史版本，此時打開的可能還是舊版本。微信客戶端會有若干個時機(jī)去檢查本地緩存的小程序有沒有更新版本，如果有則會靜默更新到新版本?？偟膩碚f，開發(fā)者在后臺發(fā)布新版本之后，無法立刻影響到所有現(xiàn)網(wǎng)用戶，但最差情況下，也在發(fā)布之后 24 小時之內(nèi)下發(fā)新版本信息到用戶。用戶下次打開時會先更新最新版本再打開。
-啟動時更新
小程序每次冷啟動時，都會檢查是否有更新版本，如果發(fā)現(xiàn)有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進(jìn)行啟動，即新版本的小程序需要等下一次冷啟動才會應(yīng)用上。
如果需要馬上應(yīng)用最新版本，可以使用?wx.getUpdateManager?API進(jìn)行處理。
?
微信小程序原生接口
框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。
說明：
wx.on開頭的API是監(jiān)聽某個事件發(fā)生的API接口，接受一個CALLBACK函數(shù)作為參數(shù)。當(dāng)該事件觸發(fā)時，會調(diào)用CALLBACK函數(shù)。
如未特殊約定，其他API接口都接受一個OBJECT作為參數(shù)。
OBJECT中可以指定success,fail,complete來接收接口調(diào)用結(jié)果。
參數(shù)名 | 類型 | 必填 | 說明 |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行） |
-原生接口的類型
網(wǎng)絡(luò)API、媒體API、文件API、數(shù)據(jù)API、位置API、設(shè)備API、界面API、WXML節(jié)點(diǎn)信息 API 列表、微信開發(fā)接口
詳細(xì)資料：https://www.w3cschool.cn/weixinapp/hpm41q8p.html
微信小程序重要概念
-小程序與普通網(wǎng)頁開發(fā)的區(qū)別
網(wǎng)頁開發(fā)渲染線程和腳本線程是互斥的，這也是為什么長時間的腳本運(yùn)行可能會導(dǎo)致頁面失去響應(yīng)，而在小程序中，二者是分開的，分別運(yùn)行在不同的線程中。網(wǎng)頁開發(fā)者可以使用到各種瀏覽器暴露出來的 DOM API，進(jìn)行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運(yùn)行在 JSCore 中，并沒有一個完整瀏覽器對象，因而缺少相關(guān)的 DOM API 和 BOM API。這一區(qū)別導(dǎo)致了前端開發(fā)非常熟悉的一些庫，例如 jQuery、 Zepto 等，在小程序中是無法運(yùn)行的。同時 JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同，所以一些 NPM 的包在小程序中也是無法運(yùn)行的。?
-Wxml與html的區(qū)別
1 html用到的標(biāo)簽是?div,?p,?span；wxml用到的標(biāo)簽是?view,?button,?text
2多了一些?wx:if?這樣的屬性以及?{{ }}?這樣的表達(dá)式在網(wǎng)頁的一般開發(fā)流程中。小程序開發(fā)采用MVVM模式，提倡把渲染和邏輯分離。WXML 是這么寫:
-TypeScript語言
TypeScript 是JavaScript 的超集，完全支持 JavaScript 語法，并且在 JavaScript 語法的基礎(chǔ)上增加了靜態(tài)類型變量和基于類的面向?qū)ο缶幊獭?/span>
TypeScript 與JavaScript 兩者的特性對比，主要表現(xiàn)為以下幾點(diǎn)。
--TypeScript 是一個應(yīng)用程序級的 JavaScript 開發(fā)語言。
??? --TypeScript是JavaScript 的超集，可以編譯成純JavaScript。
??? --TypeScript跨瀏覽器、跨操作系統(tǒng)、跨主機(jī)，且開源。
??? --TypeScript始于 JavaScript，終于 JavaScript。遵循 JavaScript 的語法和語義，方便了無數(shù)的 JavaScript 開發(fā)者。
??? --TypeScript可以重用現(xiàn)有的 JavaScript 代碼，調(diào)用流行的JavaScript 庫。
??? --TypeScript可以編譯成簡潔、簡單的 JavaScript 代碼，在任意瀏覽器、Node.js 或任何兼容 ES3 的環(huán)境上運(yùn)行。
??? --TypeScript比JavaScript 更具開發(fā)效率，包括靜態(tài)類型檢查、基于符號的導(dǎo)航、語句自動完成、代碼重構(gòu)等。
??? --TypeScript提供了類、模塊和接口，更易于構(gòu)建組件。
參考鏈接：https://blog.csdn.net/valada/article/details/79909244
?
-文件類型
wxml：微信小程序框架的標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面結(jié)構(gòu)
wxss：微信小程序的樣式語言，用于描述wxml的組件樣式
js：JavaScript
json：Json，配置文件，工具開發(fā)配置文件、小程序頁面索引配置文件、項目應(yīng)用配置文件、頁面配置文件
wxs：微信小程序的腳本語言
-設(shè)計模式
--MVC
用戶進(jìn)行操作時，View接收用戶的輸入操作，傳遞給Controller進(jìn)行業(yè)務(wù)邏輯處理，Model實(shí)現(xiàn)數(shù)據(jù)持久化，并將結(jié)果反饋給View
--MVP
完全切斷View跟Model之間的聯(lián)系，由Presenter充當(dāng)橋梁
--MVVM
MVVM將“數(shù)據(jù)模型數(shù)據(jù)雙向綁定”的思想作為核心。視圖的數(shù)據(jù)的變化會同時修改數(shù)據(jù)源，而數(shù)據(jù)源數(shù)據(jù)的變化也會立即反應(yīng)到View上。即，ViewModel 是一個 View 信息的存儲結(jié)構(gòu)，ViewModel 和 View 上的信息是一一映射關(guān)系。
使用MVVM模式的好處
低耦合。View可以獨(dú)立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當(dāng)View變化的時候Model可以不變，當(dāng)Model變化的時候View也可以不變。
可重用性。可以把一些視圖的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。
獨(dú)立開發(fā)。開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計人員可以專注于界面(View)的設(shè)計。
可測試性?？梢葬槍iewModel來對界面(View)進(jìn)行測試
參考資料：https://zhuanlan.zhihu.com/p/36141662
?
微信小程序性能優(yōu)化
1微信團(tuán)隊推出的網(wǎng)頁標(biāo)準(zhǔn)控件庫，包括 sketch設(shè)計控件庫和 Photoshop設(shè)計控件庫，控件充分考慮了移動端頁面的特點(diǎn)，能夠保證其在移動端頁面上的可用性和操作性能；
2微信團(tuán)隊推出的微信小程序接口，微信公共庫，提供更加快捷的服務(wù)，對頁面性能的提高有極大作用
3 微信web資源離線存儲
通過使用微信離線存儲，Web 開發(fā)者可借助微信提供的資源存儲能力，直接從微信本地加載 Web 資源而不需要再從服務(wù)端拉取，從而減少網(wǎng)頁加載時間，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁瀏覽體驗(yàn)。每個公眾號下所有 Web App 累計最多可緩存 5M 的資源。
微信小程序常見問題
-不能直接操作 Page.data
避免在直接對Page.data 進(jìn)行賦值修改，請使用 Page.setData 進(jìn)行操作才能將數(shù)據(jù)同步到頁面中進(jìn)行渲染
-怎么獲取用戶輸入
能夠獲取用戶輸入的組件，需要使用組件的屬性bindchange將用戶的輸入內(nèi)容同步到AppService
-為什么腳本內(nèi)不能使用window對象
頁面的腳本邏輯是在JsCore中運(yùn)行，JsCore是一個沒有窗口對象的環(huán)境，所以不能在腳本中使用window，也無法在腳本中操作組件
-為什么zepto/jquery無法使用
zepto/jquery會使用到window對象和document對象，所以無法使用。
-wx.navigateTo無法打開頁面
一個應(yīng)用同時只能打開5個頁面，當(dāng)已經(jīng)打開了5個頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo
-樣式表不支持級聯(lián)選擇器
WXSS支持以.開始的類選擇器。
-本地資源無法通過WXSS獲取
background-image：可以使用網(wǎng)絡(luò)圖片，或者base64，或者使用
-如何修改窗口的背景色
使用page標(biāo)簽選擇器，可以修改頂層節(jié)點(diǎn)的樣式
-HTTPS 請求不成功
tls 僅支持 1.2 及以上版本
部分Android 機(jī)型需要 tls1.0 或者 tls1.1，所以請確保服務(wù)器的 tls 版本為 1.0、1.1、1.2
-網(wǎng)絡(luò)請求的 referer
網(wǎng)絡(luò)請求的referer 是不可以設(shè)置的，格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中{appid}為小程序的 appid，{version}為小程序的版本號，版本號為 0 表示為開發(fā)版、體驗(yàn)版以及審核版本，版本號為 devtools 表示為開發(fā)者工具，其余為正式版本。
-為什么 map 組件總是在最上層
map、canvas、video、textarea是由客戶端創(chuàng)建的原生組件，原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置z-index為多少，都無法蓋在原生組件上。 原生組件暫時還無法放在scroll-view上，也無法對原生組件設(shè)置css動畫。
?
微信小程序功能限制
-微信小程序不提供的功能
??? 小程序在微信沒有集中入口。
??? 微信不會推出小程序商店，也不會向用戶推薦小程序。
??? 小程序沒有訂閱關(guān)系，沒有粉絲，只有訪問，只有訪問量。
??? 小程序不能推送消息。
??? 小程序不能做游戲。
-微信小程序提供的功能
??? 提供小程序頁概念：支持分享當(dāng)前信息。
??? 對話分享：可以分享到對話，支持分享給單個好友及微信群。
??? 搜索查找：小程序可以被搜索，但微信會極力限制搜索能力，目前提供的搜索功能是用戶可直接根據(jù)名稱或品牌搜索小程序。
??? 公眾號關(guān)聯(lián)：在小程序與公眾號為同一開發(fā)主體的前提下，提供小程序與微信公眾號之間的關(guān)聯(lián)。
??? 線下掃碼：提供線下提示用戶附近有哪些小程序存在的功能。用戶可以通過線下掃碼使用，這也是微信提倡的接入方式。
??? 小程序切換：小程序支持掛起狀態(tài)，即多窗口概念，用戶可以把小程序先掛起，然后做別的事情，在需要這個小程序的時候可以快速調(diào)用，回到最開始的狀態(tài)。
??? 消息通知：商戶可以發(fā)送模板消息給接受過服務(wù)的用戶，用戶可以在小程序內(nèi)聯(lián)系客服，支持文字和圖片，解決用戶與小程序的溝通問題。
??? 歷史列表：用戶使用過的小程序會被放入列表，方便下次使用。
?
微信小程序參考資料
-微信小程序開發(fā)工具
https://www.w3cschool.cn/weixinapp/weixinapp-devtools.html
-微信小程序指南手冊
https://www.w3cschool.cn/miniappbook/
-微信小游戲源碼分享
https://www.w3cschool.cn/weixinapp/weixinapp-7wul2q3v.html
-微信小游戲開發(fā)文檔
https://www.w3cschool.cn/wxagame/
-微信小程序騰訊云開發(fā)
https://www.w3cschool.cn/weixinapp/weixinapp-r1tk2r1g.html
-微信小程序云開發(fā)
https://www.w3cschool.cn/weixinapp/weixinapp-mvg538kd.html
?
公眾號二維碼
End：如果有興趣了解量化交易、數(shù)據(jù)分析和互聯(lián)網(wǎng)+的實(shí)用技術(shù)，歡迎關(guān)注本公眾號