本文由作者  孟冬初寒月  於社區發佈

本文較長，建議收藏

微信小程序是一種不用下載就能使用的微應用，也是一項應用創新發明，經過三年的發展，已經構造了新的微信小程序開發環境和開發者生態。 小程序 也 是這麼多 年來中國互聯 網行業裏一個真正能夠 影響到普通程序員的創新成果。

那麼， 掌握微信小程序設計技能和設計規範 也是產品經理的技 能 樹之一。

微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

小程序提供了一個簡單、高效的應用開發框架和豐富的組件及API，幫助開發者在微信中開發具有原生 APP 體驗的服務。

基於微信小程序輕快的特點，小程序擬定了界面設計指南和建議。設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內，建立友好、高效、一致的用戶體驗，同時最大程度適應和支持不同需求，實現用戶與小程序服務方的共贏。

1

小程序概述

一個小程序頁面組成，如下：

爲了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。

1、小程序的工作原理

首先，我們來簡單瞭解下小程序的運行環境。小程序的運行環境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。

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

2、小程序的本質

所以，小程序的編碼方式實際上是使用前端的語言進行編寫的。從理解的角度，小程序可以認爲是運行在微信的瀏覽器容器中，遵從了一套從設計到組件的WeUI規範，的Web程序。

我們稱微信客戶端給小程序所提供的環境爲宿主環境。小程序藉助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能。爲了讓開發者可以很方便的調起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開發者去使用。需要注意的是： 多數 API 的回調都是異步，你需要處理好代碼邏輯的異步問題。

3、WeUI頁面元素所屬層級、層級順序及組合規範

WeUI頁面元素所屬層級、層級順序及組合規範（低到高）：Content、Navigation、Mask、Popout四層。

預覽地址：https://weui.io/#layers

1） Content

內容層：承載頁面主要內容。

2） Navigation

導航層：位於內容層之上，在用戶滑動內容層時可保持位置不動，通常用於承載導航欄等需要固定在頁面的元素。

3） Mask

蒙層：配合Popout層使用，用於鎖定內容層和導航層操作，不單獨使用。

4） Popout

彈出層，作爲內容層和導航層的補充，用於承載彈窗通知、操作菜單、菜單、成功或加載中等狀態的Toast，表單報錯提示等彈出內容。

4、小程序運行機制

1）小程序啓動

小程序啓動會有兩種情況，一種是「冷啓動」，一種是「熱啓動」。

熱啓動： 假如用戶已經打開過某小程序，然後在一定時間內再次打開該小程序，此時無需重新啓動，只需將後臺的小程序切換到前臺，這個過程就是熱啓動；

冷啓動： 用戶首次打開或小程序被微信主動銷燬後再次打開的情況，此時小程序需要重新加載啓動，即冷啓動。

小程序沒有重啓的概念。

2）前臺/後臺狀態

當用戶點擊右上角膠囊按鈕關閉小程序，或者按了設備 Home 鍵離開微信時，小程序並沒有直接銷燬，而是進入了後臺狀態；

當用戶再次進入微信或再次打開小程序，小程序又會從後臺進入前臺。

3）小程序銷燬

需要注意的是：只有當小程序進入後臺一定時間，或者系統資源佔用過高，纔會被真正的銷燬。

• 當小程序進入後臺，客戶端會維持一段時間的運行狀態，超過一定時間後（目前是5分鐘）小程序會被微信主動銷燬。

• 當小程序佔用系統資源過高，可能會被系統銷燬或被微信客戶端主動回收。

在 iOS 上，當微信客戶端在一定時間間隔內（目前是 5 秒）連續收到兩次及以上系統內存告警時，會主動進行小程序的銷燬，並提示用戶 「該小程序可能導致微信響應變慢被終止」。建議小程序在必要時使用wx.onMemoryWarning 監聽內存告警事件，進行必要的內存清理。

5、小程序更新機制

1）未啓動時更新

開發者在管理後臺發佈新版本的小程序之後，如果某個用戶本地有小程序的歷史版本，此時打開的可能還是舊版本。微信客戶端會有若干個時機去檢查本地緩存的小程序有沒有更新版本，如果有則會靜默更新到新版本。

總的來說，開發者在後臺發佈新版本之後，無法立刻影響到所有現網用戶，但最差情況下，也在發佈之後 24 小時之內下發新版本信息到用戶。用戶下次打開時會先更新最新版本再打開。

