资讯专栏INFORMATION COLUMN

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

blair / 3382人阅读

摘要:本文主要对微信官方发布的开发文档和设计指南进行详解小程序开发文档小程序开发方式的整体介绍,并提供了一个官方范例。一小程序开发文档文档中开头即提到支持调用微信原生,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。

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

小程序开发文档

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

小程序设计指南

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

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

一、小程序开发文档

文档中开头即提到:

支持调用微信原生 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个层级很容易理解:

Popout:弹框

Mask:遮罩层

Navigation:底部导航

Content:内容

「H5程序俱乐部」是一个专注微信小程序学习交流,相关外包/招聘需求信息发布的微信公众号。

「H5程序俱乐部」微信号:wxappclub 或者 微信扫一扫关注

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/55775.html

相关文章

  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    seanlook 评论0 收藏0
  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0
  • 新增线下、APP、公众号多处入口,小程会再火起来么?(内有福利)

    摘要:之前开发者们追捧小程序的重要原因就是在于认为这可能是下一个微信公众号体量的流量入口,因为大家都想从微信的亿多用户中收获自己的一部分用户。小结来说,还是看好这波能力开放所给小程序生态带来的新用户。 推荐理由:前段时间部分开发者不太看好小程序,认为小程序过于克制,不支持用户留存,也不支持分享到朋友圈,线上二维码等为小程序导流;而这次开放个人开发者注册,还会不会再次点燃开发者们的激情了;今天...

    wangym 评论0 收藏0
  • 新增线下、APP、公众号多处入口,小程会再火起来么?(内有福利)

    摘要:之前开发者们追捧小程序的重要原因就是在于认为这可能是下一个微信公众号体量的流量入口,因为大家都想从微信的亿多用户中收获自己的一部分用户。小结来说,还是看好这波能力开放所给小程序生态带来的新用户。 推荐理由:前段时间部分开发者不太看好小程序,认为小程序过于克制,不支持用户留存,也不支持分享到朋友圈,线上二维码等为小程序导流;而这次开放个人开发者注册,还会不会再次点燃开发者们的激情了;今天...

    cnio 评论0 收藏0
  • 新增线下、APP、公众号多处入口,小程会再火起来么?(内有福利)

    摘要:之前开发者们追捧小程序的重要原因就是在于认为这可能是下一个微信公众号体量的流量入口,因为大家都想从微信的亿多用户中收获自己的一部分用户。小结来说,还是看好这波能力开放所给小程序生态带来的新用户。 推荐理由:前段时间部分开发者不太看好小程序,认为小程序过于克制,不支持用户留存,也不支持分享到朋友圈,线上二维码等为小程序导流;而这次开放个人开发者注册,还会不会再次点燃开发者们的激情了;今天...

    justjavac 评论0 收藏0

发表评论

0条评论

blair

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<