快应用入门小结篇

MD原文件 https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md

博客链接 http://blog.poetries.top/2018/08/21/quick-app-summary/

# 前言

# 与微信小程序的比较

二者都采用前端技术栈，快应用是native 渲染，性能体验会比较好，而小程序目前是webview渲染
二者开发框架和规范不同，所以代码写法上有差异，快应用的css支持能力较弱
快应用基于native，可以调起丰富的系统api，小程序在此方面会有些无力

# 快应用入口

应用商店
桌面图标
全局搜索
浏览器搜索
网页跳转
负一屏
智能推送
智慧识屏
场景化入口（短信按钮、应用卸载替换、二维码、传送门）

# 快应用优点

轻松调起更多系统api
各厂商的流量扶持
native渲染，deeplink入口，原生桌面入口，push能力

# 一、环境搭建

# 1.1 安装NodeJS

需安装6.0以上版本的NodeJS

# 1.2 安装hap-toolkit

// hap -V // 会显示安装版本信息
npm install -g hap-toolkit

@前端进阶之旅: 代码已经复制到剪贴板

# 1.3 创建项目工程

hap init projectName

// 增加编译支持
hap update --force

cd projectName && npm i

@前端进阶之旅: 代码已经复制到剪贴板

生成的目录结构

├── 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文件夹，增加线上签名；签名生成方法详见文档编译工具

编译项目

npm run release # 发布程序包，在 /dist/.signed.rpk，注意需要使用 release 签名模块
npm run build # 生成 build 和 dist 两个目录。前者是临时产出，后者是最终产出
npm run watch # 文件保存时自动编译和调试

手动编译项目

在项目的根目录下，运行如下命令进行编译打包，生成rpk包

npm run build

@前端进阶之旅: 代码已经复制到剪贴板

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

自动编译项目

每次修改源代码文件后，都自动编译项目

npm run watch

@前端进阶之旅: 代码已经复制到剪贴板

在安卓手机上安装调试工具

https://www.quickapp.cn/docCenter/post/69

# 1.4 连接手机进行调试

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

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

npm run server

@前端进阶之旅: 代码已经复制到剪贴板

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

打开之前安装的快应用调试助手扫描即可预览

扫描二维码之后点击开始调试，会调出devtool工具本地调试

# 1.5 安装Hap Extension

启动Visual Studio Code，打开项目，点击左上侧扩展，搜索hap，点击安装Hap Extension

更多详情 https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html

# 二、快应用结构分析

# 2.1 文件组织

一个应用包含：描述项目配置信息的manifest文件，放置项目公共资源脚本的app.ux文件，多个描述页面/自定义组件的ux文件

├── 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文件夹，增加线上签名）

# 2.2 源码文件

APP，页面和自定义组件均通过ux文件编写，ux文件由template模板、style样式和script脚本3个部分组成，一个典型的页面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 {
    // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
    private: {
      title: '示例页面'
    },
    routeDetail () {
      // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
      router.push ({
        uri: '/DemoDetail'
      })
    }
  }
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 manifest配置

https://doc.quickapp.cn/framework/manifest.html

