美团点评工程师，4年Web前端开发经验。曾主要负责会员卡、外卖、预​​订、商户平台等业务的前端开发。他现在是美团点评订购团队的成员。

如果你读过《张小龙首次全面阐述小程序》这篇文章，你一定会对这句话印象深刻：

例如，当我们去一家餐馆时，我们可能想要排队或点餐。我们不需要下载餐厅的应用程序。我们只需要在餐厅扫描二维码，然后启动餐厅的小程序即可。 ，我们可以在小程序中立即排队或点餐。

没错，我们就是张小龙演讲中所说的“点餐”的大众点评点餐团队。

我们团队去年年底就开始考虑微信小程序平台。经过快速、细致的调研、讨论、开发、测试，并在微信同事的帮助下，“大众订餐”小程序终于于2017年1月上线。

我们计划在两个月内推出7个小程序专栏。本系列文章是我们前端团队在制作小程序时积累的经验。它不仅包含了小程序的原理，还包含了我们在开发过程中遇到的问题和解决方案。

功能介绍

大众点评点餐小程序是一个工具。秉着方便易用的初衷，我们设计了第一版“大众订餐”小程序，交互流程非常简单。用户可以在小程序中完成菜品的选择并确认。订购并跟踪订单状态的完整订购流程。

小程序设计

相信本文的很多读者都有移动开发经验。微信小程序也是移动应用程序，应该符合大多数移动设计规范。

那么在设计上，微信小程序和app、HTML 5有什么区别呢？

首先，因为小程序是一个平台，平台上的开发者必须遵守规定。建议您参考官方设计文档。

此外，您还需要注意：

小程序架构

微信小程序的框架由两部分组成：View层和App逻辑层。

View层用于渲染页面结构，使用渲染的方式。

App层用于逻辑处理、数据请求、接口调用。

视图层和逻辑层通过系统层进行通信。逻辑层通知视图层数据变化并触发视图层页面更新；视图层将触发的事件通知给逻辑层进行业务处理。

视图层采用WXML和WXSS编写，通过组件显示。

小程序启动时，会从CDN下载小程序的完整包。微信官方将编译后的小程序包大小限制为1MB。

开发与选型

小程序开发和传统的HTML 5开发有很多区别。例如：

可见，小程序和我们现在熟悉的前端开发模式还是有很大的区别的，这会在一定程度上影响我们的开发效率。所以：

小程序和 PWA

PWA的全称是Web Apps。它是2015年提出的概念，是渐进增强理念的典型实践。

PWA 并不是一套全新的标准，而是现有 Web 技术的父集。但微信小程序可以被视为现有网络技术的一个子集。

那么为什么这里要提到PWA呢？这是因为PWA和微信小程序用不同的思路来解决很多常见的问题。

当然，在实现思路上，微信小程序和PWA有很大不同，甚至让两者的本质有很大不同。

PWA 是开放的、可共享的、可搜索的；而微信小程序是封闭的，只能在微信内分享，只能在微信内进行非常有限的搜索，不能跳转到其他网页或应用程序。

本文经知乎程序授权转载。关注微信ID即可获取以下内容和服务：