作者介绍：周中坚，美团点评工程师，4年 Web 前端开发经验，主要负责过会员卡、外卖、预订、商家平台等业务的前端开发，现在是美团点评点餐团队的一员。如果你看过《张小龙首次全面阐述小程序》这篇文章，一定会对这 ...
|
如果你看过《张小龙首次全面阐述小程序》这篇文章，一定会对这句话有印象："比如我们到一个餐馆，我们可能想排队或者说点一下菜，我们并不需要去下载这个餐馆的应用程序，我们只需要在餐馆扫一下它的二维码，然后就启动了这个餐馆的小程序，我们可以立即在小程序里排队或者点餐。"
没错，我们就是做张小龙在演讲时提到的"点餐"的大众点评点餐团队。我们团队在去年年底开始考虑微信小程序平台，经过快速而慎重的前期调研和讨论，紧张的开发测试，在微信同事的帮助下，"大众点评点餐"小程序于2017年1月上线。
如果你对小程序感兴趣，不妨关注一下这个专栏，我们计划在两个月内推出7篇关于小程序的专栏文章。小程序的这一系列文章是我们前端团队做小程序时积累的经验，里面不仅有小程序的原理，还有我们开发过程中遇到的问题和解决办法。
如果你对前端感兴趣，也不妨关注一下这个专栏，因为小程序只是我们团队很小的一部分产出，我们会持续创作，将我们的经验和大家分享。
功能简介
大众点评点餐小程序是一个工具，本着方便好用的初衷，我们设计的第一版的「大众点评点餐」小程序交互流程非常简单，用户可以在小程序中完成选择菜品，确认下单，追踪订单状态这个完整的点餐流程。
小程序设计
相信这篇文章的很多读者都有移动端开发经验，微信小程序也是移动端应用，也应该符合大部分的移动端的设计规范。那么在设计上，微信小程序和APP、hybrid、h5又有什么区别呢？
首先由于小程序是一个平台，所以平台上的开发者必须要遵守规范，参考微信小程序设计指南。
除此之外，还需要注意：
小程序架构
微信小程序的框架包含两部分：View视图层、App Service逻辑层。
View层用来渲染页面结构，使用WebView渲染。
App Service层用来逻辑处理、数据请求、接口调用，运行环境为：IOS - JSCore, Android - X5 JS解析器, DevTool - nwjs Chrome 内核。 （参考小程序细节点）
视图层和逻辑层通过系统层的JSBridge进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。视图层由 WXML 与 WXSS 编写，由组件来进行展示。
小程序启动时会从CDN下载小程序的完整包，微信官方限制是1M。（编译后）
关于视图层和逻辑层的技术细节，以及小程序的源码解析，我们会单独开章节进行讲解，敬请期待。
开发选型
小程序在开发时和传统的h5开发有许多差异，比如：
可以看到，小程序和我们现在熟悉的前端开发模式还是有不小的区别，一定程度上会影响我们的开发效率。因此：
小程序与PWA
PWA 的全称是 Progressive Web Apps ，是 Google 在2015年提出的概念，是渐进增强理念的一个典型实践。 PWA 不是一套全新的标准，是现有 web 技术的父集。但是微信小程序可以认为是现有 web 技术的一个子集，那为什么要在这里提到 PWA 呢，是因为 PWA 和微信小程序用不同的思路在解决很多共性的问题。
当然，微信小程序和 PWA 在实现思路上的差别也导致了他们有本质上的区别，PWA 是开放的，可分享，可搜索的；而微信小程序是封闭的，仅可在微信内分享，仅可在微信内进行非常有限的搜索，不可以跳转到别的 web 或者 app。
专题预告
第二期：小程序的视图层，介绍两个看似全新的东西WXML和WXSS，从怎么用，到是什么都会讲。 第三期：小程序的逻辑层，介绍小程序的生命周期，运行环境，兼容性等。 第四期：小程序源码解析，介绍如何看小程序的源码，小程序的架构是怎样的，将第二期和第三期的内容关联起来。 第五期：开发小程序踩到的坑，介绍小程序开发和h5开发差异带来了哪些代码设计问题，以及我们是如何解决的。 第六期：小程序的发布与推广，上线之后还需要运维，介绍小程序如何发布、推广、多版本兼容等问题。 第七期：数据采集分析，产品上线之后需要不断迭代，而数据在这个过程中扮演着很重要的角色，介绍小程序如何打点，如何加监控，怎么分析数据。
|