{
    # 包名，区分不同应用的唯一id，因为名称其实是可以一样的
    "package": "com.application.demo",

    # 应用名称
    "name": "hi",

    # 版本管理的话，每次更新将versionCode自增1即可
    "versionName": "1.0.0",
    "versionCode": "1",
    "minPlatformVersion": "101",

    # 程序的入口icon，所有关于文件的引用统一使用根目录
    # 根目录对应src文件夹
    "icon": "/Common/logo.png",

    # 
    "features": [
        { "name": "system.prompt" },
        { "name": "system.router" },
        { "name": "system.shortcut" }
    ],

    "permissions": [
        { "origin": "*" }
    ],

    # 配置相关
    "config": {
        # 这里的设置是log输出的最低等级
        # 如果是warn的话，info类型将不会输出
        # 等级请参考js中的console日志
        "logLevel": "off"
    },

    # 路由
    # 这里会配置应用入口的页面
    # 所有的页面都需要在这里配置
    # 会把页面与对应的页面文件对应起来
    # 经过配置之后可以通过/Demo访问到Demo目录下的index.ux页面
    "router": {
        "entry": "Demo",
        "pages": {
            "Demo": {
                # 这里对应的Demo文件夹里的index.ux
                "component": "index"
            },
            "DemoDetail": {
                "component": "index"
            },
            "About": {
                "component": "index"
            }
        }
    },
    
    # 配置页面UI显示
    # 主要分为两种，页面公有与页面私有
    "display": {
        # 这三个都是所有页面公有的，顶部titleBar内容
        "titleBarText": "public title"
        "titleBarBackgroundColor": "#f2f2f2",
        "titleBarTextColor": "#414141",

        # 会增加一个导航栏
        "menu": true,

        # 页面私有内容
        "pages": {
            "Demo": {
                # 这里面的内容就是每个页面私有的了
                "titleBarText": "示例页",
                "menu": false
            },
            "DemoDetail": {
                "titleBarText": "详情页"
            },
            "About": {
                "menu": false
            }
        }
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

# 2.4 app.ux

当前app.ux编译后会包含manifest配置信息（可以在npm run build之后查看文件内容），所以请不要删除/**manifest**/的注释内容标识

您可以在<script>中引入一些公共的脚本，并暴露在当前app的对象上，如下所示，然后就可以在页面ux文件的ViewModel中，通过this.$app.util访问

# 2.5 style样式

样式布局采用CSS Flexbox（弹性盒）样式

支持2种导入外部文件的方式

<!-- 导入外部文件, 代替style内部样式 -->
<style src="./style.css"></style>

<!-- 合并外部文件 -->
<style>
  @import './style.css';
  .a {
  }
</style>

@前端进阶之旅: 代码已经复制到剪贴板

模板内部样式

<!-- 内联inline -->
<div style="color:red; margin: 10px;"/>
<!-- class声明 -->
<div class="normal append"/>

@前端进阶之旅: 代码已经复制到剪贴板

样式预编译

MD原文件 https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md

博客链接 http://blog.poetries.top/2018/08/21/quick-app-summary/

# 前言

# 与微信小程序的比较

二者都采用前端技术栈，快应用是native 渲染，性能体验会比较好，而小程序目前是webview渲染
二者开发框架和规范不同，所以代码写法上有差异，快应用的css支持能力较弱
快应用基于native，可以调起丰富的系统api，小程序在此方面会有些无力

# 快应用入口

应用商店
桌面图标
全局搜索
浏览器搜索
网页跳转
负一屏
智能推送
智慧识屏
场景化入口（短信按钮、应用卸载替换、二维码、传送门）

# 快应用优点

轻松调起更多系统api
各厂商的流量扶持
native渲染，deeplink入口，原生桌面入口，push能力

# 一、环境搭建

# 1.1 安装NodeJS

需安装6.0以上版本的NodeJS

# 1.2 安装hap-toolkit

// hap -V // 会显示安装版本信息
npm install -g hap-toolkit

@前端进阶之旅: 代码已经复制到剪贴板

# 1.3 创建项目工程

hap init projectName

// 增加编译支持
hap update --force

cd projectName && npm i

@前端进阶之旅: 代码已经复制到剪贴板

生成的目录结构

├── 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文件夹，增加线上签名；签名生成方法详见文档编译工具

编译项目

npm run release # 发布程序包，在 /dist/.signed.rpk，注意需要使用 release 签名模块
npm run build # 生成 build 和 dist 两个目录。前者是临时产出，后者是最终产出
npm run watch # 文件保存时自动编译和调试

手动编译项目

在项目的根目录下，运行如下命令进行编译打包，生成rpk包

npm run build

@前端进阶之旅: 代码已经复制到剪贴板

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

自动编译项目

每次修改源代码文件后，都自动编译项目

npm run watch

@前端进阶之旅: 代码已经复制到剪贴板

在安卓手机上安装调试工具

https://www.quickapp.cn/docCenter/post/69

# 1.4 连接手机进行调试

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

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

npm run server

@前端进阶之旅: 代码已经复制到剪贴板

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

打开之前安装的快应用调试助手扫描即可预览

扫描二维码之后点击开始调试，会调出devtool工具本地调试

# 1.5 安装Hap Extension

启动Visual Studio Code，打开项目，点击左上侧扩展，搜索hap，点击安装Hap Extension

更多详情 https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html

# 二、快应用结构分析

# 2.1 文件组织

一个应用包含：描述项目配置信息的manifest文件，放置项目公共资源脚本的app.ux文件，多个描述页面/自定义组件的ux文件

├── 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文件夹，增加线上签名）

# 2.2 源码文件

APP，页面和自定义组件均通过ux文件编写，ux文件由template模板、style样式和script脚本3个部分组成，一个典型的页面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 {
    // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
    private: {
      title: '示例页面'
    },
    routeDetail () {
      // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
      router.push ({
        uri: '/DemoDetail'
      })
    }
  }
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 manifest配置

https://doc.quickapp.cn/framework/manifest.html

{
    # 包名，区分不同应用的唯一id，因为名称其实是可以一样的
    "package": "com.application.demo",

    # 应用名称
    "name": "hi",

    # 版本管理的话，每次更新将versionCode自增1即可
    "versionName": "1.0.0",
    "versionCode": "1",
    "minPlatformVersion": "101",

    # 程序的入口icon，所有关于文件的引用统一使用根目录
    # 根目录对应src文件夹
    "icon": "/Common/logo.png",

    # 
    "features": [
        { "name": "system.prompt" },
        { "name": "system.router" },
        { "name": "system.shortcut" }
    ],

    "permissions": [
        { "origin": "*" }
    ],

    # 配置相关
    "config": {
        # 这里的设置是log输出的最低等级
        # 如果是warn的话，info类型将不会输出
        # 等级请参考js中的console日志
        "logLevel": "off"
    },

    # 路由
    # 这里会配置应用入口的页面
    # 所有的页面都需要在这里配置
    # 会把页面与对应的页面文件对应起来
    # 经过配置之后可以通过/Demo访问到Demo目录下的index.ux页面
    "router": {
        "entry": "Demo",
        "pages": {
            "Demo": {
                # 这里对应的Demo文件夹里的index.ux
                "component": "index"
            },
            "DemoDetail": {
                "component": "index"
            },
            "About": {
                "component": "index"
            }
        }
    },
    
    # 配置页面UI显示
    # 主要分为两种，页面公有与页面私有
    "display": {
        # 这三个都是所有页面公有的，顶部titleBar内容
        "titleBarText": "public title"
        "titleBarBackgroundColor": "#f2f2f2",
        "titleBarTextColor": "#414141",

        # 会增加一个导航栏
        "menu": true,

        # 页面私有内容
        "pages": {
            "Demo": {
                # 这里面的内容就是每个页面私有的了
                "titleBarText": "示例页",
                "menu": false
            },
            "DemoDetail": {
                "titleBarText": "详情页"
            },
            "About": {
                "menu": false
            }
        }
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

# 2.4 app.ux

当前app.ux编译后会包含manifest配置信息（可以在npm run build之后查看文件内容），所以请不要删除/**manifest**/的注释内容标识

您可以在<script>中引入一些公共的脚本，并暴露在当前app的对象上，如下所示，然后就可以在页面ux文件的ViewModel中，通过this.$app.util访问

# 2.5 style样式

样式布局采用CSS Flexbox（弹性盒）样式

支持2种导入外部文件的方式

<!-- 导入外部文件, 代替style内部样式 -->
<style src="./style.css"></style>

<!-- 合并外部文件 -->
<style>
  @import './style.css';
  .a {
  }
</style>

@前端进阶之旅: 代码已经复制到剪贴板

模板内部样式

<!-- 内联inline -->
<div style="color:red; margin: 10px;"/>
<!-- class声明 -->
<div class="normal append"/>

@前端进阶之旅: 代码已经复制到剪贴板

样式预编译