大众点评点餐小程序开发经验 - 概述

做者介绍：周中坚，美团点评工程师，4年 Web 前端开发经验，主要负责过会员卡、外卖、预订、商家平台等业务的前端开发，如今是美团点评点餐团队的一员。

若是你看过《张小龙首次全面阐述小程序》这篇文章，必定会对这句话有印象："好比咱们到一个餐馆，咱们可能想排队或者说点一下菜，咱们并不须要去下载这个餐馆的应用程序，咱们只须要在餐馆扫一下它的二维码，而后就启动了这个餐馆的小程序，咱们能够当即在小程序里排队或者点餐。"

没错，咱们就是作张小龙在演讲时提到的"点餐"的大众点评点餐团队。咱们团队在去年年末开始考虑微信小程序平台，通过快速而慎重的前期调研和讨论，紧张的开发测试，在微信同事的帮助下，"大众点评点餐"小程序于2017年1月上线。

若是你对小程序感兴趣，不妨关注一下这个专栏，咱们计划在两个月内推出7篇关于小程序的专栏文章。小程序的这一系列文章是咱们前端团队作小程序时积累的经验，里面不只有小程序的原理，还有咱们开发过程当中遇到的问题和解决办法。

若是你对前端感兴趣，也不妨关注一下这个专栏，由于小程序只是咱们团队很小的一部分产出，咱们会持续创做，将咱们的经验和你们分享。

功能简介

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

菜单页

购物车页

订单详情页

小程序设计

相信这篇文章的不少读者都有移动端开发经验，微信小程序也是移动端应用，也应该符合大部分的移动端的设计规范。那么在设计上，微信小程序和APP、hybrid、h5又有什么区别呢？

首先因为小程序是一个平台，因此平台上的开发者必需要遵照规范，参考微信小程序设计指南。

除此以外，还须要注意：

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

小程序架构

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

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

App Service层用来逻辑处理、数据请求、接口调用，运行环境为：IOS - JSCore, Android - X5 JS解析器, DevTool - nwjs Chrome 内核。 （参考小程序细节点）

视图层和逻辑层经过系统层的JSBridge进行通讯，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。视图层由 WXML 与 WXSS 编写，由组件来进行展现。

小程序启动时会从CDN下载小程序的完整包，微信官方限制是1M。（编译后）

关于视图层和逻辑层的技术细节，以及小程序的源码解析，咱们会单独开章节进行讲解，敬请期待。

开发选型

小程序在开发时和传统的h5开发有许多差别，好比：

• 小程序开发暂不支持 npm 包管理方式，官方推荐是将依赖拷贝到项目中；
• 小程序视图层的 wxml 和 wxss 仍是会使用 webview 进行渲染，开发者须要关心在不一样平台上的兼容性；
• 小程序逻辑层的运行环境对 es6 的支持并不完美，开发者须要关心在不一样平台上的兼容性；
• 小程序的开发者工具在补全、语法检查等方面还不如咱们熟悉的 ide (相信微信团队会越作越好)。

能够看到，小程序和咱们如今熟悉的前端开发模式仍是有不小的区别，必定程度上会影响咱们的开发效率。所以：

• 咱们将工程分为开发目录和构建目录，构建目录有两部分，一部分是将要上传到CDN的图片，一部分是小程序的运行代码。在开发目录中使用 html 和 less 后缀（这样就可使用 ide 的各类插件了）再经过 gulp 将开发代码进行处理，再写入到构建目录中。
• 使用 es6 语法，配合 eslint，快速检查语法错误。参考微信小程序文档-ES6 APi 支持状况。
• 全部异步请求使用 promise 封装，增长代码可读性，便于捕捉错误。

小程序与PWA

PWA 的全称是 Progressive Web Apps ，是 Google 在2015年提出的概念，是渐进加强理念的一个典型实践。
PWA 不是一套全新的标准，是现有 web 技术的父集。可是微信小程序能够认为是现有 web 技术的一个子集，那为何要在这里提到 PWA 呢，是由于 PWA 和微信小程序用不一样的思路在解决不少共性的问题。

	PWA	微信小程序
离线访问	service worker	用户下载离线包，缓存用户上次使用的状态
类原生应用	使用 app shell 使页面更快；使用 Web App Manifest 配置基本信息；有设计规范	离线视图层，逻辑层触发页面更新，性能高于通常 web 应用；使用 app.json 和 page.json 配置基本信息；有设计规范
可安装	可添加到主屏幕	android 用户可添加到主屏幕
持续更新	经过 service worker 更新	打开时进行版本检查，若是须要就下载新的离线包
安全	使用 HTTPS	使用 HTTPS

固然，微信小程序和 PWA 在实现思路上的差异也致使了他们有本质上的区别，PWA 是开放的，可分享，可搜索的；而微信小程序是封闭的，仅可在微信内分享，仅可在微信内进行很是有限的搜索，不能够跳转到别的 web 或者 app。

专题预告

第二期：小程序的视图层，介绍两个看似全新的东西WXML和WXSS，从怎么用，到是什么都会讲。
第三期：小程序的逻辑层，介绍小程序的生命周期，运行环境，兼容性等。
第四期：开发小程序踩到的坑，介绍小程序开发和h5开发差别带来了哪些代码设计问题，以及咱们是如何解决的。
第五期：小程序源码解析，介绍如何看小程序的源码，小程序的架构是怎样的，将第二期和第三期的内容关联起来。
第六期：数据采集分析，产品上线以后须要不断迭代，而数据在这个过程当中扮演着很重要的角色，介绍小程序如何打点，如何加监控，怎么分析数据。
第七期：小程序的发布与推广，上线以后还须要运维，介绍小程序如何发布、推广、多版本兼容等问题。

最后介绍一下咱们团队：友爱活泼，崇尚自由，对新技术热衷而不盲目。