秒开秒用，用完即走

快应用最大的特点就是秒开妙用，用完即走。

小米快应用前端负责人 董永清 如是说。

《快应用开发与实现指南》的学习笔记。

​ 作为原生APP开发者，对H5开发并不是很了解，尤其是涉及到架构方面，学习快应用相关知识，主要是了解现在手机应用开发的趋势，各种技术的实现原理和特点。

​ 快应用在实现方案上，对标微信小程序，体验上应该也比较类似，只是提供原生支持的从微信应用换到了手机厂商的内置支持。

背景介绍

• 什么是快应用，视频介绍

  • 秒开
  • 用完即走
  • 3月20日，小米及其它9家厂商宣布快应用诞生，统一了标准
  • 多家手机厂商内置到room中

• 多场景应用

  • -1屏、浏览器入口、全局搜索入口、应用商店入口等

• 技术如何做到

  • 移动网页 - 无需安装，升级容易；性能差，功能确实

  • 原生应用 - 性能好，功能完整 ；需要下载安装，版本问题

  • 快应用 - 秒开，容易管理，性能好，功能完整

  • 开发体验：接入成本大？

    • 和H5开发体验类似

      • 静态页面

        • 标签
        • 样式
        • 脚本

      • 调整样式

        • flex
        • css属性子集
        • 多种选择器

      • 系统能力

        • import引入系统能力，import prompt from ‘@system.prompt’
        • 调用方法 prpmpt.showToast()
        • 其它功能

      我理解的系统能力，就是系统内置一套快应用专用的web框架，和微信的小程序的方案完全相同。

      • 响应事件
        • 模块定义 ViewModel
        • 数据模型 public，protected，private
        • 组件事件 click，appear，focus
      • 声明周期
        • 页面创建
        • 页面可见性
        • 页面销毁
        • 按键响应 - 实体按键，虚拟按键

开发体验

• 组件化
  • 自定义组件
    • 引入组件
    • 使用组件
• 原生组件
  • List，list-item，tabs等
• 动画
• 调试开发
  • devtools
    • Elements 查看dom结构
    • Style 修改节点样式
    • Source 调试js代码
    • Console 输出日志，数据结构
• 总结
  • 前端概念 + MVVM + 组件化

架构概述

• 编译时

  • ux页面：html + style + script
  • js页面：json+js
  • 页面UI：DOM树

• 运行时

  • rpk压缩文件

• 流程

  • UX => 编译时 => JS页面 => 运行时 => 页面UI
  • 多页面 => 编译时 => rpk压缩文件 => 运行时 => 应用

• 编译时工具

  • hap-toolkit工具
    • 脚手架
    • 编译器
    • 调试器/服务器

• 运行时

  • js引擎
  • 渲染引擎

• JS层架构

  • 架构输出
    • MVVM
    • 组件化
    • 数据驱动
    • Diff实现
  • 应用管理
    • 页面
    • 生命周期
    • DOM模型
    • 样式计算
  • 基础能力
    • 组件
    • 系统能力
    • 第三方服务
    • 回调机制

• DOM模型

• 样式计算引擎

  • 编译样式
  • 元素更新
  • 合并计算
  • 优化
    • 选择器规则分类
    • 缓存元素子节点匹配规则
    • 懒合并计算

• 页面渲染

  • 创建页面 -> 建立DOM模型 -> 节点转换、布局 -> Android OS层