快应用App开发

快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定，它具备传统APP完整的应用体验，无需安装、即点即用。集合了Vue和小程序的特点。虽然有人说，快应用只是雷声大，雨点小，经过小编这几天的接触，觉得，目前快应用还只是在开发阶段，有很多东西还需要完善，不建议各个公司争着做第一个吃螃蟹的人。在此，和大家探讨一些小编在接触过程中遇到的一些问题。
一、快应用的调试
快应用和Vue一样可以直接在浏览器上调试，可以像小程序一样，可以直接 编译查看效果。快应用需要在手机上安装调试工具，通过手机将效果投射在浏览器上进行调试。调试有个头疼的问题就是，虽然效果可以通过浏览器查看，但却不能像一般的H5那样，可以通过开发者工具在浏览器上进行调整，这就意味着，当你发现样式不合适时， 需要一个一个值的去试并且，每一次修改都需要重新编译和调试，直到达到想要的效果位置位置。这样的调试是十分考验耐性和耗时的。且，手机调试器只支持Android设备。
好了，接下来回到正题。
1、PC安装toolkit工具
（1）通过npm仓库安装，在命令行中执行以下命令：
npm install -g hap-toolkit
（2）在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功，如下命令所示：
hap -V
2、手机安装调试器
（1）安装快应用调试器：https://statres.quickapp.cn/quickapp/quickapp/201803/file/quickapp_debugger.apk
（2）安装快应用预览版：https://statres.quickapp.cn/quickapp/quickapp/201803/file/quickapp_platform_preview_release.apk
注：必须安装这两个apk才考验进行调试
在手机上安装并打开调试器，按钮功能如下：
扫码安装：配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包
本地安装：选择手机文件系统中的rpk包，并唤起平台运行rpk包
在线更新：重新发送HTTP请求，更新rpk包，并唤起平台运行rpk包
开始调试：唤起平台运行rpk包，并启动远程调试
注意：若打开调试器无法点击按钮，请升级手机系统到最新版本或安装平台预览版
安装成功后如下图所示：

二、快应用项目的搭建
1、安装Node.js
快应用的项目搭建需要使用NodeJs进行实现，所以，请安装好Node.js。
下载地址：https://nodejs.org/en/download/
2、安装hap-toolkit
（1）通过npm仓库安装，在命令行中执行以下命令：
npm install -g hap-toolkit
（2）在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功，如下命令所示：
hap -V
3、创建项目
hap init 项目名
命令执行后，会在当前目录下创建 “项目名”文件夹，作为项目根目录
这个项目已经包含了项目配置与示例页面的初始代码，项目根目录主要结构如下：
├── sign rpk包签名模块
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src
│ ├── Common 公用的资源和组件文件
│ │ └── logo.png 应用图标
│ ├── Demo 页面目录
│ | └── index.ux 页面文件，可自定义页面名称
│ ├── app.ux APP文件，可引入公共脚本，暴露公共数据和方法等
│ └── manifest.json 项目配置文件，配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息
4、安装依赖
在项目根目录下，运行如下命令安装模块到node_modules目录
npm install

注：
如果开发者在后续操作中遇到报错Cannot find module ‘…/node_modules/hap-tools/webpack.config.js’，请运行一次hap update –force（执行完毕后不需要按照提示再次运行npm install）
这是由于高版本的npm（如：NodeJS v8版本使用npm5）在npm install时，会校验node_modules目录，并删除其中的hap-tools文件夹，从而导致报错；开发者运行hap update –force，会重新复制hap-tools文件夹到node_modules中
5、编译项目
（1）手动编译项目
在项目的根目录下，运行如下命令进行编译打包，生成rpk包
npm run build
编译打包成功后，项目根目录下会生成文件夹：build、dist
build：临时产出，包含编译后的页面js，图片等
dist：最终产出，包含rpk文件。其实是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出
（2）自动编译项目
如果希望每次修改源代码文件后，都自动编译项目，请使用如下命令：
npm run watch

注：小编使用自动编译时发现有时候并不能自动编译，且有时会让人不明白应该如何下一步，所以，小编不建议使用自动编译方式。
6、安装rpk包（运行项目）
在终端中新建一个窗口，进入项目的根目录运行如下命令，启动本地服务器（默认端口为12306）
npm run server
（1）扫码安装：运行以上命令后，若是第一次安装该rpk包，则复制其中的生成HTTP服务器的二维码地址，打开浏览器，复制该地址到浏览器中，浏览器会打出一个二维码，这时，打开手机——->打开快应用——–>打开快应用调试器——->点击扫码安装，等待几分钟，手机上就会显示运行的项目进入页面的效果图。

（2）设置安装：打开调试器 –> 点击右上角menu –> 设置，输入终端窗口中提示的HTTP服务器地址，
配置完成后，可点击在线更新唤起平台运行rpk包。

注：若提示安装失败，请检查执行npm run server的终端窗口是否正常运行
（3）本地安装
a、复制rpk包到手机中
将“项目名”/dist目录下编译产出的rpk包通过USB数据线或其他方式，复制到手机文件系统中
b、 本地安装rpk包
打开调试器 –> 点击”本地安装”，选择手机文件系统中的rpk包，并自动唤起平台运行rpk包，查看效果

注：查看效果时，请务必保证手机和电脑处于同一个IP地址

