写在前面

最近闲来无事，花时间捣鼓了一下微信小程序。
微信小程序是个什么东东呢？看看官方对小程序的定义：

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

有几个词比较关键了：全新的方式、出色的用户体验。工程师的好奇心驱动，小程序和传统的 web 页有什么不一样可以达到这种效果呢？技术上如何实现呢？小程序究竟是 web 还是 native?带着诸多问题，开始了小程序的探索之旅。

开发一个小程序

要想明白小程序到底是个什么东东，咱先动手开发一个小程序。开发步骤按照官方文档说明操作即可，这里简单罗列下步骤。

开发步骤

1. 申请账号, 点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，注册自己的小程序帐号；
2. 获取 AppId, 用自己的账号登录小程序后台管理平台，然后在菜单 “设置”-“开发设置” 中可以查看；
3. 安装开发工具，前往 开发者工具下载页面；
4. 打开微信开发工具，创建项目，编码。

步骤比较粗略，如果不太明白的可以参照官方文档, 图文并茂，非常详细。

代码构成

小程序包含了几种类型的文件：

• .json 后缀的 JSON 配置文件，如 app.json/project.config.json/page.json, 根据命名大致能猜到他们的作用，分别用于配置小程序、开发工具、页面配置
• .wxml 后缀的 WXML 模板文件，可以简单理解为 web 开发中的 html, 他们定位很类似，都是用于表示页面的结构，但是在语法上还是有些不同，在写 html 的时候会经常用到 div/span, 但是在 wxml 中就没有这些标签，而是小程序官方提供的 view/text 等
• .wxss 后缀的 WXSS 样式文件，可以简单理解为 web 开发中的 css, 都是用于描述元素样式，但是还是有一些不同需要注意：1) wxss 只支持部分 css 选择器；2) wxss 提供了新的单位 rpx, 该单位可以根据屏幕宽度进行自适应
• .js 后缀的 JS 脚本逻辑文件，可以理解为 web 开发中 javascript, 基本一样，没有太大不同

Code 阶段

明白了小程序代码结构之后说干就干，第一个小程序选择了天气预报这样一个简单实用的产品，code 前需要解决两个问题：

1. 产品/UI 设计，这块借鉴了主流天气 APP 的 UI，没有遇到太大问题；
2. 数据接口，这块图快、省事，就没自己单独写 API 接口，调用的第三方接口，这块需要注意的是将自己请求的接口在小程序管理后台 - 开发设置 - 服务器域名进行配置，不然无法发送请求。
   解决 UI 和接口的问题之后就可以愉快地写代码了，开发体验和主流的 MV* 框架差不多，数据驱动，通过数据响应式修改页面 UI, 之前有 react native/vue/react 开发经验，上手还是很快的，不过这块需要注意的是需要熟悉官方提供的组件和 API, 不能想当然的去使用 div/span，开发过程中可以使用开发者工具提供的预览功能，在真机上调试，真机上可以开启 debug 模式，开启之后会有一个 vConsole, 方便调试。

完成之后的效果图。

这里就不展开如何写代码了，已经将这个项目的代码开源，托管于 github 上，感兴趣的同学可以在 github 上查看。

上线

步骤如下：

1. 使用开发者工具上传代码，然后填写版本号以及项目备注；
2. 上传成功后，登录小程序管理后台 - “开发管理” - “开发版本” 就可以找到刚提交上传的版本；
3. 选择你提交的版本提交审核，审核还是比较快的（有可能我的小程序比较简单，几个小时就好了）；
4. 审核通过后，点击发布即可。

上线后的小程序二维码，可以体验下。

后续

可以在小程序管理后台中查看运营数据，进行相应优化。

总结

体验了从 0 到 1 开发小程序之后，有一些感想：

1. 开发门槛低，对开发者友好，简单易上手，开发成本低；
2. 用户体验不错，相较于 wap 页面拥有更流畅的体验，几乎和 native 体验差不多（iOS上的开发体验），加载速度快；

总的来说，小程序结合了 native 和 wap 的优点，还是大有可为的。”授人以鱼不如授人以渔“，后面再花时间专门介绍小程序的底层实现。