文章来自微信公众号:前端工坊(fe_workshop),不定期更新有趣、好玩的前端相关原创技术文章。如果喜欢,请关注公众号:前端工坊
版权归公众号所有,转载请注明出处。 作者: xdooi
什么是快应用
- 快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。
- 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。
- 快应用具备传统APP完整的应用体验,无需安装、即点即用。
快应用和微信小程序的区别
- 开发环境:快应用需要自行安装配置一系列环境及调试工具,而小程序只需一个开发者工具即可,这一点小程序胜。
- 开发体验:快应用的语法和vue1很像,而小程序有着自己一套语法规范,相对来讲,快应用会更容易上手。
- 程序包大小:小程序4M,快应用1M,这一点确实有点局限,但小程序也是从1M变成4M的
- 能力:小程序和快应用在安卓端都可以添加快捷方式到桌面,但不同的是,快应用属于系统级应用,与微信同级,能调用更多系统级API,体验上会更优于小程序,这一点是后者所不能比的。
- 其他:小程序上架发布流程较为简单,快应用需要逐家关联开发者权限,这方面有点捉急...不过对于企业账号已有的安卓渠道来说,也没什么门槛。
(本段引自微信公众号:豌豆公主前端研发)
前端开发技术效率对比
快应用开发体验
开发环境安装 参考文档
nodejs安装
需安装6.0以上版本的nodejs,官方推荐使用v6.11.3 LTS版本,不建议使用8.0.*版本,这个版本有不兼容,会引起报错。
hap-toolkit安装
在命令行中通过npm命令行安装hap-toolkit
npm install -g hap-toolkit
在命令行中输入hap -V 会输出版本信息表示hap-toolkit安装成功
hap -V
创建一个新的项目 参考文档
搭建好环境后,开发者就可以利用全局hap命令创建一个项目模板,如下所示,其中<ProjectName>为自定义的项目名称
hap init <ProjectName>
至此我们已经创建了一个初始化项目了,下边是开发中常用的几个命令
安装npm依赖
在项目根目录下,运行如下命令安装依赖包
npm install
编译项目
在项目的根目录下,运行如下命令进行编译打包,生成rpk包
npm run build
编译打包成功后,项目根目录下会生成文件夹:build、dist
build:临时产出,包含编译后的页面js,图片等
dist:最终产出,包含rpk文件。其实是将build目录下的资源打包压缩为一个文件,后缀名为rpk,这个rpk文件就是项目编译后的最终产出
自动重新编译
如果希望每次修改源代码文件后,都自动重新编译项目,请使用如下命令:
npm run watch
手机安装调试器 参考文档
调试器APK是一个Android应用程序,请从站点地址下载
手机安装平台预览版 参考文档
较新的系统版本中内置平台正式版,即真实的运行环境。然而,更新平台正式版的时间周期较长,开发调试平台新功能可使用平台预览版
平台预览版APK是一个Android应用程序,请从站点地址下载
下载安装成功后,在调试器中点击切换运行平台至...mockup即可在平台预览版上运行rpk包
知识总结与采坑之旅
- 目前支持的手机厂商:小米、华为、金立(企业)、联想(企业)、Flyme、努比亚(企业)、OPPO(企业)、VIVO(企业),其中小米、华为、Flyme支持个人开发者,其他仅支持企业开发
- 发布一个快应用,需要在对应的厂商申请开发者账号,同时需要在quickapp.cn注册账号,并绑定对应厂商的开发者账号,才可以发布快应用
- 上述厂商的新版手机支持快应用,在开发预览时候直接安装手机调试器即可,厂商的低端机需要同时安装平台预览版,才可以进行rpk包调试,目前小米、华为手机的调试比较顺畅,其他厂商的手机问题较多
- 已经上线的应用:饿了么、携程、互动百科、新浪微博、搜狐新闻、快看漫画
- 体验方法:对应厂商的应用市场内可以搜索以上快应用,示例如下图
- 提供了很多底层系统功能 传送门
HBuilderX 开发工具体验
顺便体验了下HBuilderX 开发工具,可以直接将小程序转换成快应用,不过有坑,大部分是语法的不支持,转化过程中会有错误提醒,按错误提醒优化后可以直接生成rpk包。不支持的写法如下
- 不支持-webkit-
- 不支持rgba
- 不支持#fff 和 red 等颜色值,需要用6位值
- 组件转化会有异常,转换中需要注意
体验总结
- 目前开发工具等还不完善,开发调试比较繁琐
- 场景化的快应用,适合那种用完即走的需求,过重的业务需求,暂时建议不要使用
- 目前支持的厂商和平台还较少,可以体验采坑之旅
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。