快应用之开发体验纪要

时间: 2018-10-06阅读: 1731标签: 技巧

何谓「快应用」呢?它是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。快应用具备传统 APP 完整的应用体验,无需安装、即点即用; 覆盖 10 亿设备,与操作系统深度集成,探索新型应用场景。


快应用特点

下面列出些关于「快应用」特点,这将有助于对它有更深刻的理解;

  • 基于手机硬件平台,标准由主流手机厂商组成的快应用联盟制定;
  • 无需安装、即点即用,且具备传统 APP 完整的应用体验;
  • 与操作系统深度集成,一键直达;
  • 更新直接推送,新版本直接更新到后台,用户无感知快应用的技术实现;
  • 基于前端技术栈开发、可快速迭代;
  • 通过全新的引擎,将系统原生的渲染机制和接口能力提供给上层应用;
  • 运行在框架应用进程中,对每个快应用会开一个 Launcher 进程快应用的开发、发布和使用流程;
  • 开发者需要在快应用官网注册,上传至快应用官网,测试并通过审核后即可进行分发;
  • 使用前端技术栈进行开发,经过编译、签名后最终产出 rpk 文件;
  • 开发者需登录快应用官网进行上传和发布,发布前会经过审核快应用与小程序的对比;
  • 快应用使用 native 渲染,性能体验会比较好,而小程序是使用 webview 渲染 ;
  • 快应用的系统级能力更强,能调用更多系统级 API;


与小程序对比

──开发技术渲染方式硬件资源扶持系统级能力桌面留存
小程序前端技术栈webview 渲染
快应用前端技术栈native 渲染

以上这些比对,皆是从两者的出生角度而言;可以肯定的是,「快应用」得益于其与生俱来的优势,将在更多应用场景发挥作用,它的崛起,将会给 Android 用户带来更多的便捷。同时作为后起之秀,其开发体验上,是明显优于小程序的;但目前的小程序,已经有长足的发展,而「快应用」才处于刚起步阶段,在经验累积、应用数量、分发传播、社区建设等方面,两者之间还存在些差距;后续故事将会如何,让我们将拭目以待。


开发 & 调试

环境搭建

  • 鉴于「快应用」基于前端技术栈来开发,因此需要安装 Node.js (>= 6.0);yarn (推荐使用)。
  • 安装 hap-toolkit ;它是针对「快应用」衍生出的开发者工具
yarn global add hap-toolkit
// 检测是否成功安装 hap-toolkit
hap -V


  • 手机安装「快应用」调试器 ── 一个 Android 应用程序,它可以连接到手机系统内的快应用执行环境,包含扫码安装、本地安装、在线更新、开始调试、等功能;

扫码安装:配置 HTTP 服务器地址,下载 rpk 包,并唤起平台运行 rpk 包;
本地安装:选择手机文件系统中的 rpk 包,并唤起平台运行 rpk 包;
在线更新:重新发送 HTTP 请求,更新 rpk 包,并唤起平台运行 rpk 包;
开始调试:唤起平台运行 rpk 包,并启动远程调试工具

备注:当您的手机系统尚未内置快应用运行平台,或您想在开发过程中体验快应用尚未正式发布的新功能、新特性,您可以安装 快应用预览版,这是一个包含了快应用基础功能的 Android 应用程序。下载安装成功后,通过快应用调试器可以选择在快应用预览版运行 rpk包,开发测试对应平台的 api 和功能。更详细的叙述,请参见快应用开发文档 | 环境搭建 


开发环境

在「快应用」中,对代码编辑配置做了说明;你可以使用 VsCode、Sublime Text、WebStorm 等工具来开发。鉴于官方针对 VsCode 推出了 Hap Extension 扩展,这里推荐使用 VsCode 来编写快应用代码(据悉,专门用于开发「快应用」的编辑器,尚在开发中 18-08-15)。


开发调试

在开发文档调试工具一节,对此有详细说明;从一般性开发角度总结而言,只需运行以下两个命令: npm run server 和 npm run watch;前者会在终端会输出一个二维码,用手机上启动快应用调试器,点击扫码安装扫描,即可下载安装 apk 包,并运行之;而后者将会启动文件监视器,每次修改工程文件时,会自动编译并在手机端刷新,速度蛮快;至于日志查看,可利用 devtools 调试界面 console 输出,也可利用 adb 工具,在终端进行查看:

adb logcat -s jsConsole

快应用示例

在安装 Toolkit 工具后,可通过全局 hap 命令创建一个项目模板,如下所示:

hap init <YourProjectName>

鉴于其内置的 Demo 项目示例,尚处于入门级项目设定(@18-08),不便于用户着手开发,且不利于高效编写、维护;因此,有将编写的快应用 nicelinks-quick-app 开源,借此以探索新型应用设计;此外,也是在探索如何构建优质快应用,希望可以在此事儿上提供些参考。其代码组织结构如下:

├── sign                # 存储 rpk 包签名模块;
│   ├── debug           # 调试环境证书/私钥文件
│   └── release         # 正式环境证书/私钥文件
└── src
│   ├── assets          # 公用的资源(Images/Styles/字体...)
│   │   ├──images       # 存储 png/jpg/svg 等公共图片资源
│   │   └──styles       # 存放 less/css/sass 等公共样式资源
│   ├── helper          # 项目自定义辅助各类工具
│   │   ├──apis         # 存储与后台请求接口相关(已封装好)
│   │   ├──ajax.js      # 对系统提供的 fetch api 进行链式封装
│   │   └──util.js      # 存放项目所需公共工具类方法
│   ├── pages           # 统一存放项目页面级代码
│   ├── app.ux          # 应用程序代码的人口文件
│   └── manifest.json   # 配置应用基本信息
└── package.json        # 定义项目需要的各种模块及配置信息


有必要谈及的是,此项目秉承在高效开发 Web 单页应用解决方案中所传递的理念:为高效开发而设计;相比于内置 Demo,她具有以下诸多优点:

  • 对项目结构进行优化;如上组织结构所示,将各资源模块,更专业的分门别类,使之可以便捷的去编写、维护、查找,同时也是基于前端开发既定共识去设计,更容易为初接触者所理解 & 上手;
  • 更优雅的处理数据请求;采用 Promise 对系统内置请求 @system.fetch 进行封装,并抛出至全局,使得可以极简的进行链式调用,同时便捷地处理返回数据
  • 内置了样式处理方案;「快应用」支持 less, sass 的预编译;这里采取 less 方案,并内置了部分变量,以及常用混合方法,使得可以轻松开启样式编写、复用、修改等;
  • 优化本地开发端口设定
    站长推荐

    1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

    链接: https://www.fly63.com/article/detial/1122

网站性能延迟加载图像的五种技巧

即使经过适当的优化,图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能,它们会失去耐心,转向其他地方,除非你能想出一个不影响速度感知的图像加载解决方案。在本文中,您将学习有关延迟加载图像的五种方法

Vue 开发必须知道的 36 个技巧

Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版;所以应该趁还没出来加紧打好 Vue2.x 的基础;

在Vue.js编写更好的v-for循环的6种技巧

在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环。首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性

整理JS有用的技巧

这些技巧可能大家大部分都用过了,如果用过就当作加深点映像,如果没有遇到过,就当作学会了几个技巧。确保数组值;获取数组唯一值

web性能优化的15条实用技巧

javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事

几个牛X的js开发技巧

使用 grid ,需要重新创建原始数据,并且每行的列长度可能不匹配, 为了确保不匹配行之间的长度相等,可以使用Array.fill方法。ES6 提供了从数组中提取惟一值的两种非常简洁的方法。不幸的是,它们不能很好地处理非基本类型的数组

编写更快、更好的JavaScript的13个技巧

10年前,亚马逊分享一个例子,每100毫秒的延迟都会是他们损失1%的销售收入,即在全年中,每增加1秒钟的加载时间将使该公司损失约16亿美元。同样,谷歌发现搜索页面的生成时间增加500毫秒,访问量将减少20%,潜在的广告收入也将减少五分之一

11 个Js精简技巧

当我开始学习JavaScript时,我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。在这篇文章中,我将分享11条我认为特别有用的技巧

React 开发必须知道的 34 个技巧

React 是前端三大框架之一,在面试和开发中也是一项技能;本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学;万字长文,建议收藏。

封装Vue组件的一些技巧

写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式。以弹窗组件为例,一种实现是在需要模板中引入需要弹窗展示的组件,然后通过一个flag变量来控制弹窗的组件,在业务代码里面会充斥着冗余的弹窗组件逻辑,十分不优雅。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!