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

文 | 周中坚

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

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

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

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

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

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

功能简介

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

小程序设计

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

那么在设计上,微信小程序和 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 编写,由组件来进行展示。

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

开发选型

小程序开发和传统的 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 和微信小程序用不同的思路在解决很多共性的问题。

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

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

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

  • 在微信后台回复「1228」,获取全网首本《微信小程序入门指南》。
  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-03-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后端之路

来跳一跳啊

背景 趁着午饭过程中给大家稍微看看程序员的技巧~ 跳一跳是目前比较火的社交类的小游戏,在微信某个版本更新之后小伙伴就对该游戏产生了魔性的刷分需求!!! 包括淘宝...

2835
来自专栏情醉中国风

基于云安全环境的最佳实践

无论您是打算使用托管服务来处理你们组织的云安全,还是决定创建管理自己的安全项目,至少,将所需的所有信息汇总起来就可能是一项复杂的任务了。为了解决这个问题,我们想...

1999
来自专栏李成熙heyli

性能优化三部曲之一——构建篇

背景: 接手新项目,发现项目最基本的文件压缩没有,离线包有多余文件,md5也并没有做好, 构建是用coffeescript写的,维护成本及交接成本大,关键的是,...

2207
来自专栏DevOps时代的专栏

移动端持续集成的落地

我今天给大家分享的主题主要是移动端持续集成的移动端落地。先给大家介绍一下我的一些背景,大概做了十年左右的软件的质量研发,还有DevOps 的一些工作。然后经历了...

561
来自专栏腾讯移动品质中心TMQ的专栏

【UTP自动化测试平台系列之终章】前端探索之路

UTP自动化测试平台是TMQ的一个联合项目,目的是方便大家更好地开展自动化测试建设工作,减少重复平台建设的成本,提高产品的自动化测试效率。但是随着项目规模与用户...

36511
来自专栏FreeBuf

看我如何在前期踩点过程中发现价值$4500的漏洞

首先,我用来测试子域名漏洞的工具是Aquatone(洛克希德U2侦察机代号也叫这个),这个工具非常好用,可算是众多白帽的必备利器了。非常幸运的是,我不经意地用它...

726
来自专栏云计算D1net

云存储比你的电脑或外部驱动器更好?

什么是云存储? 云存储,就是可以向你的数据存储在远端的服务器上。 这意味着你可以通过远程存储如文档,照片,音乐和视频等数据,而不必占用物理空间或家里和公司的计算...

2555
来自专栏非著名程序员

如何让你的开发效率提升 3 倍?

编程大牛、《Java 编程思想》一书的作者 Bruce Eckel 曾说过:在这个领域做得越多,我越觉得软件开发比任何行业都更接近于写作。

721
来自专栏华章科技

首席工程师揭秘:LinkedIn大数据后台是如何运作的

原文链接:https://engineering.linkedin.com/distributed-systems/log-what-every-softwar...

683
来自专栏架构师小秘圈

存储的瓶颈--大型网站技术演进思考

作者:夏天的森林 出处:cnblogs.com/sharpxiajun/p/4237704.html 一,题记 前不久公司请来了位互联网界的技术大牛跟我们做了一...

3628

扫码关注云+社区