入门快应用的另一种姿势

亦凉 2022-05-28 03:48 336阅读 0赞

3月20日，北京朝阳区中国大饭店，小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加，共十家手机厂商联合宣布成立快应用联盟，推出快应用。

接下来，引发无数开发者关注，入门教程网上也出了不少，但大多都是将快应用官网的文档简单复制一遍，流程基本都是：

> *install hap-toolkit ==> hap init project ==>run build ==> 真机预览*

也许，换个姿势更省力。

原因有二：

*  明明有可视化IDE，何必要执行一系列命令？
 *  有更完善的组件及接口能力演示Demo，何必创建空项目？

### 搭建环境 ###

安装Nodejs：这个是必需的，建议8.0以上版本

安装HBuilderX：官网[quickapp.dcloud.io][]，HBuilderX内置快应用的语法提示及代码块，可显著提升开发效率

### 下载代码 ###

官网及第三方入门教程，大多是创建一个空的快应用项目模板，无法直接体验快应用的组件及接口能力。

本文推荐从github下载[hello-quickapp][]项目，该项目类似微信小程序示例，对快应用目前已支持的各种组件及接口能力进行展示。

### 导入工程 ###

启动HBuilderX，将下载后的hello-quickapp项目拖拽到HBuilerX中，会自动生成一个快应用工程，如下图所示：

![hello-quickapp-01.png][]

*注意：仅拖拽hello-quickapp文件夹即可，无需拖拽quickapp-master文件夹。*

### 真机运行 ###

不需要执行各种npm命令，只需要找一部安卓手机，通过USB数据线连上电脑，手机上打开两个开关：

*  USB连接方式切换为“媒体设备（MTP）”
 *  开发者选项，开启USB调试

然后在HBuilderX顶部菜单中点击：运行—>真机运行—>选择已连接的Android手机，如下图所示：

![hello-quickapp-02.png][]

手机上运行成功后，界面如下：

![快应用示例][hello-quickapp-03.jpg]

切换组件及接口选项卡，可以查看快应用的各种接口能力，如下为界面交互的菜单：

![快应用示例][hello-quickapp-04.jpg]

模板选项卡是常用模板集合，正在完善。

### 发行rpk ###

如果希望查看在官方调试器上的运行效果，按照如下步骤操作：

*  生成rpk：在HBuilderX顶部菜单中依次点击：发行—>快应用发行—>生成rpk文件
 *  将HBuilderX生成的rpk，复制到手机的文件系统中
 *  安装[快应用调试器][Link 1]和[平台预览版][Link 2]，注意两个apk都需要安装，平台预览版是为了模拟快应用的运行时环境
 *  打开手机上的“快应用调试器”，点击“本地安装” ，选择步骤2复制进来的rpk文件，即可预览hello-quickapp

好了，相比执行各种命令，是不是更简洁？

[quickapp.dcloud.io]: http://quickapp.dcloud.io/
[hello-quickapp]: https://github.com/dcloudio/quickapp
[hello-quickapp-01.png]: /images/20220528/69694812483e48c39c4d8416634a9caf.png
[hello-quickapp-02.png]: /images/20220528/cf3b6f50bf474fd48cfc26431986adaa.png
[hello-quickapp-03.jpg]: /images/20220528/1b90589cc0424300b63ca70cc59e3941.png
[hello-quickapp-04.jpg]: /images/20220528/aa9bcea3cc6e4edb8e1160d6a54db890.png
[Link 1]: https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803221213415527241.apk
[Link 2]: https://statres.quickapp.cn/quickapp/quickapp/201803/file/20180322121456491785.apk