快应用搭建

    
    
从20号快应用的发布到现在已经过去三四天了，简单的学习了一下快应用，今天来分享一下，微信小程序刚刚发布的时候，我不是特别的看好，主要是开发小程序的厂商并不多，而且微信刚开始支持的力度比较一般。随着近期“跳一跳”、“答题”、“H5游戏”的火爆，现在身边的人越来越多的开始关注微信小程序了。20号，9大厂商发布快应用，颇有“9大门派围攻光明顶之势”。所以就来学习一下，html + css + js，如果做过vue或react的话，学习小程序和快应用的成本没有多大，一两天应该就可以上手了，各位看客，下面简单介绍一下快用的搭建。

    1.环境搭建之前，需要准备node，我相信关注快应用的小伙伴，应该在自己的机器上都有了node的环境，没有环境的请去下载：
https://nodejs.org/en/download/
。

    2.
创建项目前，请先安装toolkit工具和调试器。

    
   首先需要安装
 hap-toolkit.

    
    windows应用可以直接执行下面的命令，
mac用户请先“su &＃8211; root”，切换到root用户再执行安装
。

npm install -g hap-toolkit

    
    安装完成之后，需要执行下面命令：

hap -V

    注意：v需要大写，大写。输出版本号，则表示小伙伴安装成功了。下面开始搭建喽。

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

hap init

其中为自定义的项目名称。

敲黑板喽：要回车，不然会等哭的。

命令执行后，会在当前目录下创建文件夹，作为项目根目录

这个项目已经包含了
项目配置
与
示例页面
的初始代码，项目根目录主要结构如下：

├── 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.安装依赖,执行npm install。

5.运行一下吧，执行npm build。

估计会有小伙伴和我一样，怎么报错了，是不是我哪里操作的有问题，小伙伴们不要慌。执行下面的命令。

请重新执行一次hap update &＃8211;force。这是由于高版本的npm在npm install时，会校验并删除了node_modules下部分文件夹，导致报错。而hap update &＃8211;force会重新复制hap-toolkit文件夹到node_modules中。 开始敲黑板了啊，注意是两个&＃8211;，敲成一个的去面壁。

安装之后再次执行npm run build。dist打包成功，现在你有了自己的rpk。

rpk已经有了，为什么看不到界面呢，小伙伴不要着急，我们还需要调试工具。

手机安装调试器

调试器是一个Android应用程序，点击

https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803221213415527241.apk。

安装之后，我相信99%的小伙伴，看到的都是这个界面。

这是什么鬼，搞什么，都是灰色的按钮啊，不能点击啊，为什么让我升级系统，我的系统就是最新的啊。什么破玩意儿，我不玩了。哈哈，我当时是这么想的，淡定一些，这都是废话，可以跳过哈。可以直接看下面的。

手机安装平台预览版

    安装预览版。地址：https://statres.quickapp.cn/quickapp/quickapp/201803/file/20180322121456491785.apk。

    安装之后再来看。

    手机会有两个应用，重新打开快应用调试器。

    这下终于可以调试了，开始我们的调试吧。

• 扫码安装：配置HTTP服务器地址，下载rpk包，并唤起平台运行rpk包
• 本地安装：选择手机文件系统中的rpk包，并唤起平台运行rpk包
• 在线更新：重新发送HTTP请求，更新rpk包，并唤起平台运行rpk包
• 开始调试：唤起平台运行rpk包，并启动远程调试

预览效果

启动HTTP服务器

在终端中新建一个窗口，进入项目的根目录运行如下命令，启动本地服务器（默认端口为12306）

npm run server

自定义端口（如：8080）

npm run server -- --port 8080

ok,终于要结束了，小伙伴打开打开调试器 --> 点击"扫码安装"，扫描终端窗口中的二维码即可完成配置（若扫描不成功，可在浏览器中打开页面：http://localhost:，扫描页面中的二维码）。

嗯，现在可以看到自己的快应用了哦。

退出重新打开调试器，点击开始调试，有惊喜哦，你就可以手机电脑同屏调试了。

暂时说到这里喽，有问题的小伙伴可以联系我，一起学习，一起进步。

题外话：觉得科技更新的速度很快，既然做了程序员就要时时刻刻准备接受新的科技，新的知识的洗礼，路漫漫其修远兮，吾辈仍需努力呀。