该文属于【英选 深度】原创系列，点击“英选”蓝字可关注
全文约 4800字 阅读需 8 分钟
自2015年上线至今，英选帮助各类需求方实现过微信公众号无数，所以对于这次微信小程序的重磅发布十分关注。
但英选关注到一个问题，虽然文章介绍铺天盖地，但是还是非常缺少一个全局、直观的预览。小程序适合什么样的场景、应该用来做什么、对行业有什么样的影响，其实我们觉得见仁见智无需多言。
小程序的界面长什么样、具备什么样的实现能力、开发成本能不能降低，这才是大多数创业者最应该关注的。
为此，我们决定从目前已经公开的官方文档入手进行挖掘。
文 | Ivan
编辑 | 钟磊
题图 | 朱俊斌
“临时”的入口打开一个崭新的世界
9月24日，微信公众号的官方公众号推文，告知小程序文档已经发布，地址是：https://mp.weixin.qq.com。
其实这个地址就是微信公众号的开发者文档，目前小程序的文档放置在微信公众号文档首页。但是只有一页作导航入口作用，内容也仅仅是三个文档链接，略显单薄。
微信小程序文档的入口
该页面内容精简，结构独立，几个链接进去后发现“小程序”和“公众号”文档的界面及操作风格迥异。
我猜测，目前仅是暂时放在微信开发者最为熟悉、浏览频率最高的公众号文档之中。一旦有正式的独立大入口（例如微信小程序官网，或者上架微信开放平台），该内容入口则应该会被撤除。微信官方也说过“小程序是与公众号平行的体系”，如若不然，就应该正正经经在公众号文档内与其他内容各分春秋了。
设计和开发一样重要
小程序在这里主要有三篇文档：
小程序开发文档
小程序开发方式的整体介绍，并提供了一个官方范例。如果是受邀体验的开发者，可以扫码进行小程序体验。
小程序设计指南
小程序设计规范方面的规定，从用户体验、元素样式到排版，颇为全面。这里很能体现微信对于小程序的重视以及它的巨大能力，担心若贸然开放而不做限定会导致产品碎片化严重。
小程序开发者工具
详细地介绍了小程序的开发流程、接口功能，并提供了一个官方开发工具。比起公众号被人吐槽的文档，这次文档的全面程度超出期望，颇有成熟开源框架的范儿。
接下来，我们开始介绍三个文档的具体内容。
一、小程序开发文档
文档中开头即提到：
支持调用微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
其实这里举例的几个功能，在之前的公众号开发都能够实现。对我们来说这句话的重点是“原生”——基本可以判断例如导航条、按钮之类的组件其实都是经过微信的中间层进行了原生组件转化，将有效提高页面的渲染速度和运行效率，提供更加接近于原生App的体验。
小程序演示程序
演示程序里面显示了几种新的组件，例如下拉，导航条等。由于小程序还提供了基本类似HTML+CSS这样的组合语言工具，我们对新的组件并不惊讶。只要你能够想到，开发者通过微信提供的开发工具应该还能实现更多的组件。
二、小程序设计指南
微信这次的设计规范更加具体深刻，目前尚不清楚官方是否会规定需要按照微信规范去设计、否则不予上架，但我个人觉得随着生态逐渐成熟，按照微信的强硬管理风格也并非没有可能。
不过从另外一个方面来看，微信提供了一种称作WXSS（CSS是它的子集）的样式定义语言，为用户提供了非常强的样式定制能力，即使限制设计规范也应该不会过于死板。
字体排版样式示例
1、WeUI更新
伴随新的设计样式和组件，微信官方的前端UI框架WeUI也迎来了重大更新，并拥有了独立io域名：https://weui.io。
这次更新还同时提供了包括：
Sketch设计控件库：https://github.com/weui/weui-sketch
Photoshop设计控件库：https://wximg.gtimg.com/shake_tv/mina/WeUI1.0.psd.zip
通过提供设计源文件，设计师可以更加方便地参与到微信小程序设计过程。
为了更好地进行一致性设计，最新的设计源文件里面还提供了相应的字体文件。中文字体使用了苹方（iOS）和思源黑体（Android），英文则是SF UI Display（iOS）与Robot（Android）。
2、用户体验规范
文档里面对用户体验的规范也做了部分定义，什么是好、什么是不好都有说明，文档的阅读体验尚可。
从设计规范中可以瞥到小程序的一些重要视觉特性：
支持顶部导航定义
支持标题栏颜色定义
支持底部导航条
3、层级规范
虽然微信的层级简单也没有酷炫的原生动画，但是这次的页面层级规范依旧让我想起Google Material Design当初推出时的惊艳感。
与微信自身类似，微信小程序4个层级很容易理解：
Popout：弹框
Mask：遮罩层
Navigation：底部导航
Content：内容
层级规范
三、小程序开发者工具
做过微信公众号开发的小伙伴应该都对微信调试的印象十分“深刻”，目前虽然有改进，但依旧复杂，如若再遇到文档内容存在深坑，很容易爬不出来。
小程序的开发文档友好程度有所提升，一些不易理解的地方甚至做了图。虽然标注的样式略显粗糙，但还是能够感觉到诚意。
属性参数的图示解释
1、技术概要
（该部分主要探讨技术，建议不懂技术的朋友跳过阅读）
整个技术选型贴近目前的前端趋势，例如app.json作为app的配置文件，NodeJS作为环境基础。WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。这个语言像ReactNative，又像Vue，语法比较容易理解。WXSS（WeiXin Style Sheets）是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。
这里吐槽下这两个语言的命名：WXML（可扩展标记语言，常用于传递信息。由于性能等原因已被JSON代替）和WXSS（跨站脚本攻击）感觉对开发者来说略有负面情感。
由于阿里在开源领域的一些突出成绩，例如druid、weex，我相信微信也会在开源领域有所推进，小程序的推出或许是腾讯系开源框架和工具的良好开端。
App开发很难受的一个点就是屏幕适配，也由此痛点催生出很多优秀的工具和框架。微信小程序志在原生App体验，相信也是感受到了这个痛点，于是在WXSS里面扩展了两个方便前端做响应式适配的视觉单位。且不论最终效果如何，这样的态度需要点赞。
2、微信Web开发者工具（下称“开发者工具”）
开发者工具主要用于调试，但也具备部分IDE编辑器功能（例如代码补全），自带Chromium的DevTools，微信还另外提供了小程序针对性的调试功能。
微信Web开发者工具，从命名上看有可能一扫之前在开发工具方面的缺失，使用场景将跨越小程序，包括公众号应该也能在这里进行开发和调试。
开发者工具调试界面
开发者工具编辑界面
Appdata Pannel 用于显示当前项目当前时刻 appdata 具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。
Appdata Pannel 实时反馈项目数据
当小程序使用到多窗口的时候，可以在顶部操作区进行页面切换。
小程序多界面快速切换工具
除了开发文档比较友好，从介绍上看开发者工具也是一个用心的产品，会给开发调试带来了不小的便利。
3、略显仓促，小步快跑
除了那么多的褒奖，从文档和工具中其实还是存在稍显仓促的一些问题：
导航的位置有Bug导致无法正常点击（目前已经修复）
多次出现半全角不分，大小写区分的问题（此处应该是“Object”）
开发小工具中的报错信息字体大小不合适
未来已来，春暖花开
开发成本会进一步降低
小程序是微信的一个巨大里程碑，微信对它的重视和野心从文档即可见一斑，从市场的反应可以看出未来其所具备的无限可能性。
由于文档和工具更加完善，学习成本不算高，长久来看开发成本并不会比Web开发高，比起App开发更应该是显得十分具有性价比。
从开发者生态来讲，也是一个长足的进步。以前的微信开发其实是Web开发，现在的小程序开发才是真正的微信原生开发。小程序开发者将会是最近几年追随前端发展趋势的真正受益者，前后端分离在微信小程序的开发过程中会有更加良好的诠释，甚至不排除前端开发者完全脱离后端进行开发的可能性。
小程序与服务号的定位更加清晰
服务号的使用定位其实一直都不清晰，有了小程序则之后会清晰很多。
服务号提供的是应该是内容回复和推送，信息提交，购物支付等。但之前大多数的微信服务号开发过度，导致使用体验差，没法真正留住用户。
由于App作为入口太过昂贵，微信又存在社交红利、用户获取成本较低，所以这样的方案也是大多数创业者不得不的选择。
小程序可以替代80%的App，但是微信做小程序并不是从替代App这个初衷出发，而是为了扩展微信的使用场景。服务号本质是只是提供服务，并不适合相对复杂的应用交互，而小程序就是为了满足这部分的期待而生。
一些猜测
从流出的某张朋友圈截图我们看到张小龙说小程序是不需要安装卸载的，但除此之外官方的就只有文档了。但我从文档之中，依旧做出了一些不成熟但有趣的猜测。
小程序的主要入口会是小程序商店、关注（收藏）和线下扫码
小程序的上架需要经过微信的审核
小程序的代码存储甚至部署在微信提供的云端
小程序的代码是基于网络加载的（起码第一次是）
除了加载速度，小程序的使用体验几乎接近原生App
不同的小程序除了颜色之外界面会非常接近（其实多数App也是）
长久来说，小程序的开发成本相比Web网站将会降低
近期，我们已经用小程序开始了一个很有意思的项目，一旦开放公测，我们就会尽快让大家使用，第一时间体验到小程序的独特价值和功能。
● ● ● 全文完 ● ● ●
英选成立于2015年，通过认证制的自由职业开发者网络，累计已为300多个优秀的创业产品提供了产品开发及设计咨询服务。
如希望了解更多，点击“阅读原文”可以进入官网，或长按下图关注“英选”公众号。