若是已经安装该rpk包，在修改后，请重新执行npm run build 和npm run server后，点击“在线更新”即可。若想查看打印的日志，可点击“在线更新”并且打开效果图窗口之后退出，再点击“开始调试”，PC端会自动打开默认的浏览器，并且将效果投射在上方。
7、代码编辑配置
在此次项目中，小编使用的代码编辑器为WebStorm，所以，在此就和大家说一下在WebStorm中的配置。快应用的html文件后缀为.ux，若直接编写，未配置的编辑器是无法识别该文件后缀的，自然也就不会存在代码提示，所以，为了能够更好的编辑，在WebStorm中，我们需要配置。启动WebStorm，打开项目，点击顶部菜单栏File –> Settings，打开WebStorm配置界面，在配置界面选择Editor –> File Types，找到HTML，增加通配符*.ux。

三、注意点
1、关于图片
快应用支持使用外链图片，也支持本地图片。
（1）若是想将图片设置背景图片，则图片需为本地图片。且背景图建议使用background-image属性进行设置，若使用background进行设置，图片会加载失败。
（2）若需要使用外链图片，则需使用标签进行渲染。
（3）若使用的图片为gif格式，则使用标签进行渲染，因为，若设置为背景图，gif格式与png、jpg格式图片效果相同，换句话来说就是，若不使用标签进行gif格式图片的加载，则gif格式图中的动画效果则无效
2、关于颜色
无论是背景颜色还是字体颜色，均使用十六进制写法，且写时需写完整，如，白色，通常我们习惯写成#fff,在快应用中最好写成：#ffffff,若写成#fff或white,打包时会显示警告
3、关于方法
快应用相对于一般的js来说，缺少了许多关于dom元素的操作，比如，不支持append、remove、add等增删改查操作。也可以说，快应用不支持对dom进行操作。且，快应用中也无法使用new进行对象的创建。由于不能够使用new创建对象，当我们想要使用new Image实现图片预加载时也是无法实现的。
4、关于样式
快应用相比于我们常用的样式的而言，也不支持很多属性。比如，不支持max-、min-、auto等。当我们想实现高度或宽度自适应，只能够通过不设置高或宽度来实现。且，快应用的布局全部是flex布局。定位也只支持固定定位，相对定位、固定定位以及层级的设置及z-index不支持。那想要实现和z-index的效果改如何？快应用提供了一个stack组件，该组件中的子组件排列方式为层叠排列，每个直接子组件按照先后顺序依次堆叠，覆盖前一个子组件。但小编觉得，这个组件远没有z-index属性来的便捷。同时， 快应用中不支持兼容写法，比如-webkit-等兼容写法。
5、关于音频
音频方面，快应用不提供标签进行音频的加载，但它提供了音频的接口。无法使用标签进行音频加载意味着只能加载一个音频文件，无法同时播放两个或两个以上的音频。音频的接口需要引入“import audio from ‘@system.audio’”，同时在manifest.json文件中“features”项配置。既然如此，或许有的朋友会说，那引入“import audio from ‘@system.audio’”的同时再引入“import audio2 from ‘@system.audio’” 不就可以播放两个音频了吗？呵呵，小编试过了，这个方式是不可行的。
6、关于数据
以小编刚结束的快应用项目来说，该项目的数据属于动态获取，每获取一次，渲染数据时，整个页面会进行刷新，简单来说就是，每获取数据，整个页面会进行刷新，整个页面重新进行渲染。小编认为，如此性能会受到较大的影响。
7、关于事件
快应用与其他的框架或是一般的H5而言，事件方面的差异是最大的，快应用目前只支持一下事件：
（1）click - 组件被点击时触发
（2）longpress - 组件被长按时触发
（3）focus - 组件获得焦点时触发
（4）blur - 组件失去焦点时触发
（5）appear-组件出现时触发
（6）swipe （正式版本可用）-组件上快速滑动后触发
相对于其他的框架和H5而言，是十分的缺乏的。
8、关于组件（标签）
快应用中与一般的H5不同，我们在H5中，将

等称为标签，在快应用中，将其称为组件。由于组件相对较多，在此，只选择其中的几个来进行举例。有兴趣的朋友请自行前往gitHub库查看。
GitHub地址：https://github.com/quickappcn/sample
（1）list以及list-item：在快应用中list与其子组件list-item相对于ul、li标签。但相对于ul标签而言，list增加了几个方法、事件和属性。
方法：
scrollTo：list滚动到指定item位置
写法：scrollTo({index: number(指定位置)})
事件：
a、scroll - 列表滑动 ({scrollX:scrollXValue, scrollY:scrollYValue})
b、scrollbottom - 列表滑动到底部
c、scrolltop - 列表滑动到顶部
属性：
scrollpage：是否将list顶部页面中非list部分随list一起滑出可视区域，开启该属性会降低list渲染性能 ，默认为false

注：在此次小编的项目中，小编将list滑动到最后一个list-item子组件，出现了一个现象：滑动到最后一个子组件的一部分就不再继续滑动了，换一句话说就是，scrollTo的实现和recyclerView的scrolltoposition一样，到指定的item滑动到可见就停了，虽滑动到了最后一个item但却显示不完整，该如何解决？将一个空的list-item放在list的末尾，并且，这个list-item的高度需要设置相对高一些，如此，当滑动到最后一个item时，就不会出现显示不完整的情况。
（2）a、span、text
快应用中，只有这三个组件可以进行文本的显示，且，span组件只能作为作为与的子组件。

以上就是小编的分享。小编不知道快应用会不会像小程序一般，刚出来便拥有许多的追随者，小编认为，目前，快应用还依旧是在开发阶段，存在着许多缺陷，还不成熟，不建议为了赶新潮而浪费一定的时间和精力去专研，可以等到其成熟并且各个方面均大体完善后再进行研究开发。看目前的情况，快应用的前景并不被大多数人看好，或许到了一定了时间，快应用的热度便会一步步的减退，这时，开发的项目或许就已经没有了价值。技术一向是时时刻刻在更新，快应用能不能持续往下走，谁也说不准，是吧？