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

小程序提供了一個(gè)簡(jiǎn)單、高效的應(yīng)用開(kāi)發(fā)框架和豐富的組件及API，幫助開(kāi)發(fā)者在微信中開(kāi)發(fā)具有原生 APP 體驗(yàn)的服務(wù)。

基于微信小程序輕快的特點(diǎn)，小程序擬定了小程序界面設(shè)計(jì)指南和建議。 設(shè)計(jì)指南建立在充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上。旨在微信生態(tài)體系內(nèi)，建立友好、高效、一致的用戶體驗(yàn)，同時(shí)最大程度適應(yīng)和支持不同需求，實(shí)現(xiàn)用戶與小程序服務(wù)方的共贏。

小程序概述

一個(gè)小程序頁(yè)面組成，如下：

為了方便開(kāi)發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名。

1. 小程序的工作原理

首先，我們來(lái)簡(jiǎn)單了解下小程序的運(yùn)行環(huán)境。小程序的運(yùn)行環(huán)境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。

小程序的渲染層和邏輯層分別由2個(gè)線程管理：渲染層的界面使用了WebView 進(jìn)行渲染；邏輯層采用JsCore線程運(yùn)行JS腳本。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè)WebView線程，這兩個(gè)線程的通信會(huì)經(jīng)由微信客戶端（下文中也會(huì)采用Native來(lái)代指微信客戶端）做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由Native轉(zhuǎn)發(fā)，小程序的通信模型下圖所示。

2. 小程序的本質(zhì)

所以，小程序的編碼方式實(shí)際上是使用前端的語(yǔ)言進(jìn)行編寫(xiě)的。從理解的角度，小程序可以認(rèn)為是運(yùn)行在微信的瀏覽器容器中，遵從了一套從設(shè)計(jì)到組件的WeUI規(guī)范的Web程序。

我們稱微信客戶端給小程序所提供的環(huán)境為宿主環(huán)境。小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁(yè)無(wú)法完成的功能。為了讓開(kāi)發(fā)者可以很方便的調(diào)起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開(kāi)發(fā)者去使用。需要注意的是：多數(shù) API 的回調(diào)都是異步，你需要處理好代碼邏輯的異步問(wèn)題。

3. WeUI頁(yè)面元素所屬層級(jí)、層級(jí)順序及組合規(guī)范

WeUI頁(yè)面元素所屬層級(jí)、層級(jí)順序及組合規(guī)范（低到高）：Content、Navigation、Mask、Popout四層。

Content

內(nèi)容層，承載頁(yè)面主要內(nèi)容。

Navigation

導(dǎo)航層，位于內(nèi)容層之上，在用戶滑動(dòng)內(nèi)容層時(shí)可保持位置不動(dòng)，通常用于承載導(dǎo)航欄等需要固定在頁(yè)面的元素。

Mask

蒙層，配合Popout層使用，用于鎖定內(nèi)容層和導(dǎo)航層操作，不單獨(dú)使用。

Popout

彈出層，作為內(nèi)容層和導(dǎo)航層的補(bǔ)充，用于承載彈窗通知、操作菜單、菜單、成功或加載中等狀態(tài)的Toast，表單報(bào)錯(cuò)提示等彈出內(nèi)容。

4. 小程序運(yùn)行機(jī)制

小程序啟動(dòng)

小程序啟動(dòng)會(huì)有兩種情況，一種是「冷啟動(dòng)」，一種是「熱啟動(dòng)」。

熱啟動(dòng)：假如用戶已經(jīng)打開(kāi)過(guò)某小程序，然后在一定時(shí)間內(nèi)再次打開(kāi)該小程序，此時(shí)無(wú)需重新啟動(dòng)，只需將后臺(tái)態(tài)的小程序切換到前臺(tái)，這個(gè)過(guò)程就是熱啟動(dòng)；

冷啟動(dòng)：用戶首次打開(kāi)或小程序被微信主動(dòng)銷毀后再次打開(kāi)的情況，此時(shí)小程序需要重新加載啟動(dòng)，即冷啟動(dòng)。

小程序沒(méi)有重啟的概念。

前臺(tái)/后臺(tái)狀態(tài)

當(dāng)用戶點(diǎn)擊右上角膠囊按鈕關(guān)閉小程序，或者按了設(shè)備 Home 鍵離開(kāi)微信時(shí)，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái)狀態(tài)；

當(dāng)用戶再次進(jìn)入微信或再次打開(kāi)小程序，小程序又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

小程序銷毀

