# 安装依赖
npm install
# 启动并监听自动刷新
npm run watch
# 开启服务器调试
npm run server

应用调试器 下载

打开调试器 --> 点击"扫码安装"，扫描终端窗口中的 二维码 即可完成配置

• 1. 复制rpk包到手机中

     将 /dist 目录下编译产出的 rpk包 通过USB数据线或其他方式，复制到手机文件系统中

• 2. 本地安装rpk包 打开调试器 --> 点击"本地安装"，选择手机文件系统中的rpk包，并自动唤起平台运行rpk包，查看效果

ps: 快应用调试器手机和电脑要同一网络

快应用也叫免安装应用，应用使用前端技术栈开发，原生渲染，同时具备H5页面和原生应用的双重优点。即点即用，享受原生应用的性能体验。

优势：

• 九大厂商（vivo、oppp、小米、华为、魅族、中兴、联想、努比亚、金立）支持
• 高效链接用户，低成本助力，流量高转化，厂家丰富，强留存用户，容易生存
• 使用前端技术栈，同样具备 HTML 5 与 Native App 的双重优势，用户使用微信小程序和快应用，也皆可以「即点即用」

• 免安装，免存储，一键直达，更新直接推送

快应用面向所有类型开发者，提供快应用开发平台，开发工具，开发者可自行开发应用发布流程

流程：

• 安装 Node.js (6.0以上)

• 安装 hap-toolkit

  hap-toolkit是快应用的开发者工具，帮助开发者通过命令行工具辅助开发工作的完成，主要包括创建模板工程，升级工程，编译，调试等功能。

  npm install -g hap-toolkit

• 安装 快应用调试器

  调试器是一个Android应用程序，调试程序。扫码安装，本地安装，在线更新，开始调试

• 初始化并启动

  # 初始化
  hap init <ProjectName>
  # 安装依赖
  npm i
  # 启动监听，自动编译
  npm run watch
  # 打包构建
  npm run build

  ps: 其他命令可在项目根目录的 package.json 中的 script 查看

  目录结构�：

  ├── sign                      rpk包签名模块
  │   └── debug                 调试环境
  │       ├── certificate.pem   证书文件
  │       └── private.pem       私钥文件
  ├── src
  │   ├── Common                公用的资源和组件文件
  │   │   └── logo.png          应用图标
  │   ├── Demo                  页面目录
  │   |   └── index.ux          页面文件，可自定义页面名称
  │   ├── app.ux                APP文件，可引入公共脚本，暴露公共数据和方法等
  │   └── manifest.json         项目配置文件，配置应用图标、页面路由等
  └── package.json              定义项目需要的各种模块及配置信息
  

页面生命周期:

应用生命周期:

• 长度

框架目前仅支持长度单位 px 和 %,与传统web页面不同，px是相对于项目配置基准宽度的单位

100px * 1080px = x * 750px

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度

• 选择器

  内联样式、tag选择器、class选择器、id选择器、并列选择、后代选择器

• 布局-flex

• 支持预编译

  less, sass

• $on | 监听 ViewModel 事件
• $off | 移除 ViewModel 事件
• $emit | 触发 ViewModel 事件
• `on${事件名}` | 监听原生组件事件
• $emitElement | 触发原生组件事件

ps：通用事件

part1：

<template>
  <div>
    <text>{{ header }}</text>
    <slot></slot>
    <text>{{ footer }}</text>
  </div>
</template>

page：

<import name="part1" src="./part1"></import>
<template>
  <part1 class="component" header="{{header}}" footer="{{footer}}">
    <text>slot节点内容</text>
  </part1>
</template>

• props

  <comp-part1 
    prop1="{{data1}}" 
    prop2-object="{{data2}}">
  </comp-part1>

• `on${事件名}` / $emit

  <comp-part1 onevt-type3="evtTypeHandler">
  </comp-part1>

  $emit('evtType3')

• $on / $dispatch

  向上传递：子组件触发，父组件响应

  当传递结束后，可以调用evt.stop()来结束传递

• $broadcast / $on

  向下传递：父组件触发，子组件响应

  当传递结束后，可以调用evt.stop()来结束传递

  兄弟组件之间的通信

  传统的兄弟等非父子组件之间通信，是通过Publish/Subscribe模型来完成

  子组件Sub端：part1

  <script>
    export default {
      processMessage (msg) {
      },
      /**
       * 通过events对象：绑定事件
       */
      events: {
        customEventInVm2 (evt) {
        }
      }
    }
  </script>

  父组件：

  <import name="comp-part2" src="./part2"></import>
  <import name="comp-part3" src="./part3"></import>
  
  <template>
    <div class="tutorial-page">
      <!-- 兄弟VM通信 -->
      <comp-part2 id="sibling1"></comp-part2>
      <comp-part3 id="sibling2"></comp-part3>
    </div>
  </template>
  
  <style lang="less">
  </style>
  
  <script>
    // 父组件
    export default {
      onReady () {
        this.establishRef()
      },
      /**
       * 建立相互VM的引用
       */
      establishRef () {
        const siblingVm1 = this.$vm('sibling1')
        const siblingVm2 = this.$vm('sibling2')
  
        siblingVm1.parentVm = this
        siblingVm1.nextVm = siblingVm2
        siblingVm2.parentVm = this
        siblingVm2.previousVm = siblingVm1
      }
    }
  </script>

  子组件�Pub端：part2

  <script>
    // 子组件: part3
    export default {
      sendMesssage () {
        if (this.previousVm) {
          // Way1. 调用方法
          this.previousVm.processMessage('兄弟之间通信的消息内容')
          // Way2. 触发事件
          this.previousVm.$emit('customEventInVm2', '兄弟之间通信的消息内容')
        }
      }
    }
  </script>

