文 | 周中坚
美团点评工程师,4 年 Web 前端开发经验,主要负责过会员卡、外卖、预订、商家平台等业务的前端开发,现在是美团点评点餐团队的一员。
如果你看过《张小龙首次全面阐述小程序》这篇文章,一定会对这句话有印象:
比如我们到一个餐馆,我们可能想排队或者说点一下菜,我们并不需要去下载这个餐馆的应用程序,我们只需要在餐馆扫一下它的二维码,然后就启动了这个餐馆的小程序,我们可以立即在小程序里排队或者点餐。
没错,我们就是做张小龙在演讲时,提到做「点餐」的大众点评点餐团队。
我们团队在去年年底开始考虑微信小程序平台,经过快速而慎重的调研、讨论、开发、测试,以及在微信同事的帮助下,「大众点评点餐」小程序终于在 2017 年 1 月上线。
我们计划在两个月内,推出 7 篇关于小程序的专栏文章。这一系列文章,是我们前端团队做小程序时的经验之谈。这里面不仅有小程序的原理,还有我们开发过程中遇到的问题和解决办法。
功能简介
大众点评点餐小程序是一个工具,本着方便好用的初衷,我们设计的第一版的「大众点评点餐」小程序交互流程非常简单,用户可以在小程序中完成选择菜品,确认下单,追踪订单状态这个完整的点餐流程。
小程序设计
相信这篇文章的很多读者,都有移动端开发经验。微信小程序也是移动端应用,也应该符合大部分的移动端的设计规范。
那么在设计上,微信小程序和 app、hybrid、HTML 5 又有什么区别呢?
首先由于小程序是一个平台,所以平台上的开发者必须要遵守规范。建议大家参考官方的设计文档。
除此之外,还需要注意:
小程序架构
微信小程序的框架包含两部分:View 视图层、App Service 逻辑层。
View 层用来渲染页面结构,使用 WebView 渲染。
App Service 层用来逻辑处理、数据请求、接口调用。
视图层和逻辑层,通过系统层的 JSBridge 进行通信。逻辑层把数据变化通知到视图层,触发视图层页面更新;视图层把触发的事件通知到逻辑层进行业务处理。
视图层由 WXML 与 WXSS 编写,由组件来进行展示。
小程序启动时,会从 CDN 下载小程序的完整包。编译后的小程序包的大小,被微信官方限制在了 1 MB 以内。
开发选型
小程序开发和传统的 HTML 5 开发,有许多差异。比如:
可以看到,小程序和我们现在熟悉的前端开发模式还是有不小的区别,一定程度上会影响我们的开发效率。因此:
.html
和 .css
后缀(这样就可以将项目导入 IDE 了)。小程序与 PWA
PWA 的全称是 Progressive Web Apps ,是 Google 在 2015 年提出的概念,是渐进增强理念的一个典型实践。
PWA 不是一套全新的标准,是现有 web 技术的父集。但是微信小程序可以认为是现有 web 技术的一个子集。
那为什么要在这里提到 PWA 呢?是因为 PWA 和微信小程序用不同的思路在解决很多共性的问题。
当然,在实现思路上,微信小程序和 PWA 的差别非常大,甚至让二者的本质变得非常不同。
PWA 是开放的,可分享,可搜索的;而微信小程序是封闭的,仅可在微信内分享,仅可在微信内进行非常有限的搜索,不可以跳转到别的 web 或者 app。
本文由知晓程序授权转载,关注微信号 zxcx0101,可获得以下内容和服务: