快应用-快手上手指导

第一步: 安装环境

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 看下代码

<template>
  <!-- template里只能有一个根节点 -->
  <div class="demo-page">
    <text class="title">欢迎打开{{title}}</text>
    <!-- 点击跳转详情页 -->
    <input class="btn" type="button" value="跳转到详情页" onclick="routeDetail">
  </div>
</template>
 
<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 40px;
    text-align: center;
  }

  .btn {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }
</style>

<script>
  import router from '@system.router'

  export default {
    data: {
      title: '示例页面'
    },
    routeDetail () {
      // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
      router.push ({
        uri: '/DemoDetail'
      })
    }
  }
</script>

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