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

快应用

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

1、准备工具

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

   开始菜单，搜索输入cmd

   

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

   

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

   

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

2、环境搭建

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...

   

   

3、运行项目

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

   

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

   

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

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

   

   

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

4、链接手机进行调试

注意：必定要注意手机链接的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会出现白屏的状况~

   后续操做稍后更新~ 有什么问题或者建议能够给我留言~~