# 「大众点评点餐」小程序开发经验 01：概述

- 作者：知晓程序
- 发布时间：2017-03-12 11:56
- 原文：https://www.ifanr.com/minapp/799963

![](https://s3.ifanr.com/wp-content/uploads/2017/03/Featured-12.jpg)

文 \| 周中坚

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

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

> 比如我们到一个餐馆，我们可能想排队或者说点一下菜，我们并不需要去下载这个餐馆的应用程序，我们只需要在餐馆扫一下它的二维码，然后就启动了这个餐馆的小程序，我们可以立即在小程序里排队或者点餐。

没错，我们就是做张小龙在演讲时，提到做「点餐」的大众点评点餐团队。

我们团队在去年年底开始考虑微信小程序平台，经过快速而慎重的调研、讨论、开发、测试，以及在微信同事的帮助下，「大众点评点餐」小程序终于在 2017 年 1 月上线。

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

### 功能简介

大众点评点餐小程序是一个工具，本着方便好用的初衷，我们设计的第一版的「大众点评点餐」小程序交互流程非常简单，用户可以在小程序中完成选择菜品，确认下单，追踪订单状态这个完整的点餐流程。

![](https://s3.ifanr.com/wp-content/uploads/2017/03/Artboard.jpg)

### 小程序设计

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

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

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

除此之外，还需要注意：

- 用户首次使用要下载离线包，首页需要加载效果，以降低用户等待的时间感知。
- 小程序会记录用户的状态，当用户再次扫码时会打开之前的页面。
- 小程序最多可以打开 5 级页面，如果页面层级过深，旧的页面可能会被销毁。
- 小程序渲染长列表可能有性能问题，最好做分页。
- 小程序不支持与 app、HTML 5 之间的跳转。

### 小程序架构

微信小程序的框架包含两部分：View 视图层、App Service 逻辑层。

View 层用来渲染页面结构，使用 WebView 渲染。

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

- 在 iOS 上，执行 App Service 解析与处理操作的解析器是 JSCore。
- 而在 Android 上，这个任务由 X5 JS 解析器完成。
- 我们使用的开发者工具，则是 NW.js + Chrome 内核。

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

视图层由 WXML 与 WXSS 编写，由组件来进行展示。

![](https://s3.ifanr.com/wp-content/uploads/2017/03/Artboard-1.jpg)

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

![](https://s3.ifanr.com/wp-content/uploads/2017/03/Artboard-2.jpg)

### 开发选型

小程序开发和传统的 HTML 5 开发，有许多差异。比如：

- 小程序开发暂不支持 NPM 包管理方式，官方推荐是将依赖拷贝到项目中。
- 小程序视图层的 WXML 和 WXSS 文件，还是会使用 webview 进行渲染，开发者需要关心在不同平台上的兼容性。
- 小程序逻辑层的运行环境，对 ES6 的支持并不完美。开发者需要关心在不同平台上的兼容性。
- 小程序的开发者工具在补全、语法检查等方面还不如我们熟悉的 IDE（但相信微信团队会越做越好）。

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

- 我们将工程分为开发目录和构建目录，构建目录有两部分，一部分是将要上传到 CDN 的图片，一部分是小程序的运行代码。
- 在开发目录中，使用 `.html` 和 `.css` 后缀（这样就可以将项目导入 IDE 了）。
- 再通过 Gulp 将开发代码进行处理，再写入到构建目录中。
- 使用 ES6 语法，配合 Eslint，快速检查语法错误。
- 所有异步请求使用 Promise 封装，增加代码可读性，便于捕捉错误。

### 小程序与 PWA

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

PWA 不是一套全新的标准，是现有 web 技术的父集。但是微信小程序可以认为是现有 web 技术的一个子集。

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

![](https://s3.ifanr.com/wp-content/uploads/2017/03/sheetsforcompare-jpg.jpg)

当然，在实现思路上，微信小程序和 PWA 的差别非常大，甚至让二者的本质变得非常不同。

PWA 是开放的，可分享，可搜索的；而微信小程序是封闭的，仅可在微信内分享，仅可在微信内进行非常有限的搜索，不可以跳转到别的 web 或者 app。

**本文由知晓程序授权转载，关注微信号 zxcx0101，可获得以下内容和服务：**

- 在微信后台回复「0109」，一张图教你玩转微信小程序。
- 在微信后台回复任意关键词，还能获得相关小程序推荐，赶紧试试吧！

![zxcx_0208](https://s3.ifanr.com/wp-content/uploads/2017/02/zxcx_0208.png)