快应用-快手上手指导

快应用-快手上手指导

第一步: 安装环境

npm install -g hap-toolkit
hap -V

需安装6.0以上版本的nodejs，请从NodeJS官网下载，推荐v6.11.3 LTS

注意: 不要使用8.0.*版本．这个版本内部ZipStream实现与node-archive包不兼容，会引起报错

第二步: 项目创建、编译、发布

• 创建

hap init quickApp

• 编译

cd quickApp
npm i
npm run build

• 发布

npm run serve

[INFO] ### App Server ### server started at http://localhost:12306/
[INFO] ### App Server ### 请确保手机与App Server处于相同网段

生成HTTP服务器的二维码: http://172.16.43.74:12306
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ ██▀▀▄▄ ▀█▄█ ▄▄▄▄▄ █
█ █   █ █▀███ ▀ ▀ █ █   █ █
█ █▄▄▄█ █▄▄█▀▀█ █▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ ▀▄█▄▀▄█▄▄▄▄▄▄▄█
█ ▄▀▀█▄▄▄█ █▄▀ █  ▀██  ▀▀██
█▀ █▀  ▄█▀▀▄█▀▄█▄▀█▄ ▄ █▄ █
█▀ ▄▀ ▀▄ █ █▄▄█  █▄▄████▀▄█
█ █ █▀█▄▄▀▀  ▄██ █▄█▄▀▄▀▄ █
█▄█████▄▄ █▀▄ ▄▀█ ▄▄▄ █ ███
█ ▄▄▄▄▄ █ ▀█ ▄█▄█ █▄█ ▄█▀ █
█ █   █ ██  ▀▀▄█▄▄▄  ▄ ▄▀▀█
█ █▄▄▄█ █▀▀▀█ ▄▀▀▀▄▀▀▀█▄█ █
█▄▄▄▄▄▄▄█▄▄█▄██▄▄▄█▄██▄██▄█

第二步: 设备安装调试器和运行时

• 安装运行时环境

https://statres.quickapp.cn/quickapp/quickapp/201803/file/20180322121456491785.apk

较新的系统版本中内置平台正式版，即真实的运行环境。

• 安装调试器

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

说明如下：

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

最后: 运行app

• 打开链接并扫码

http://172.16.43.74:12306

• 用浏览器或者调试器扫码，即可直接打开app

快应用

代码研究

目录说明

├── node_modules
├── sign                      rpk包签名模块
│   └── debug                 调试环境
│       ├── certificate.pem   证书文件
│       └── private.pem       私钥文件
├── src
│   ├── Common                公用的资源文件和组件文件
│   │   └── logo.png          manifest.json中配置的icon
│   ├── Demo                  页面目录
│   |   └── index.ux          页面文件，文件名不必与父文件夹相同
│   ├── app.ux                APP文件（用于包括公用资源）
│   └── manifest.json         项目配置文件（如：应用描述、接口申明、页面路由等）
└── package.json              定义项目需要的各种模块及配置信息，npm install根据这个配置文件，自动下载所需的运行和开发环境

目录的简要说明如下：

• src：项目源文件夹
• node_modules：项目的依赖类库
• sign：签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法请参考文档：编译工具的openssl

项目架构

• 基于 npm webpack 打包构建
• 编译中间文件 build 目录
• 编译发布文件 dist 目录

开发方式

我们打开 src/Demo/index.ux 看下代码

代码结构完全抄袭 vue spa ，前端平移无压力。