<template>
  <div class="tutorial-page">
    <!-- 以'/'开头的应用内页面的路径 -->
    <a href="/PageParams/receiveparams">跳转到接收参数页面</a>
    <!-- 以非'/'开头的应用内页面的名称 -->
    <a href="PageParams/receiveparams">跳转到接收参数页面</a>
    <!-- 特殊的,如果uri的值是'/',则跳转到path为'/'的页,没有则跳转到首页-->
    <a href="/">跳转到首页</a>
  </div>
</template>

<template>
  <div class="tutorial-page">
    <!-- 添加参数 -->
    <a href="/PageParams/receiveparams?key=Hello, world!">携带参数key1跳转</a>
    <!-- 添加变量参数 -->
    <a href="/PageParams/receiveparams?key={{title}}">携带参数key2跳转</a>
  </div>
</template>

// 导入模块
import router from '@system.router'

export default {
  routePagePush () {
    // 跳转到应用内的某个页面
    router.push({
      uri: '/PageParams/receiveparams'
    })
  },
  routePageReplace () {
    // 跳转到应用内的某个页面，当前页面无法返回
    router.replace({
      uri: '/PageParams/receiveparams'
    })
  },
  routePageBack () {
    // 返回上一页面
    router.back()
  },
  routePageClear () {
    // 清空所有历史页面记录，仅保留当前页面
    router.clear()
  }
}

router.push({
  uri: '/PageParams/receiveparams',
  params: { key: this.title }
})

export default {
  protected: {
    key: ''
  },
  onInit () {
    // js中输出页面传递的参数
    console.info('key: ' + this.key)
  }
}

• 界面交互

  • 分享
  • 弹窗
  • 打开网页
  • 通知消息
  • 震动

• 网络访问

  • 上传下载
  • 数据请求

• 文件存储

  • 数据存储
  • 文件储存

• 系统能力

  • 二维码
  • 传感器
  • 剪贴板
  • 地理位置
  • 桌面图标
  • 日历事件
  • 网络状态
  • 设备信息
  • 屏幕亮度
  • 系统音量
  • 电量信息
  • 应用管理
  • 录音
  • 联系人
  • 发送短信

• 安全

  • 密码算法（rsa）

• 图形图像

  • 多媒体
  • 图片编辑

• 声音音频

  • 音频

• 厂商服务

  • 推送
  • 支付
  • 统计
  • 账号

• 第三方服务

  • 微信支付
  • 支付宝支付
  • 第三方分享
  • QQ账户
  • 微信账户
  • 微博账户

• 日志输出

  打开工程根目录下的src文件夹的manifest.json，找到config配置，将logLevel修改为最低级别debug，即：允许所有级别的日志输出

  {
  　"config": {
    　　"logLevel": "debug"
    }
  }

  console.debug('debug')
  console.log('log')
  console.info('info')
  console.warn('warn')
  console.error('error')

• 远程调试

  远程调试指的是通过 快应用调试器、hap-toolkit的远程调试命令 、chrome devtools调试界面，来调试手机app端的页面

  # 启动http调试服务器
  npm run server

• 构建

  1. watch 只会监听页面变化，manifest、增加图片 不会刷新

• 样式

  1. 底层转换，复杂样式无法实现

• 语法

  1. �需要手动�配置支持相关高级语法

• 组件

  1. 通信：vue 的老一套套路（$dispatch, $broadcast），组件嵌套复杂通信困难麻烦
  2. 系统组件库功能�部分功能设计不好

• 页面路由切换

  1. params参数的每个字段值都会被序列化成字符串
  2. 页面返回回传参数简直无法理解

• 调试�

  1. 对写惯前端热加载来说，发狂，调试器断连、崩溃问题
  2. 调试模式模拟 chrome devtool，界面模拟，功能没有！
  3. 控制台 console 不会显示 object 详情
  4. 此处应该要有个ide...

• 莫名其妙出现莫名其妙的报错。。。

�相关链接：

• 快应用官网
• 开发文档
• awesome-quickapp
• v2ex-quickapp