快应用quickapp快速入门教程 by五个半柠檬

快应用

快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装，即点即用，享受原生应用的性能体验。
2018年3月20日在北京推出“快应用”标准。
现在我们就来试试如何快速搭建一个快应用程序吧~

一、准备工具

1. 用系统自带的命令处理工具（不建议用，有点丑）

   开始菜单，搜索输入cmd

   

2. 下载git-bash,界面如下

   

3. 下载cmder,界面如下（当前比较好用的一个，推荐）

   

4. 准备一个安卓手机！！！！

二、环境搭建

1. 安装NodeJS

   需安装6.0以上版本的NodeJS，请从NodeJS官网下载，推荐v6.11.3
   注意: 不要使用8.0.*版本．这个版本内部ZipStream实现与node-archive包不兼容，会引起报错。安装过程就不细说了，不会的话请自行百度。

2. 安装hap-toolkit

   通过npm仓库安装，在命令行中执行以下命令：

   npm install -g hap-toolkit

   在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功，如下命令所示：

   hap -V // 会显示安装版本信息

3. 安装toolkit工具后，可通过全局hap命令创建一个项目模板，如下所示:

   hap init <ProjectName>
   其中<ProjectName>为自定义的项目名称
   命令执行后，会在当前目录下创建<ProjectName>文件夹，作为项目根目录
   这个项目已经包含了项目配置与示例页面的初始代码，项目根目录主要结构如下：

   ├── sign rpk包签名模块
   │ └── debug 调试环境
   │ ├── certificate.pem 证书文件
   │ └── private.pem 私钥文件
   ├── src
   │ ├── Common 公用的资源和组件文件
   │ │ └── logo.png 应用图标
   │ ├── Demo 页面目录
   │ | └── index.ux 页面文件，可自定义页面名称
   │ ├── app.ux APP文件，可引入公共脚本，暴露公共数据和方法等
   │ └── manifest.json 项目配置文件，配置应用图标、页面路由等
   └── package.json 定义项目需要的各种模块及配置信息

   目录的简要说明如下：
   src：项目源文件夹
   sign：签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法详见文档编译工具

4. 安装依赖
   在项目根目录下，运行如下命令安装模块到node_modules目录
   npm install

5. 编译项目

   （1）手动编译项目

   在项目的根目录下，运行如下命令进行编译打包，生成rpk包
   
   npm run build
   
   编译打包成功后，项目根目录下会生成文件夹：build、dist
   build：临时产出，包含编译后的页面js，图片等
   dist：最终产出，包含rpk文件。其实是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出
   

   （2）自动编译项目

   如果希望每次修改源代码文件后，都自动编译项目，请使用如下命令：
   
       npm run watch  
   

6. 在安卓手机上安装调试工具，点击蓝色字体进行下载
   两款工具都必须下载到安卓手机中才能进行调试
   下载地址：https://www.quickapp.cn/docCe...

   

   

三、运行项目

1. 打开新建项目
   我首先使用hap init 新建了一个hapmemo的项目

   

   当使用sublime打开时发现不支持.ux的文件。

   

   官方推荐使用Visual Studio Code或者WebStorm进行开发（建议选择前者）。

2. 安装Hap Extension
   启动Visual Studio Code，打开项目，点击左上侧扩展，搜索hap，点击安装Hap Extension，然后点击重新加载即可预览效果（如果VS code不是最新版，请先更新）

   

   

   到这一步，一个官方基础的demo就构建成功了。

四、连接手机进行调试

注意：一定要注意手机连接的wifi与电脑所连接的网络需要在同一局域网和网段，需要能够相互访问。

1. 在项目根目录下执行如下命令，启动HTTP调试服务器：（server前需要先npm run build）

   npm run server

   开发者可以通过命令行终端或者调试服务器主页看到提供扫描的二维码
   开发者通过快应用调试器扫码安装按钮，扫码安装待调试的rpk文件
   开发者点击快应用调试器中的开始调试按钮，开始调试

   

   如果是使用系统自带的处理工具，无法扫二维码，请在浏览器中输入二维码访问地址即可

   

2. 扫码安装

   

3. 当在同一网段时会提示你安装成功，否则提示安装失败。
   下图是快应用的初始页面：

   

4. 现在你会发现一个问题，当修改文件内容后保存，页面内容无法自动更新，那如何做到热更新呢？

   解决方法：在当前目录下右击，新打开一个cmder，如图：
   

   输入npm run watch自动编译项目，请使用如下命令：
   npm run watch

   然后重新打开应用，就可以自动更新了。

   小提示：点击开始调试无法无法自动打开chrome的调试页面的问题

   1>结束npm run server，重新npm run server，并扫码
   2>先按返回键，点取消关闭调试界面
   

   然后再点击开始调试，浏览器中就会自动弹出界面了（暂时未找到原因为什么需要这么操作）

   

   注意：手机必须保持常亮不锁屏，否则chrome会出现白屏的情况~

   后续操作稍后更新~
   有什么问题或者建议可以给我留言~~