2）啓動時更新

小程序每次冷啓動時，都會檢查是否有更新版本，如果發現有新版本，將會異步下載新版本的代碼包，並同時用客戶端本地的包進行啓動，即新版本的小程序需要等下一次冷啓動纔會應用上。

如果需要馬上應用最新版本，可以使用 wx.getUpdateManager API 進行處理。

6、插件

插件，是可被添加到小程序內直接使用的功能組件。開發者可以像開發小程序一樣開發一個插件，供其他小程序使用。同時，小程序開發者可直接在小程序內使用插件，無需重複開發，爲用戶提供更豐富的服務。

7、小程序成員管理

不同項目成員擁有不同的權限，從而保證小程序開發安全有序。

2

開放接口與設備

3

小程序設計規範

1）重點突出案例

每個頁面都應有明確的重點，以便於用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下，應儘量避免頁面上出現其它與用戶的決策和操作無關的干擾因素。

2）流程明確案例

爲了讓用戶順暢地使用頁面，在用戶進行某一個操作流程時，應避免出現用戶目標流程之外的內容而打斷用戶。

3）異常狀態——表單出錯案例

表單報錯，在表單頂部告知錯誤原因，並標識出錯誤字段提示用戶修改。

4）減少輸入案例

由於手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程序頁面時應儘量減少用戶輸入，利用現有接口或其他一些易於操作的選擇控件來改善用戶輸入的體驗。

例如下圖中，在添加銀行卡時，採用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優化體驗。

4

小程序基礎設計

1、小程序菜單深淺配色方案（iOS和Android）

開發者可在滿足可用性的前提下，從微信提供的深淺兩套配色的小程序菜單中選擇合適的方案，以適應小程序頁面設計風格。 

2、小程序菜單

小程序的所有頁面，包括小程序內嵌網頁和插件，微信都會在其右上角放置官方小程序菜單，樣式如圖。

開發者不可對其內容自定義，但可選擇深淺兩種基本配色以適應頁面設計風格。官方小程序菜單將放置在界面固定位置，開發者在設計界面時請預留出該區域空間，若需要在此區域附近放置可交互元素，要特別注意交互事件是否會衝突，操作是否容易被使用。

3、品牌標誌（Logo）設計

小程序啓動頁是小程序在微信內一定程度上展現品牌特徵的頁面之一。本頁面將突出展示小程序品牌特徵和加載狀態。啓動頁除品牌標誌（Logo）展示外，頁面上的其他所有元素如加載進度指示，均由微信統一提供且不能更改，無需開發者開發。

5

小程序導航與佈局設計

1、導航區域與標題區域

開發者可根據自身功能設計需要在頁面內添加自有導航。並保持不同頁面間導航一致，指向清晰，有路可退。受限於手機屏幕尺寸的限制，小程序頁面的導航應儘量簡單。建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。 

2、標籤分頁（Tab）導航

開發者可爲小程序頁面添加標籤分頁（Tab）導航。標籤分頁欄可固定在頁面頂部或者底部，便於用戶在不同的分頁間做切換。 標籤數量不得少於2個，最多不得超過5個 ，爲確保點擊區域，建議標籤數量不超過4項。一個頁面也不應出現一組以上的標籤分頁欄。

首頁 原生底部標籤

其中小程序首頁可選擇微信提供的原生底部標籤分頁樣式，該樣式僅供小程序首頁使用。開發時可自定義圖標樣式、標籤文案以及文案顏色等，具體設置項如圖標尺寸等參考可參考開發文檔和WeUI基礎控件庫。

頂部標籤

頂部標籤分頁欄顏色可自定義。在自定義顏色選擇中，務必注意保持分頁欄標籤的可用性、可視性和可操作性。

3、頁腳（Footer組件）

6

小程序頁面加載設計

加載反饋注意事項

若載入時間較長,應提供取消操作,並使用進度條顯示載入的進度。

載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。

不要在同一個頁面同時使用超過1個加載動畫。

結果反饋

除了在用戶等待的過程中需予以及時反饋外，對操作的結果也需要予以明確反饋。根據實際情況，可選擇不同的結果反饋樣式。對於頁面局部的操作，可在操作區域予以直接反饋，對於頁面級操作結果，可使用彈出式提示、模態對話框或結果頁面展示。對於常用控件，微信設計中心將提供控件庫，其中的控件都已提供完整操作反饋。

