干货：小程序开发文档和设计指南要点详解

程序员文章站 2022-03-07 10:23:25

...

本文主要对微信官方发布的开发文档和设计指南进行详解：

小程序开发文档

小程序开发方式的整体介绍，并提供了一个官方范例。如果是受邀体验的开发者，可以扫码进行小程序体验。

小程序设计指南

小程序设计规范方面的规定，从用户体验、元素样式到排版，颇为全面。这里很能体现微信对于小程序的重视以及它的巨大能力，担心若贸然开放而不做限定会导致产品碎片化严重。

接下来，我们开始介绍两个文档的具体内容。

一、小程序开发文档

文档中开头即提到：

支持调用微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

其实这里举例的几个功能，在之前的公众号开发都能够实现。对我们来说这句话的重点是“原生”——基本可以判断例如导航条、按钮之类的组件其实都是经过微信的中间层进行了原生组件转化，将有效提高页面的渲染速度和运行效率，提供更加接近于原生App的体验。

演示程序里面显示了几种新的组件，例如下拉，导航条等。由于小程序还提供了基本类似HTML+CSS这样的组合语言工具，我们对新的组件并不惊讶。只要你能够想到，开发者通过微信提供的开发工具应该还能实现更多的组件。

二、小程序设计指南

微信这次的设计规范更加具体深刻，目前尚不清楚官方是否会规定需要按照微信规范去设计、否则不予上架，但我个人觉得随着生态逐渐成熟，按照微信的强硬管理风格也并非没有可能。

不过从另外一个方面来看，微信提供了一种称作WXSS（CSS是它的子集）的样式定义语言，为用户提供了非常强的样式定制能力，即使限制设计规范也应该不会过于死板。

1、WeUI更新

伴随新的设计样式和组件，微信官方的前端UI框架WeUI也迎来了重大更新，并拥有了独立io域名：https://weui.io。

这次更新还同时提供了包括：

通过提供设计源文件，设计师可以更加方便地参与到微信小程序设计过程。

为了更好地进行一致性设计，最新的设计源文件里面还提供了相应的字体文件。中文字体使用了苹方（iOS）和思源黑体（Android），英文则是SF UI Display（iOS）与Robot（Android）。

2、用户体验规范

文档里面对用户体验的规范也做了部分定义，什么是好、什么是不好都有说明，文档的阅读体验尚可。

从设计规范中可以瞥到小程序的一些重要视觉特性：

3、层级规范

虽然微信的层级简单也没有酷炫的原生动画，但是这次的页面层级规范依旧让我想起Google Material Design当初推出时的惊艳感。

与微信自身类似，微信小程序4个层级很容易理解：

更多干货：小程序开发文档和设计指南要点详解相关文章请关注PHP中文网！