微信小程式是一種全新的連接配接使用者與服務的方式，它可以在微信内被便捷地擷取和傳播，同時具有出色的使用體驗。
小程式提供了一個簡單、高效的應用開發架構和豐富的元件及API，幫助開發者在微信中開發具有原生 APP 體驗的服務。
基于微信小程式輕快的特點，小程式拟定了小程式界面設計指南和建議。 設計指南建立在充分尊重使用者知情權與操作權的基礎之上。旨在微信生态體系内，建立友好、高效、一緻的使用者體驗，同時最大程度适應和支援不同需求，實作使用者與小程式服務方的共赢。
源文：https://www.yuque.com/jingwhale/spec/fom05c
一、小程式概述
一個小程式頁面組成，如下：
為了友善開發者減少配置項，描述頁面的四個檔案必須具有相同的路徑與檔案名。
1.1、小程式的工作原理
首先，我們來簡單了解下小程式的運作環境。小程式的運作環境分成渲染層和邏輯層，其中 WXML 模闆和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。
小程式的渲染層和邏輯層分别由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層采用JsCore線程運作JS腳本。一個小程式存在多個界面，是以渲染層存在多個WebView線程，這兩個線程的通信會經由微信用戶端（下文中也會采用Native來代指微信用戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程式的通信模型下圖所示。
1.2、小程式的本質
是以，小程式的編碼方式實際上是使用前端的語言進行編寫的。從了解的角度，小程式可以認為是運作在微信的浏覽器容器中，遵從了一套從設計到元件的WeUI規範，的Web程式。
我們稱微信用戶端給小程式所提供的環境為宿主環境。小程式借助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能。為了讓開發者可以很友善的調起微信提供的能力，例如擷取使用者資訊、微信支付等等，小程式提供了很多 API 給開發者去使用。需要注意的是：多數 API 的回調都是異步，你需要處理好代碼邏輯的異步問題。
1.3、WeUI頁面元素所屬層級、層級順序及組合規範
WeUI頁面元素所屬層級、層級順序及組合規範（低到高）：Content、Navigation、Mask、Popout四層。
1）、Content
内容層，承載頁面主要内容。
2）、Navigation
導航層，位于内容層之上，在使用者滑動内容層時可保持位置不動，通常用于承載導航欄等需要固定在頁面的元素。
3）、Mask
蒙層，配合Popout層使用，用于鎖定内容層和導航層操作，不單獨使用。
4）、Popout
彈出層，作為内容層和導航層的補充，用于承載彈窗通知、操作菜單、菜單、成功或加載中等狀态的Toast，表單報錯提示等彈出内容。
1.4、小程式運作機制
1）、小程式啟動
小程式啟動會有兩種情況，一種是「冷啟動」，一種是「熱啟動」。
熱啟動：假如使用者已經打開過某小程式，然後在一定時間内再次打開該小程式，此時無需重新啟動，隻需将背景态的小程式切換到前台，這個過程就是熱啟動；
冷啟動：使用者首次打開或小程式被微信主動銷毀後再次打開的情況，此時小程式需要重新加載啟動，即冷啟動。
小程式沒有重新開機的概念。
2）、前台/背景狀态
當使用者點選右上角膠囊按鈕關閉小程式，或者按了裝置 Home 鍵離開微信時，小程式并沒有直接銷毀，而是進入了背景狀态；
當使用者再次進入微信或再次打開小程式，小程式又會從背景進入前台。
3）、小程式銷毀
需要注意的是：隻有當小程式進入背景一定時間，或者系統資源占用過高，才會被真正的銷毀。
- 當小程式進入背景，用戶端會維持一段時間的運作狀态，超過一定時間後（目前是5分鐘）小程式會被微信主動銷毀。
- 當小程式占用系統資源過高，可能會被系統銷毀或被微信用戶端主動回收。
在 iOS 上，當微信用戶端在一定時間間隔内（目前是 5 秒）連續收到兩次及以上系統記憶體告警時，會主動進行小
程式的銷毀，并提示使用者 「該小程式可能導緻微信響應變慢被終止」。
建議小程式在必要時使用 wx.onMemoryWarning 監聽記憶體告警事件，進行必要的記憶體清理。 1.5、小程式更新機制
1）、未啟動時更新
開發者在管理背景釋出新版本的小程式之後，如果某個使用者本地有小程式的曆史版本，此時打開的可能還是舊版本。微信用戶端會有若幹個時機去檢查本地緩存的小程式有沒有更新版本，如果有則會靜默更新到新版本。總的來說，開發者在背景釋出新版本之後，無法立刻影響到所有現網使用者，但最差情況下，也在釋出之後 24 小時之内下發新版本資訊到使用者。使用者下次打開時會先更新最新版本再打開。
2）、啟動時更新
小程式每次冷啟動時，都會檢查是否有更新版本，如果發現有新版本，将會異步下載下傳新版本的代碼包，并同時用用戶端本地的包進行啟動，即新版本的小程式需要等下一次冷啟動才會應用上。
如果需要馬上應用最新版本，可以使用 wx.getUpdateManager API 進行處理。
1.6、插件
1.7、小程式成員管理
不同項目成員擁有不同的權限，進而保證小程式開發安全有序。
二、開放接口與裝置
開放接口：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
裝置：https://developers.weixin.qq.com/miniprogram/dev/api/device/ibeacon/wx.stopBeaconDiscovery.html
三、小程式設計規範
小程式設計規範：https://developers.weixin.qq.com/miniprogram/design/
設計檔案下載下傳：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
四、小程式基礎設計
4.1、小程式菜單深淺配色方案（iOS和Android）
開發者可在滿足可用性的前提下，從微信提供的深淺兩套配色的小程式菜單中選擇合适的方案，以适應小程式頁面設計風格。
4.2、小程式菜單
小程式的所有頁面，包括小程式内嵌網頁和插件，微信都會在其右上角放置官方小程式菜單，樣式如圖。開發者不可對其内容自定義，但可選擇深淺兩種基本配色以适應頁面設計風格。 官方小程式菜單将放置在界面固定位置，開發者在設計界面時請預留出該區域空間，若需要在此區域附近放置可互動元素，要特别注意互動事件是否會沖突，操作是否容易被使用。
4.3、品牌标志（Logo）設計
小程式啟動頁是小程式在微信内一定程度上展現品牌特征的頁面之一。本頁面将突出展示小程式品牌特征和加載狀态。啟動頁除品牌标志（Logo）展示外，頁面上的其他所有元素如加載進度訓示，均由微信統一提供且不能更改，無需開發者開發。
五、小程式導航與布局設計
5.1、導航區域與标題區域
開發者可根據自身功能設計需要在頁面内添加自有導航。并保持不同頁面間導航一緻，指向清晰，有路可退。受限于手機螢幕尺寸的限制，小程式頁面的導航應盡量簡單。建議開發者設計的自有導航樣式與微信官方小程式菜單樣式保持一定差異，以便區分。
5.2、标簽分頁（Tab）導航
開發者可為小程式頁面添加标簽分頁（Tab）導航。标簽分頁欄可固定在頁面頂部或者底部，便于使用者在不同的分頁間做切換。标簽數量不得少于2個，最多不得超過5個，為確定點選區域，建議标簽數量不超過4項。一個頁面也不應出現一組以上的标簽分頁欄。
首頁原生底部标簽
其中小程式首頁可選擇微信提供的原生底部标簽分頁樣式，該樣式僅供小程式首頁使用。開發時可自定義圖示樣式、标簽文案以及文案顔色等，具體設定項如圖示尺寸等參考可參考開發文檔和WeUI基礎控件庫。
頂部标簽
頂部标簽分頁欄顔色可自定義。在自定義顔色選擇中，務必注意保持分頁欄标簽的可用性、可視性和可操作性。
5.3、頁腳（Footer元件）
六、小程式頁面加載設計
加載回報注意事項
若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。
載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人産生該界面已經卡死的錯覺。
不要在同一個頁面同時使用超過1個加載動畫。 結果回報
除了在使用者等待的過程中需予以及時回報外，對操作的結果也需要予以明确回報。根據實際情況，可選擇不同的結果回報樣式。對于頁面局部的操作，可在操作區域予以直接回報，對于頁面級操作結果，可使用彈出式提示、模态對話框或結果頁面展示。對于常用控件，微信設計中心将提供控件庫，其中的控件都已提供完整操作回報。
6.1、啟動頁加載
小程式啟動頁是小程式在微信内一定程度上展現品牌特征的頁面之一。本頁面将突出展示小程式品牌特征和加載狀态。頁面上的其他所有元素如加載進度訓示，均由微信統一提供。
6.2、頁面下拉重新整理加載
在微信小程式内，微信提供标準的頁面下拉重新整理加載能力和樣式，開發者無需自行開發。
6.3、全局加載回報
6.3.1、使用标題欄提示加載小程式頁面内容的過程
開發者可以參考圖中樣式，使用标題欄提示加載小程式頁面内容的過程。例如：
6.3.2、模态加載
模态的加載樣式将覆寫整個頁面的，由于無法明确告知具體加載的位置或内容将可能引起使用者的焦慮感，是以應謹慎使用。除了在某些全局性操作下不要使用模态的加載。
6.3.3、自定義頁面内容的加載樣式
開發者可在小程式裡自定義頁面内容的加載樣式。建議不管是使用在局部還是全局加載，自定義加載樣式都應該盡可能簡潔，并使用簡單動畫告知使用者加載過程。
6.3.4、Loadmore元件
6.4、局部加載
局部加載回報即隻在觸發加載的頁面局部進行回報，這樣的回報機制更加有針對性，頁面跳動小，是微信推薦的回報方式。例如：
七、小程式頁面Content設計
小程式頁面Content設計，實際上就是依據我們的業務設計，将小程式元件和我們自己設計的元件，按照小程式設計規範與視覺規範有序的組合和排版的過程。
7.1、小程式元件庫
設計元件庫：https://weui.io/
開發元件庫：https://developers.weixin.qq.com/miniprogram/dev/component/
7.2、小程式視覺規範
7.2.1、字型
微信内字型的使用與所運作的系統字型保持一緻，常用字号為20, 18, 17, 16,14 13, 11(pt)，使用場景具體如下：
7.2.2、字型顔色
1）、主要顔色：
#09BB07 #353535 #888888 #576b95 #e64340
RGB(9,187,7) RGB(53,53,53) RGB(136,136,136) RGB(87,107,149) RGB(230,67,64) 2）、主内容 Black 黑色，次要内容 Grey 灰色；時間戳與表單預設值 Light 灰色；大段的說明内容而且屬于主要内容用 Semi 黑。
Light Gray Semi Black
#b2b2b2 #888888 #353535 #000000 3）、藍色為連結用色，綠色為完成字樣色，紅色為出錯用色 Press 與 Disable 狀态分别降低透明度為20%與10%。
Naormal Press（20%） Disabled（10%）
#576b95
#09BB07
#e64340 4）、清單
5）、表單
6）、按鈕
7）、圖示
尺寸：100*100 pX
般用于結果頁面狀态提示，根據結果的情況選擇對應的 icon。
視覺設計規範：https://developers.weixin.qq.com/miniprogram/design/#%E5%AD%97%E4%BD%93
八、回報設計-Popout
8.1、操作回報
1）、圖示型彈出提示
圖示型彈出提示适用于輕量級的成功提示，1.5秒後自動消失，并不打斷流程，對使用者影響較小，适用于不需要強調的操作提醒，例如成功提示。特别注意該形式不适用于錯誤提示，因為錯誤提示需明确告知使用者，因而不适合使用一閃而過的彈出式提示。
2)、文字型彈出提示
文字型彈出提示适用于需要輕量化地用文字解釋目前狀态或提醒不嚴重的錯誤。1.5秒後自動消失，不打斷流程，對使用者影響較小。
3）、模态對話框
對于需要使用者明确知曉的操作結果狀态可通過模态對話框來提示，并可附帶下一步操作指引。
4）、結果頁（非Popout）
對于操作結果已經是目前流程的終結的情況，可使用操作結果頁來回報。這種方式最為強烈和明确的告知使用者操作已經完成，并可根據實際情況給出下一步操作的指引。
5）、異常狀态——表單出錯（非Popout）
表單報錯，在表單頂部告知錯誤原因，并辨別出錯誤字段提示使用者修改。
8.2、足不出戶
1）、模态對話框
2）、ActionSheet
3）Half-screen Dialog
4）Picker
5）、Toast
九、雲開發
開發者可以使用雲開發開發微信小程式、小遊戲，無需搭建伺服器，即可使用雲端能力。
雲開發為開發者提供完整的原生雲端支援和微信服務支援，弱化後端和運維概念，無需搭建伺服器，使用平台提供的 API 進行核心業務開發，即可實作快速上線和疊代，同時這一能力，同開發者已經使用的雲服務互相相容，并不互斥。
雲開發提供了幾大基礎能力支援：
| 能力 | 作用 | 說明 |
| 雲函數 | 無需自建伺服器 | 在雲端運作的代碼，微信私有協定天然鑒權，開發者隻需編寫自身業務邏輯代碼 |
| 資料庫 | 無需自建資料庫 | 一個既可在小程式前端操作，也能在雲函數中讀寫的 JSON 資料庫 |
| 存儲 | 無需自建存儲和 CDN | 在小程式前端直接上傳/下載下傳雲端檔案，在雲開發控制台可視化管理 |
| 雲調用 | 原生微信服務內建 | 基于雲函數免鑒權使用小程式開放接口的能力，包括服務端調用、擷取開放資料等能力 |
十、拓展
小程式開源了，weui-wxss、weui.js和react-weui等，可以使用他們進行Web頁面的設計與開發，它可以運作在任何浏覽器中。
weui：https://github.com/Tencent/weui
