快应用的开发体验

发表于 | 分类于

快应用

快应用官网介绍：快应用是一种新的应用形态，以往的手机端应用主要有两种方式：网页、原生应用；网页无需安装，却体验不是很好；原生应用体验流畅，却需要从应用商店下载安装，难以一步直达用户；快应用的出现，就是希望能够让用户无需下载安装，并且还能流畅的体验应用内容。

为了达到上面的目标，快应用建立一种新的语言开发规范，同时提供一系列的开发套件辅助支持。简单来说，开发者主要利用前端知识与技能，以及对应的IDE，手机设备就可以做原型的开发。快应用使用前端技术栈开发，原生渲染，同时具备H5与原生应用的双重优点，开发者使用的前端技术栈资料多，学习成本低。

2018年3月份，由小米，OPPO，VIVO，华为等10家国内主流厂商成立了快应用联盟，从技术规范层面做了统一，并保证了开发者开发的快应用可以直接在所有的联盟内厂商的手机设备上运行。

快应用框架深度集成进各手机厂商的手机操作系统中，可以在操作系统层面形成用户需求与应用服务的无缝连接，很多只用在原生应用中才能使用的功能，在快应用中可以很方便的实现，享受原生应用体验，同时不用担心分发留存等问题，资源消耗也比较少。

对于每台手机设备，应用可以从多个系统入口，引用用户体验产品。比如：全局搜索、负一屏、浏览器搜索等。

快应用开发

开发者参与快应用开发，主要分为以下几个步骤:

  • 快应用官网注册
  • 完善资料
  • 绑定厂商开发者账号(至少一家)

完成以上三部，快应用开发者就可以提交快应用，快应用具有以下特点：

  • 快应用采用前端技术栈，运行可开发效率高，学习成本低，代码可复用
  • 快应用开发需要基本基础的前端知识，如 标签， 样式， js脚本
  • 快应用使用 MVVM的设计模式进行开发，开发者无需直接操作DOM节点的增删，利用数据驱动的方式完成节点更新。
  • 当前标准的开发规范与Vue的开发方式相近，后期可能开放并接入其它的DSL开发方式，以符合开发者的开发习惯。

环境搭建

快应用的环境和工程搭建参考；

本地环境要求：

  • NodeJS 8.0以上（建议10.0+）

工程结构初始化步骤：

  1. 全局安装快应用编译工具：npm install -g hap-toolkit；可以使用查看hap -v版本
  2. 创建工程模板：hap init <ProjectName>；会以工程名新建文件夹，并初始化快应用项目模板结构
  3. 将初始化工程推送至远程仓库：git remote add origin <远程git项目地址>

本地开发环境搭建：

  1. 安装官方IDE：https://www.quickapp.cn/docCenter/post/97
  2. 通过快应用IDE打开初始化后的快应用工程，可以预览初始化工程的简单效果；

基础开发

  1. 进入工程根目录下，并安装模板需要依赖：npm i;
  2. 编译项目： npm run build；（如果希望每次修改源代码文件后，都自动编译项目可以使用：npm run watch）
    • 编译打包成功后，项目根目录下会生成文件夹：build、dist
    • build：临时产出，包含编译后的页面 js，图片等
    • dist：最终产出，包含 rpk 文件。其实是将 build 目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出
  3. 更多快应用开发内容参考快应用官网
  4. 通过项目结构解析来了解快应用的基本框架和
  5. 通过快应用的组件来构建页面，通过接口来调用一些native的功能；

本地调试

通过IDE我们可以简单的模拟本地调试，IDE的左下侧有四个图标，有一个眼睛👁的图标可以用来预览当前工程的效果；预览框左下角有一个开关可以打开预览页的 dev tools来查看一些内容；

注意：

  • 模拟器很多native功能并没有实现，所以在调用native的定位 设备信息等功能时会存在问题；
  • 模拟器中的生命周期的实现也存在部分缺陷，不能完全按照正确的周期来执行；
  • 部分样式可能在预览界面好真机上存在表现差异；

真机调试

真机调试【真机调试工具apk、快应用预览版apk】

打包和发布相关

  1. 打包
    • 区分环境打包，打包按钮是左下侧的一个小飞机🛩按钮，产物会在dist对应的目录下面

  2. 安装

    • 测试时使用快应用调试器和快应用预览版来安装对应环境的apk包

  3. 上传

    • 首先需要打包，打包前需要找到 /src/manifest.json 修改"versionName": "1.0.2", "versionCode": "3"两个字段
    • 将版本versionName 改为新的版本，versionCode + 1 操作
    • 点击打包按钮【是左下侧的一个小飞机🛩按钮】，产物会在dist对应的目录下面
    • 上传到快应用的开发者管理中心即可等待审核
    • 每次更新一个版本需要添加tag记录：1. 创建Tag 是直接加名字就ok了，格式： git tag newTagName –m "注释" 2. git push origin newTagName 【分支和tag同名时可以这样推送：git push origin tag newTagName】
  4. 登录快应用中心，上传生成的包，里面包括账号和相关资质的一些非开发内容需要自己处理。

开发注意事项

  1. 目前快应用是使用6.4版本V8引擎来运行JavaScript，快应用的script中不可以运行标准JavaScript外的一些内容；
  2. div 组件不支持直接编写文本，文本一律使用 text 组件
  3. list组件相关
    • list 组件内部仅支持 block 和 list-item；
    • list组件相同的 type 组件的 元素结构和层级 必须完成一样，否则可能会存在某些表现 bug；
    • list相同type的组件想要实现差异化展示，可以保持元素结构，根据内容设置元素的 宽高，来隐藏那些不需要展示的组件；
  4. IDE中的预览模式不支持 定位等内容，可以先手动设置 storage 来模拟实现；
  5. 关于分层级展示，需要使用 stack 来实现，会一层一层重叠展示，后者覆盖前者；
  6. 事件需要
  7. props 需要注意父组件传入格式使用 横线-，而子组件接收使用 驼峰格式；
  8. web组件 需要设置 trustedurl（否者web内部页面的url变化后会出现 postmessage无法使用的情况），支持正则【切记用JSON保存传递正则存在问题】