需要注意的是：只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷毀。

• 當(dāng)小程序進(jìn)入后臺(tái)，客戶端會(huì)維持一段時(shí)間的運(yùn)行狀態(tài)，超過(guò)一定時(shí)間后（目前是5分鐘）小程序會(huì)被微信主動(dòng)銷毀。
• 當(dāng)小程序占用系統(tǒng)資源過(guò)高，可能會(huì)被系統(tǒng)銷毀或被微信客戶端主動(dòng)回收。

在 iOS 上，當(dāng)微信客戶端在一定時(shí)間間隔內(nèi)（目前是 5 秒）連續(xù)收到兩次及以上系統(tǒng)內(nèi)存告警時(shí)，會(huì)主動(dòng)進(jìn)行小程序的銷毀，并提示用戶 「該小程序可能導(dǎo)致微信響應(yīng)變慢被終止」。建議小程序在必要時(shí)使用 wx.onMemoryWarning 監(jiān)聽(tīng)內(nèi)存告警事件，進(jìn)行必要的內(nèi)存清理。

5. 小程序更新機(jī)制

未啟動(dòng)時(shí)更新

開(kāi)發(fā)者在管理后臺(tái)發(fā)布新版本的小程序之后，如果某個(gè)用戶本地有小程序的歷史版本，此時(shí)打開(kāi)的可能還是舊版本。微信客戶端會(huì)有若干個(gè)時(shí)機(jī)去檢查本地緩存的小程序有沒(méi)有更新版本，如果有則會(huì)靜默更新到新版本。總的來(lái)說(shuō)，開(kāi)發(fā)者在后臺(tái)發(fā)布新版本之后，無(wú)法立刻影響到所有現(xiàn)網(wǎng)用戶，但最差情況下，也在發(fā)布之后 24 小時(shí)之內(nèi)下發(fā)新版本信息到用戶。用戶下次打開(kāi)時(shí)會(huì)先更新最新版本再打開(kāi)。

啟動(dòng)時(shí)更新

小程序每次冷啟動(dòng)時(shí)，都會(huì)檢查是否有更新版本，如果發(fā)現(xiàn)有新版本，將會(huì)異步下載新版本的代碼包，并同時(shí)用客戶端本地的包進(jìn)行啟動(dòng)，即新版本的小程序需要等下一次冷啟動(dòng)才會(huì)應(yīng)用上。

如果需要馬上應(yīng)用最新版本，可以使用 wx.getUpdateManager API 進(jìn)行處理。

6. 插件

7. 小程序成員管理

不同項(xiàng)目成員擁有不同的權(quán)限，從而保證小程序開(kāi)發(fā)安全有序。

開(kāi)放接口與設(shè)備

小程序基礎(chǔ)設(shè)計(jì)

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

開(kāi)發(fā)者可在滿足可用性的前提下，從微信提供的深淺兩套配色的小程序菜單中選擇合適的方案，以適應(yīng)小程序頁(yè)面設(shè)計(jì)風(fēng)格。

2. 小程序菜單

小程序的所有頁(yè)面，包括小程序內(nèi)嵌網(wǎng)頁(yè)和插件，微信都會(huì)在其右上角放置官方小程序菜單，樣式如圖。開(kāi)發(fā)者不可對(duì)其內(nèi)容自定義，但可選擇深淺兩種基本配色以適應(yīng)頁(yè)面設(shè)計(jì)風(fēng)格。 官方小程序菜單將放置在界面固定位置，開(kāi)發(fā)者在設(shè)計(jì)界面時(shí)請(qǐng)預(yù)留出該區(qū)域空間，若需要在此區(qū)域附近放置可交互元素，要特別注意交互事件是否會(huì)沖突，操作是否容易被使用。

3. 品牌標(biāo)志（Logo）設(shè)計(jì)

小程序啟動(dòng)頁(yè)是小程序在微信內(nèi)一定程度上展現(xiàn)品牌特征的頁(yè)面之一。本頁(yè)面將突出展示小程序品牌特征和加載狀態(tài)。啟動(dòng)頁(yè)除品牌標(biāo)志（Logo）展示外，頁(yè)面上的其他所有元素如加載進(jìn)度指示，均由微信統(tǒng)一提供且不能更改，無(wú)需開(kāi)發(fā)者開(kāi)發(fā)。

小程序?qū)Ш脚c布局設(shè)計(jì)

1. 導(dǎo)航區(qū)域與標(biāo)題區(qū)域