1、啓動頁加載

小程序啓動頁是小程序在微信內一定程度上展現品牌特徵的頁面之一。本頁面將突出展示小程序品牌特徵和加載狀態。頁面上的其他所有元素如加載進度指示，均由微信統一提供。

2、頁面下拉刷新加載

在微信小程序內，微信提供標準的頁面下拉刷新加載能力和樣式，開發者無需自行開發。

3、全局加載反饋

1） 使用標題欄提示加載小程序頁面內容的過程

開發者可以參考圖中樣式，使用標題欄提示加載小程序頁面內容的過程。例如：

2） 模態加載

模態的加載樣式將覆蓋整個頁面的，由於無法明確告知具體加載的位置或內容將可能引起用戶的焦慮感，因此應謹慎使用。除了在某些全局性操作下不要使用模態的加載。

3） 自定義頁面內容的加載樣式

開發者可在小程序裏自定義頁面內容的加載樣式。建議不管是使用在局部還是全局加載，自定義加載樣式都應該儘可能簡潔，並使用簡單動畫告知用戶加載過程。

4）Loadmore組件

4、局部加載

局部加載反饋即只在觸發加載的頁面局部進行反饋，這樣的反饋機制更加有針對性，頁面跳動小，是微信推薦的反饋方式。例如：

7

小 程序頁面Content設計

小程序頁面Content設計，實際上就是依據我們的業務設計，將小程序組件和我們自己設計的組件，按照小程序設計規範與視覺規範有序的組合和排版的過程。

1、小程序組件庫

組件預覽地址： https://weui.io/

2、小程序視覺規範

1） 字體大小

微信內字體的使用與所運行的系統字體保持一致，常用字號爲20, 18, 17, 16,14 13, 11(pt)，使用場景具體如下：

2）字體顏色

①主要顏色：

② 主內容 Black 黑色，次要內容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段的說明內容而且屬於主要內容用 Semi 黑。

③ 藍色爲鏈接用色，綠色爲完成字樣色，紅色爲出錯用色 Press 與 Disable 狀態分別降低透明度爲20%與10%。

3）列表

4）表單

5）按鈕

6）圖標

尺寸：100*100 pX

一般用於結果頁面狀態提示，根據結果的情況選擇對應的 icon。

7）小程序titlebar按鈕

8

反饋設計- Popout

1、操作反饋

1） 圖標型彈出提示

圖標型彈出提示適用於輕量級的成功提示 ，1.5秒後自動消失 ，並不打斷流程，對用戶影響較小，適用於不需要強調的操作提醒，例如成功提示。特別注意該形式不適用於錯誤提示，因爲錯誤提示需明確告知用戶，因而不適合使用一閃而過的彈出式提示。

2)文字型彈出提示

文字型彈出提示適用於需要輕量化地用文字解釋當前狀態或提醒不嚴重的錯誤。 1.5秒後自動消失 ，不打斷流程，對用戶影響較小。

3）模態對話框

對於需要用戶明確知曉的操作結果狀態可通過模態對話框來提示，並可 附帶下一步操作指引。

4）結果頁（非Popout）

對於操作結果已經是當前流程的終結的情況，可使用操作結果頁來反饋。這種方式最爲強烈和明確的告知用戶操作已經完成，並可根據實際情況給出下一步操作的指引。

5）異常狀態——表單出錯 （非Popout）

表單報錯，在表單頂部告知錯誤原因，並標識出錯誤字段提示用戶修改。

6）Dialog（對話框）

   

7）ActionSheet（彈出式菜單）

      

IOS     vs    Android

8） Half-screen Dialog（半屏組件）

   

9）Picker（多列選擇器）

      

10）Toast（彈窗式提示）

    

9

小程序數據分析

1、功能概述

小程序數據分析，是面向小程序開發者、運營者的數據分析工具，提供關鍵指標統計、實時訪問監控、自定義分析等，幫助小程序產品迭代優化和運營。主要功能包括每日例行統計的標準分析，以及滿足用戶個性化需求的自定義分析。

1）名詞解釋

用戶 ：使用過小程序的微信用戶，根據openid來判斷。

