Public comment ordering -微信小程序 development experience《一》

The author introduces: Zhou Zhongjian, Meituan Review Engineer, 4 years of web front-end development experience, mainly responsible for the front-end development of membership cards, take-out, reservation, business platform and other services, is now a member of the US group review ordering team.

If you have read《张小龙首次全面阐述小程序》this article, you will definitely be impressed with this sentence: 'If we go to a restaurant, we might want to queue or order a dish, we don't need to download the app for this restaurant, we Just swipe its QR code in the restaurant, then 汇海 the 小程序 of the restaurant, we can immediately line up or order in 小程序. '

That's right, we are the public commentary à la carte team that Zhang Xiaolong mentioned in the speech. Our team started to consider the 微信小程序 platform at the end of last year. After quick and deliberate preliminary research and discussion, the intense development test, with the help of 微信 colleagues, the 'Popular Review Order' 小程序 was launched in January 2017.

If you are interested in 小程序, you may wish to take a look at this column. We plan to launch 7 columns on 小程序 in two months. This series of articles from 小程序 is the experience accumulated by our front-end team when doing 小程序. There are not only the principle of 小程序, but also the problems and solutions encountered in our development process.

If you are interested in the front end, you may wish to pay attention to this column, because 小程序 is only a small part of our team's output, we will continue to create and share our experience with you.

功能简介

xx 公开评论订购小程序是一个工具。在方便易用的初衷中，我们设计了第一版“公众评论订购”小程序的互动过程非常简单，用户可以在小程序中完成菜品的选择，确认订单，跟踪订单状态是否完整订购流程。

菜单页

购物车页面

订单详细信息页面

小程序设计

我相信这篇文章的很多读者都有移动开发经验，微信小程序也是一个移动应用程序，它也应该满足大多数移动设计规范。那么在设计中，微信小程序和APP，hybrid，h5有什么区别？

首先，由于小程序是一个平台，平台上的开发人员必须遵循规范。请参阅微信小程序设计指南。

另外，你需要注意：

用户第一次想要下载离线包时，主页需要添加加载效果以减少用户等待时的感知时间。 小程序将记录用户的状态，当用户再次扫描代码时，将打开上一页。 小程序最多可以打开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和较少的后缀（这样你就可以使用ide的各种插件），然后使用gulp处理开发代码并将其写入构建目录。将es6语法与eslint一起使用可以快速检查语法错误。请参阅微信小程序文档 - ES6 APi支持。所有异步请求都使用promise封装来提高代码可读性并便于捕获错误。

小程序与PWA

PWA的全称是Progressive Web Apps，这是Google在2015年推出的一个概念，是逐步增强的典型做法。 PWA不是新标准，是现有Web技术的父级。但是微信小程序可以被认为是现有Web技术的一个子集，所以我们为什么要在这里提到PWA，因为PWA和微信小程序使用不同的想法来解决许多常见设计软件

性问题。 PWA微信小程序离线访问