用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 运营/产品 查看内容

大众点评点餐-微信小程序开发经验《一》

天下雪 2017-2-21 00:06

作者介绍:周中坚,美团点评工程师,4年 Web 前端开发经验,主要负责过会员卡、外卖、预订、商家平台等业务的前端开发,现在是美团点评点餐团队的一员。如果你看过《张小龙首次全面阐述小程序》这篇文章,一定会对这 ...

作者介绍:周中坚,美团点评工程师,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开发差异带来了哪些代码设计问题,以及我们是如何解决的。
第六期:小程序的发布与推广,上线之后还需要运维,介绍小程序如何发布、推广、多版本兼容等问题。
第七期:数据采集分析,产品上线之后需要不断迭代,而数据在这个过程中扮演着很重要的角色,介绍小程序如何打点,如何加监控,怎么分析数据。

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

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 美团点餐 来自: 原文地址

相关阅读