頁面 ：小程序的頁面，以頁面路徑表示，如index,  product/list。

受訪頁 ：用戶訪問的所有小程序頁面均可稱爲受訪頁。

入口頁 ：用戶打開小程序時首先進入的頁面稱爲入口頁，例如用戶從頁面A進入小程序，跳轉到頁面B，A爲入口頁，B不是。

退出頁 ：用戶離開小程序時最後訪問的頁面稱爲退出頁，例如用戶從頁面A跳轉到頁面B，從頁面B退出小程序，B爲退出頁，A不是。

場景 ：用戶打開小程序的方式，如通過掃描二維碼打開小程序，場景爲二維碼。

訪問 ：用戶瀏覽小程序頁面的行爲。

添加 ：用戶將小程序添加到“我的小程序”的行爲。

分享 ：用戶點擊小程序內或小程序外菜單，將小程序及其頁面分享給好友的行爲。

新增 ：用戶首次訪問小程序頁面，即稱爲新增。

活躍 ：用戶在一段時間內訪問過小程序即稱爲活躍。

停留 ：用戶從打開小程序內頁面，到主動關閉或超時退出小程序的過程。切換到後臺、顯示到聊天頂部或浮窗，均不算停留在小程序。

留存 ：某個時間段內新增或活躍的用戶，經過一段時間後仍然使用小程序，即稱爲留存，區分新增留存和活躍留存。

事件 ：自定義分析中進行用戶行爲數據收集和分析的模型，表示某個用戶行爲。

漏斗 ：自定義分析中由一系列事件組成的數據分析模型，用於分析業務流程中每個步驟的用戶轉化與流失。

2）指標解釋

①訪問

累計訪問人數：歷史累計訪問小程序的用戶數，同一用戶多次訪問不重複計。

新訪問人數：首次訪問小程序頁面的用戶數，同一用戶多次訪問不重複計。

打開次數：打開小程序的總次數。用戶從打開小程序到主動關閉或超時退出小程序的過程，計爲一次。

訪問次數：訪問小程序頁面的總次數。多個頁面之間跳轉、同一頁面的重複訪問計爲多次訪問。

訪問人數：訪問小程序頁面的總用戶數，同一用戶多次訪問不重複計。

人均停留時長：平均每個用戶停留在小程序頁面的總時長（單位爲秒），即總停留時長/訪問人數。

次均停留時長：平均每次打開小程序停留在小程序頁面的總時長（單位爲秒），即總停留時長/打開次數。

平均訪問深度：平均每次打開小程序訪問的去重頁面數。

月活躍用戶：30天內有訪問行爲，且當天訪問的用戶。

沉默迴流用戶：在過去30天內無訪問，90天內有訪問（流失期在30~90天內），且當天訪問的用戶。

流失迴流用戶：在過去90天內無訪問，歷史上有訪問（流失期在90天以上），且當天訪問的用戶。

②分享

分享次數：分享小程序頁面的總次數。

分享人數：分享小程序頁面的總人數，同一用戶多次分享不重複計。

③添加

總添加人數：歷史累計將小程序添加爲“我的小程序”的總用戶數（去除已取消添加人數）。

新添加人數：昨日較前日相比，新增添加到“我的小程序”的用戶數 。

④留存

新增留存：指定時間新增（即首次訪問小程序）的用戶，在之後的第N天（或周、月），再次訪問小程序的用戶數佔比。

活躍留存：指定時間活躍（即訪問小程序）的用戶，在之後的第N天（或周、月），再次訪問小程序的用戶數佔比。

⑤支付

累計支付金額：截止至昨日，小程序歷史非免密支付總體累計金額。

支付筆數：小程序內非免密支付成功次數。

支付金額：小程序內非免密支付成功總金額。

單均支付金額：小程序內每筆非免密支付的平均金額，即小程序內非免密支付成功總金額/小程序內非免密支付成功次數。

支付人數：小程序內非免密支付成功人數，同一用戶多次支付不重複計算。

人均消費次數：小程序內完成非免密支付用戶的平均支付次數，即小程序內非免密支付成功次數/小程序內非免密支付成功人數。

首次支付人數：當日首次在小程序內完成支付的用戶數，同一用戶多次支付不重複計算。

復購人數：非當日首次在小程序內完成支付的用戶數，同一用戶多次支付不重複計算。

