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

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

比如我们去餐厅吃饭，可能要排队或者点菜，我们不需要下载餐厅的APP，只需要扫描餐厅里的二维码，餐厅的小程序就会弹出来，我们就可以马上在小程序里排队或者点菜。

没错，我们就是张小龙演讲中提到的大众点评订餐团队。

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

我们计划在两个月内推出7个关于小程序的专栏，这个系列文章是我们前端团队在开发小程序时积累的经验，里面不仅有小程序的原理，还有我们在开发过程中遇到的问题和解决办法。

功能介绍

大众点评点餐APP是一个工具，秉承着便捷、易用的初衷，我们设计的第一版“大众点评点餐”APP交互流程非常简单，用户可以在APP内完成选择菜品、确认订单、追踪订单状态的整个点餐流程。

小程序设计

相信这篇文章的很多读者都有过移动开发经验，微信小程序也属于移动应用，应该符合大部分移动端设计规范。

那么从设计上来说，微信小程序、APP、到底有什么区别呢？

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

此外，请注意：

用户首次使用APP时，需要下载离线包，首页需要有加载效果，减少用户感知的等待时间。

小程序会记录用户的状态，当用户再次扫码时，就会打开上一个页面。

小程序最多可以开启5级页面，如果页面层级过深，可能会破坏旧页面。

小程序在渲染长列表的时候可能会出现性能问题，所以最好使用分页。

小程序不支持应用与之间的重定向。

小程序架构

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

View层用于页面结构以及使用渲染。

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

在iOS上，执行应用程序解析和处理的解析器是。

上图中这个任务是由X5JS解析器完成的。

我们使用的开发工具是NW.js+内核。

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

视图层使用WXML和WXSS编写，通过组件的方式展示。

当小程序启动时，会从CDN下载小程序完整包，编译后的小程序包大小被微信限制在1MB以内。

开发与选择

小程序开发和传统HT​​ML5开发有很多区别。例如：

小程序开发目前不支持npm包管理，官方建议将依赖复制到项目中。

小程序视图层的WXML和WXSS文件仍会用于渲染，开发者需要关注不同平台的兼容性。

小程序逻辑层运行环境并未完整支持ES6，开发者需要关注不同平台的兼容性。

小程序的开发者工具在补全、语法检查等方面还不如我们熟悉的IDE（但相信微信团队会做得越来越好）。

可以看到，小程序和我们现在熟悉的前端开发模式有很大的不同，这会在一定程度上影响我们的开发效率。因此：

我们将项目分为开发目录和构建目录，构建目录下有两部分，一部分是需要上传到 CDN 的图片，一部分是小程序的运行代码。

在开发目录中，使用.html 和.css 后缀（以便您可以将项目导入 IDE）。

然后通过 Gulp 处理开发代码并将其写入构建目录。

使用ES6语法，配合，快速检查语法错误。

所有异步请求都被封装起来，以增加代码的可读性并方便错误捕获。

小程序和 PWA

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

PWA 并不是一套全新的标准，而是现有 Web 技术的超集。而微信小程序则可以看作是现有 Web 技术的子集。

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

当然，微信小程序与PWA在实现思路上的差异是如此之大，甚至其本质都有很大区别。

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

本文经智效计划授权转载，关注微信公众号可获得以下内容和服务：

微信后台回复“0109”，一张图片教你如何使用微信小程序。

在微信后台回复任意关键词，即可获得相关小程序推荐，快来试试吧！