開(kāi)發(fā)者可根據(jù)自身功能設(shè)計(jì)需要在頁(yè)面內(nèi)添加自有導(dǎo)航。并保持不同頁(yè)面間導(dǎo)航一致，指向清晰，有路可退。受限于手機(jī)屏幕尺寸的限制，小程序頁(yè)面的導(dǎo)航應(yīng)盡量簡(jiǎn)單。建議開(kāi)發(fā)者設(shè)計(jì)的自有導(dǎo)航樣式與微信官方小程序菜單樣式保持一定差異，以便區(qū)分。

2. 標(biāo)簽分頁(yè)（Tab）導(dǎo)航

開(kāi)發(fā)者可為小程序頁(yè)面添加標(biāo)簽分頁(yè)（Tab）導(dǎo)航。標(biāo)簽分頁(yè)欄可固定在頁(yè)面頂部或者底部，便于用戶在不同的分頁(yè)間做切換。標(biāo)簽數(shù)量不得少于2個(gè)，最多不得超過(guò)5個(gè)，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過(guò)4項(xiàng)。一個(gè)頁(yè)面也不應(yīng)出現(xiàn)一組以上的標(biāo)簽分頁(yè)欄。

首頁(yè)原生底部標(biāo)簽

其中小程序首頁(yè)可選擇微信提供的原生底部標(biāo)簽分頁(yè)樣式，該樣式僅供小程序首頁(yè)使用。開(kāi)發(fā)時(shí)可自定義圖標(biāo)樣式、標(biāo)簽文案以及文案顏色等，具體設(shè)置項(xiàng)如圖標(biāo)尺寸等可參考開(kāi)發(fā)文檔和WeUI基礎(chǔ)控件庫(kù)。

頂部標(biāo)簽

頂部標(biāo)簽分頁(yè)欄顏色可自定義。在自定義顏色選擇中，務(wù)必注意保持分頁(yè)欄標(biāo)簽的可用性、可視性和可操作性。

3. 頁(yè)腳（Footer組件）

小程序頁(yè)面加載設(shè)計(jì)

1. 加載反饋?zhàn)⒁馐马?xiàng)

• 若載入時(shí)間較長(zhǎng),應(yīng)提供取消操作,并使用進(jìn)度條顯示載入的進(jìn)度。
• 載入過(guò)程中,應(yīng)保持動(dòng)畫(huà)效果 ; 無(wú)動(dòng)畫(huà)效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯(cuò)覺(jué)。
• 不要在同一個(gè)頁(yè)面同時(shí)使用超過(guò)1個(gè)加載動(dòng)畫(huà)。

2. 結(jié)果反饋

除了在用戶等待的過(guò)程中需予以及時(shí)反饋外，對(duì)操作的結(jié)果也需要予以明確反饋。根據(jù)實(shí)際情況，可選擇不同的結(jié)果反饋樣式。對(duì)于頁(yè)面局部的操作，可在操作區(qū)域予以直接反饋，對(duì)于頁(yè)面級(jí)操作結(jié)果，可使用彈出式提示、模態(tài)對(duì)話框或結(jié)果頁(yè)面展示。對(duì)于常用控件，微信設(shè)計(jì)中心將提供控件庫(kù)，其中的控件都已提供完整操作反饋。

3. 啟動(dòng)頁(yè)加載

小程序啟動(dòng)頁(yè)是小程序在微信內(nèi)一定程度上展現(xiàn)品牌特征的頁(yè)面之一。本頁(yè)面將突出展示小程序品牌特征和加載狀態(tài)。頁(yè)面上的其他所有元素如加載進(jìn)度指示，均由微信統(tǒng)一提供。

4. 頁(yè)面下拉刷新加載

在微信小程序內(nèi)，微信提供標(biāo)準(zhǔn)的頁(yè)面下拉刷新加載能力和樣式，開(kāi)發(fā)者無(wú)需自行開(kāi)發(fā)。

3. 全局加載反饋

使用標(biāo)題欄提示加載小程序頁(yè)面內(nèi)容的過(guò)程

開(kāi)發(fā)者可以參考圖中樣式，使用標(biāo)題欄提示加載小程序頁(yè)面內(nèi)容的過(guò)程。例如：

模態(tài)加載

模態(tài)的加載樣式將覆蓋整個(gè)頁(yè)面的，由于無(wú)法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感，因此應(yīng)謹(jǐn)慎使用。除了在某些全局性操作下不要使用模態(tài)的加載。

自定義頁(yè)面內(nèi)容的加載樣式