支付次數轉化率：在小程序內，完成非免密支付轉化的小程序打開次數佔比，即小程序內非免密支付成功次數/小程序打開次數。

支付人數轉化率：在小程序內，完成非免密支付轉化的小程序用戶數佔比，即小程序內非免密支付成功人數/小程序打開人數。

⑥頁面

訪問次數：訪問該頁面的總次數。

訪問人數：訪問該頁面的總用戶數，同一用戶多次訪問不重複計。

次均時長：用戶平均每次訪問該頁面的停留時長（單位爲秒），即該頁面的總停留時長/訪問次數。

入口頁次數：該頁面作爲入口頁的訪問次數，例如一用戶從頁面A進入小程序，則頁面A的入口頁次數+1。

退出頁次數：該頁面作爲退出頁的訪問次數，例如一用戶從頁面B退出小程序，則頁面B的退出頁次數+1。

退出率：該頁面作爲退出頁的訪問次數佔比，即退出頁次數/訪問次數。

分享次數：分享該頁面的總次數。

分享人數：分享該頁面的總人數，同一用戶多次分享不重複計。

2、常規分析

1）概況

提供小程序關鍵指標趨勢以及top頁面訪問數據，快速瞭解小程序發展概況。例如下圖：

2）訪問分析

提供小程序用戶訪問規模、來源、頻次、時長、深度、留存以及頁面詳情等數據，具體分析用戶新增、活躍和留存情況。例如下圖

3）實時統計

提供小程序實時訪問數據，滿足實時監控需求。例如下圖

4）用戶畫像

提供小程序的用戶畫像數據，包括用戶年齡、性別、地區、終端及機型分佈。例如下圖：

3、自定義分析

自定義分析支持靈活多維和近實時的用戶行爲分析，可以通過自定義上報，對用戶在小程序內的行爲做精細化跟蹤，滿足頁面訪問等標準統計以外的個性化分析需求。例如，電商類小程序通過配置自定義上報，收集數據，可以完成如下分析：

購買商品的人，各省份、城市、年齡、性別的分佈如何？不同用戶羣購買的商品數量、商品價格有什麼差別？

用戶訪問商品頁、查看商品詳情、查看評論、下單、支付、完成購買，逐步的轉化率如何？

不同用戶羣的轉化是否有差異？

今天參與線上活動的用戶，各個時段（小時級）的活躍度如何？

登錄 https://mp.weixin.qq.com ，進入“數據分析” – “自定義分析” - “事件管理”，點擊 “新建事件”。具體配置步驟可參考官方文檔。

4、小程序助手

“小程序數據助手”是微信公衆平臺發佈的官方小程序，支持相關的開發和運營人員查看自身小程序的運營數據，掃描下面小程序碼可立即體驗。 前提是你的微信賬戶是小程序管理員或者運營者纔可登錄體驗。

“小程序數據助手”當前功能模塊包括數據概況、訪問基礎分析（用戶趨勢、來源分析、留存分析、時長分析、頁面詳情）、實時統計和用戶畫像（年齡性別、省份城市、終端機型），數據與小程序後臺常規分析一致。

10

 雲開發

開發者可以使用雲開發開發微信小程序、小遊戲，無需搭建服務器，即可使用雲端能力。

雲開發爲開發者提供完整的原生雲端支持和微信服務支持，弱化後端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互兼容，並不互斥。

雲開發提供了幾大基礎能力支持：

能力	作用	說明
雲函數	無需自建服務器	在雲端運行的代碼，微信私有協議天然鑑權，開發者只需編寫自身業務邏輯代碼
數據庫	無需自建數據庫	一個既可在小程序前端操作，也能在雲函數中讀寫的 JSON 數據庫
存儲	無需自建存儲和 CDN	在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
雲調用	原生微信服務集成	基於雲函數免鑑權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力

小程序開源了，weui-wxss、weui.js和react-weui等，可以使用他們進行Web頁面的設計與開發，它可以運行在任何瀏覽器中。

weui在Git上的地址： https://github.com/Tencent/weui

總結

本文主要總結了微信小程序的工作機制、設計規範以及數據分析相關的內容，筆者水平有限，文中難免會存在疏漏、錯誤的地方，歡迎大家指正，一起溝通學習、共同進步。

------正文分割線------

點個“在看”吧