本文最早发表在豌豆公主前端研发公众号(wfxteam)前端
自从2016年末微信小程序面世以来,历经几回波折,目前的发展势头还不错,不少工具和购物类应用都在小程序上得到了不错的红利,个别拼团购物应用在今年春节期间的流量更是引发了淘宝等电商巨头的关注。vue
小程序最大的优点即是“无需安装,即用即走”,尤为是在常规安卓手机上更能将应用图标添加到桌面的快捷方式,这一点对手机系统的应用分发能力形成了极大地威胁,而手机厂商面对这种被撩骚的行为,确定是没法接受的。node
因而国内几大手机厂商决定暂时搁置竞争,联合起来夺回被小程序吞噬的地盘,而承担此重任的即是咱们今天要聊的——快应用。webpack
了解诞生背景以后,咱们来看看“快应用”到底是个什么鬼。web
快应用是基于手机硬件平台的新型应用形态...具有传统APP完整的应用体验,无需安装,即点即用。npm
根据上面快应用官网https://www.quickapp.cn/中的介绍来看,感受和小程序很像,但“基于手机硬件平台”这一点更值得期待。json
快应用的开发工具叫作hap-toolkit,基于Node环境,官方文档上建议使用NodeJS v6.11.3LTS版本,不推荐使用8.0.*版本,据称会出现不兼容问题;安装好NodeJS后,经过下面命令安装开发工具:小程序
npm install -g hap-toolkit
微信小程序
安装完成后检查是否安装成功:微信
hap -V
而后初始化项目:
hap init wonderfull
初始化以后,进入到项目根目录安装依赖包,安装好以后即可以对项目进行编译
npm run build / npm run watch
上面完成了开发环境搭建,下面须要作的即是手机端调试器安装,这方面要比环境搭建简单些,只需安装一个应用程序便解决了,这里有一点须要注意的是,今天在安装完调试器后一直没法使用,看了下文档有相关说明,在较新的系统中会内置真实的运行环境,可是对于稍老一点的系统,咱们还须要安装一个平台预览版的应用程序,在此不作赘述,详见文档。
完成上述步骤后,回到项目根目录执行
npm run server
开启服务,此时终端上会出现一个二维码,经过调试器扫码便可进行安装:
如上图,编译后的目录结构,咱们逐个看一下几个关键的目录:
build目录:是存放编译后的文件,里面都是通过webpack编译处理过的;
dist目录:编译后生成的rpk格式的程序包,能够直接传输到手机上安装使用;
node_modules目录:你们都比较熟悉,项目以来的库文件;
sign目录,签名模块;
src目录是最关键的源码目录,也就是咱们主要用到的目录,从结构上看并不陌生,和小程序基本一致,包含页面、全局的配置文件manifest.json、项目公共逻辑app.ux等;
页面生命周期包括 onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress
App的生命周期包括 onCreate、onDestroy
熟悉小程序开发的话,这里也没什么难点。
后面咱们就要着重看代码了:
上面截图是demo中首页的代码,乍一看这TM不就是vue1的语法吗?
惊不惊喜,意不意外?技术栈和咱们平时使用的没什么差异,组件提供了比较丰富的选择,而且支持webview,样式上作了些限制和优化,事件监听、触发,父子组件通讯等参考vue语法便可,在接口方面,提供了更为丰富的系统级API,这一点上要比小程序更开放。
既然是对标小程序的新形态,那必然要作一下比较,由于还没有走完整个流程,因此仅从初期开发体验上来作一下分析比较:
开发环境:快应用须要自行安装配置一系列环境及调试工具,而小程序只需一个开发者工具便可,这一点小程序胜。
开发体验:快应用的语法和vue1很像,而小程序有着本身一套语法规范,相对来说,快应用会更容易上手。
程序包大小:小程序4M,快应用1M,这一点确实有点局限,但小程序也是从1M变成4M的
能力:小程序和快应用在安卓端均可以添加快捷方式到桌面,但不一样的是,快应用属于系统级应用,与微信同级,能调用更多系统级API,体验上会更优于小程序,这一点是后者所不能比的。
其余:小程序上架发布流程较为简单,快应用须要逐家关联开发者权限,这方面有点捉急...不过对于企业帐号已有的安卓渠道来讲,也没什么门槛。
昨天刚得知这个消息时,第一反应是国内手机厂商可能只是想搞搞事情,刷一下存在感。可是今天上手体验了一下,我的对快应用的见解仍是有些变化的,综合来看,两者不分伯仲,开发和维护成本都不高,都在努力争取流量入口。对开发者来说,又多了一项技能,对企业来讲,更多了一份可能。行业中一片和谐未必是好事,也许只有在互相叫喊着不服,互相想办法夺取用户,才会迸发出更多创新,更多可能。
百家争鸣,才会百花齐放...
最后欢迎关注咱们的公众号:wfxteam