開(kāi)發(fā)者可在小程序里自定義頁(yè)面內(nèi)容的加載樣式。建議不管是使用在局部還是全局加載，自定義加載樣式都應(yīng)該盡可能簡(jiǎn)潔，并使用簡(jiǎn)單動(dòng)畫(huà)告知用戶加載過(guò)程。

Loadmore組件

4. 局部加載

局部加載反饋即只在觸發(fā)加載的頁(yè)面局部進(jìn)行反饋，這樣的反饋機(jī)制更加有針對(duì)性，頁(yè)面跳動(dòng)小，是微信推薦的反饋方式。例如：

小程序頁(yè)面Content設(shè)計(jì)

小程序頁(yè)面Content設(shè)計(jì)，實(shí)際上就是依據(jù)我們的業(yè)務(wù)設(shè)計(jì)，將小程序組件和我們自己設(shè)計(jì)的組件，按照小程序設(shè)計(jì)規(guī)范與視覺(jué)規(guī)范有序的組合和排版的過(guò)程。

1. 小程序組件庫(kù)

2. 小程序視覺(jué)規(guī)范

字體

微信內(nèi)字體的使用與所運(yùn)行的系統(tǒng)字體保持一致，常用字號(hào)為20, 18, 17, 16,14 13, 11(pt)，使用場(chǎng)景具體如下：

字體顏色

主要顏色：

#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)

主內(nèi)容 Black 黑色，次要內(nèi)容 Grey 灰色；時(shí)間戳與表單缺省值 Light 灰色；大段的說(shuō)明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑。

Light Gray Semi Black  #b2b2b2 #888888 #353535 #000000

藍(lán)色為鏈接用色，綠色為完成字樣色，紅色為出錯(cuò)用色 Press 與 Disable 狀態(tài)分別降低透明度為20%與10%。

Naormal Press（20%） Disabled（10%）  #576b95  #09BB07  #e64340

列表

表單

按鈕

圖標(biāo)

尺寸：100*100 pX

般用于結(jié)果頁(yè)面狀態(tài)提示，根據(jù)結(jié)果的情況選擇對(duì)應(yīng)的icon。

反饋設(shè)計(jì)-Popout

1. 操作反饋

圖標(biāo)型彈出提示

圖標(biāo)型彈出提示適用于輕量級(jí)的成功提示，1.5秒后自動(dòng)消失，并不打斷流程，對(duì)用戶影響較小，適用于不需要強(qiáng)調(diào)的操作提醒，例如成功提示。特別注意該形式不適用于錯(cuò)誤提示，因?yàn)殄e(cuò)誤提示需明確告知用戶，因而不適合使用一閃而過(guò)的彈出式提示。

文字型彈出提示

文字型彈出提示適用于需要輕量化地用文字解釋當(dāng)前狀態(tài)或提醒不嚴(yán)重的錯(cuò)誤。1.5秒后自動(dòng)消失，不打斷流程，對(duì)用戶影響較小。

模態(tài)對(duì)話框

對(duì)于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過(guò)模態(tài)對(duì)話框來(lái)提示，并可附帶下一步操作指引。

結(jié)果頁(yè)（非Popout）

對(duì)于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況，可使用操作結(jié)果頁(yè)來(lái)反饋。這種方式最為強(qiáng)烈和明確的告知用戶操作已經(jīng)完成，并可根據(jù)實(shí)際情況給出下一步操作的指引。

異常狀態(tài)——表單出錯(cuò)（非Popout）

表單報(bào)錯(cuò)，在表單頂部告知錯(cuò)誤原因，并標(biāo)識(shí)出錯(cuò)誤字段提示用戶修改。

2. 足不出戶

模態(tài)對(duì)話框

ActionSheet

△ IOS-ActionSheet Android-ActionSheet

Half-screen Dialog

Picker

Toast

云開(kāi)發(fā)

開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲，無(wú)需搭建服務(wù)器，即可使用云端能力。

云開(kāi)發(fā)為開(kāi)發(fā)者提供完整的原生云端支持和微信服務(wù)支持，弱化后端和運(yùn)維概念，無(wú)需搭建服務(wù)器，使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開(kāi)發(fā)，即可實(shí)現(xiàn)快速上線和迭代，同時(shí)這一能力，同開(kāi)發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。

云開(kāi)發(fā)提供了幾大基礎(chǔ)能力支持：

拓展

小程序開(kāi)源了，weui-wxss、weui.js和react-weui等，可以使用他們進(jìn)行Web頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)，它可以運(yùn)行在任何瀏覽器中。