酒店快应用开发实践总结

任佳

任佳，2016年入职Qunar，目前在大住宿事业部/大前端/用户产品负责前端开发工作。熟悉hybrid，react native，微信小程序开发，热爱技术，喜欢尝试新技术，研究技术底层实现。

一、什么是快应用

快应用是小米，ov 等 9 大手机厂商发起的项目，它是手机厂商基于硬件平台共同推出的新型应用形态，用户不用下载安装，就能够享受到原生应用性能体验。

快应用使用前端技术栈开发，原生渲染，同时具备 HTML 5 页面和原生应用的双重优点。

从形式上看，快应用很像微信小程序，但是快应用基于手机硬件系统，未来比微信小程序提供更多的能力。

酒店作为全公司快应用首发业务线之一，将在本文中介绍酒店快应用开发中涉及的小程序和快应用提供能力的对比。

二、快应用和小程序使用对比

目前小程序的入口只能通过微信的搜索功能找到。

对于已经打开过的小程序，会在【发现】——【小程序】入口中看到已使用的小程序列表，如下图：

也可以在微信首页中，下拉看到后台正在运行的小程序，如下图：

因此小程序的使用和运行对微信有强依赖。

相比之下，快应用的使用和后台运行更加接近 app。

手机自带的应用商城中可以看到快应用的入口，点击秒开就可以打开选择的快应用，在退出快应用时会弹出提示，此时可以选择将它固定在桌面。因此快应用没有小程序 “用完即走”的枷锁，它可以像 app 一样放到手机桌面。

快应用入口在哪里？

快应用可以在应用商店、浏览器、全局搜索、负一屏等位置推广，各厂商快应用入口不同。以小米手机为例，如下图，快应用入口推广覆盖了用户大部分使用场景。

以下为几大手机厂商入口集合示例：

三、快应用和小程序API对比

关于网络请求

2.关于template模板实现

3.关于数据缓存

1）微信支持缓存同步存取方法：

wx.getStorageSync和wx.setStorageSync。

2）快应用缓存只支持异步存取方法：

storage.get() 和 stroage.set()。

因此依赖缓存存取成功的逻辑需要在 succes 和 fail 的回调函数中调用。

四、快应用和小程序组件对比

快应用对列表的实现方案与小程序有很大不同。

小程序滚动视图通常使用：scroll-view 组件，该组件可以实现对视图滚动方向，锚点定位，滚动条位置以及滚动事件响应等功能。

快应用滚动视图通常使用：list 组件。尤其对于较为复杂结构的列表，为实现更高的性能微信小程序view滚动条，使用 list 组件为最佳实现方案。比如酒店业务的酒店列表，就是用了该组件。

使用list组件时需要注意几个滚动性能优化的问题：

1.设置相同的 type 属性。

2.设置相同的type属性的 list-item 的 dom 结构需要一致。

3.如果相同type属性的 list-item 中使用了条件判断指令控制元素的显示和隐藏，使用show指令，不要使用 if。可以类比理解为元素的 display 属性为 none和元素不在文档流中的区别。

具体的快应用list组件使用方法，请见官方文档

五、快应用和小程序样式对比

六、事件处理机制

七、静态资源

icon字体

快应用目前不支持 iconfont微信小程序view滚动条，因此暂时使用图片代替。

为方便管理，以及后续快应用支持 iconfont 的快速迁移，酒店实现了 icon 组件实现所有 iconfont。

icon 组件的属性如下：

注意：

1.iconfont 图片在 iconfont 平台中获取，由于快应用有 size 限制，因此下载图片前请选择合适的大小并压缩后再使用。

2.为提高 icon 图片的加载速度，酒店将 iconfont 图片放到工程中。

八、版本限制

为便于开发者解决低版本基础库无法兼容新功能的问题，快应用和小程序都支持设置最低版本号。

1.小程序基础库版本限制方法

登录小程序管理后台，进入“设置->基本设置->基础库最低版本设置”进行配置。

小程序的基础库版本号依赖于微信客户端版本，在低于设置版本号客户端中，小程序无法打开，会提示用户更新微信客户端。

2.快应用平台版本限制方法

快应用的最低平台版本号在manifest.json文件中，配置minPlatformVersion值。

当前公共小程序没有设置最低基础库版本号，快应用的最低平台版本号为1000。