乾貨：小程式開發文件和設計指南要點詳解

本文主要針對微信官方發布的開發文件和設計指南進行詳解：

小程式開發文件

小程式開發方式的整體介紹，並提供了一個官方範例。如果是受邀體驗的開發者，可以掃碼進行小程式體驗。

小程式設計指南

小程式設計規範方面的規定，從使用者體驗、元素樣式到排版，相當全面。這裡很能體現微信對於小程式的重視以及它的巨大能力，擔心若貿然開放而不做限定會導致產品碎片化嚴重。

接下來，我們開始介紹兩個文件的具體內容。

一、小程式開發文件

文件中開頭即提到：

支援呼叫微信原生API，可以方便的調起微信提供的能力，如取得用戶信息，本地存儲，支付功能等。

其實這裡舉例的幾個功能，在之前的公眾號開發都能夠實現。對我們來說這句話的重點是「原生」——基本上可以判斷例如導航條、按鈕之類的組件其實都是經過微信的中間層進行了原生組件轉化，將有效提高頁面的渲染速度和運行效率，提供更加接近原生App的體驗。

示範程式裡面顯示了幾種新的元件，例如下拉，導航條等。由於小程式也提供了基本類似HTML+CSS這樣的組合語言工具，我們對新的元件並不驚訝。只要你能想到，開發者透過微信提供的開發工具應該還能實現更多的元件。

二、小程式設計指南

微信這次的設計規範更加具體深刻，目前尚不清楚官方是否會規定需要按照微信規範去設計、否則不予上架，但我個人覺得隨著生態逐漸成熟，依照微信的強硬管理風格也並非沒有可能。

不過從另一個面向來看，微信提供了一種稱作WXSS（CSS是它的子集）的樣式定義語言，為使用者提供了非常強的樣式自訂能力，即使限制設計規範也應該不會過於死板。

1、WeUI更新

伴隨新的設計樣式和元件，微信官方的前端UI框架WeUI也迎來了重大更新，並擁有了獨立io網域：https: //weui.io。

這次更新也同時提供了包含：

Sketch設計控制項庫：https://github.com/weui/weui-...

#Photoshop設計控制庫：https://wximg.gtimg.com/shake...

透過提供設計原始檔，設計師可以更方便地參與微信小程式設計過程。

為了更好地進行一致性設計，最新的設計原始檔裡面也提供了對應的字體檔案。中文字體使用了蘋方（iOS）和思源黑體（Android），英文則是SF UI Display（iOS）與Robot（Android）。

2、使用者體驗規格

文件裡面對使用者體驗的規格也做了部分定義，什麼是好、什麼是不好都有說明，文檔的閱讀體驗尚可。

從設計規格可以瞥見小程式的一些重要視覺特性：

3、層級規格

雖然微信的層級簡單也沒有酷炫的原生動畫，但這次的頁面層級規範依舊讓我想起Google Material Design當初推出時的驚艷感。

與微信本身類似，微信小程式4個層級很容易理解：

更多乾貨：小程式開發文件與設計指南要點詳解相關文章請關注PHP中文網！