快应用及实践

简介

快应用,一个由中国十家手机厂商联合打造的应用分发渠道生态。简而言之,十家联合起来对抗微信小程序,在手机系统中提供直达应用的入口,此类操作可谓直击商家心灵,赶紧双击666。
官方说了三点来诠释快应用包括的内容:
1. 快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。
2. 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。
3. 快应用具备传统APP完整的应用体验,无需安装、即点即用。
可以理解为,开发者平台 + QuickAPP分发渠道 + 系统级环境支持。

开发实现

快应用的开发分为几步:
0. 环境搭建
1. 创建项目
2. 安装依赖
3. 编译项目
4. 安装rpk包

环境搭建

首先了解几个概念:
toolkit工具hap-toolkit;
调试器debugger;
平台预览版mockup platform。

然后需要准备:
第一步,需安装6.0以上版本的NodeJS。

第二步,安装hap-toolkit

npm install -g hap-toolkit

第三步,安装调试器。
下载地址
注意:若打开调试器无法点击按钮,请升级手机系统到最新版本或安装平台预览版

第四步,安装平台预览版。
较新的系统版本中内置平台正式版,开发调试平台新功能可使用平台预览版。
下载地址
下载安装成功后,在手机调试器中点击切换运行平台至org.hapjs.mockup,即可在平台预览版上安装运行rpk包

创建项目

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

hap init <ProjectName>

利用工具生成了一个完整的项目模板

├── 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 install

如果开发者在后续操作中遇到报错Cannot find module ‘…/node_modules/hap-tools/webpack.config.js’,请运行一次hap update –force(执行完毕后不需要按照提示再次运行npm install)
这是由于高版本的npm(如:NodeJS v8版本使用npm5)在npm install时,会校验node_modules目录,并删除其中的hap-tools文件夹,从而导致报错;开发者运行hap update –force,会重新复制hap-tools文件夹到node_modules中

编译项目

npm run build

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

安装rpk包

编译项目产出了rpk包后,请打开手机调试器。
调试器可使用后,就可以在调试器上安装rpk包了。支持以下两种安装方式,开发者可根据场景选择其一
扫码安装
适用场景:高频率更新rpk包
优点:自动更新rpk包,方便快捷
缺点:需要开发者启动HTTP服务器,并确保手机与PC在同一局域网

1 启动HTTP服务器
在终端中新建一个窗口,进入项目的根目录运行如下命令,启动本地服务器(默认端口为12306)

#启动本地服务器(默认端口为12306)
npm run server

#自定义端口(如:8080)
npm run server -- --port 8080

2 在手机上预览运行效果

配置HTTP服务器地址有两种方式,以下两者选其一即可:
打开调试器 –> 点击”扫码安装”,扫描终端窗口中的二维码即可完成配置(若扫描不成功,可在浏览器中打开页面:http://localhost:,扫描页面中的二维码)
打开调试器 –> 点击右上角menu –> 设置,输入终端窗口中提示的HTTP服务器地址
配置完成后,可点击在线更新唤起平台运行rpk包

若提示安装失败,请检查执行npm run server的终端窗口是否正常运行

本地安装
适用场景:仅预览效果或低频率更新rpk包
优点:只需将rpk包复制到手机中,本地安装选择rpk包即可
缺点:需手动更新rpk包
1 复制rpk包到手机中
/dist目录下编译产出的rpk包通过USB数据线或其他方式,复制到手机文件系统中
2 本地安装rpk包
打开调试器 –> 点击”本地安装”,选择手机文件系统中的rpk包,并自动唤起平台运行rpk包,查看效果

IDE支持

使用Visual Studio Code开发,启动Visual Studio Code,打开项目,点击左上侧扩展,搜索hap,安装Hap Extension。
使用WebStorm开发
使用Sublime Text开发
官方推荐Visual Studio Code,主要是因为可以集成hap工具插件。其他两款需要以编辑html文件的方式关联ux文件(ux文件其实就是html文件改了后缀名)。

开发与调试

调试分为:
1. 使用日志输出
2. 远程调试

日志输出

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

{
 "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

开发者可以通过命令行终端或者调试服务器主页看到提供扫描的二维码
开发者通过快应用调试器扫码安装按钮,扫码安装待调试的rpk文件
开发者点击快应用调试器中的开始调试按钮,开始调试
注意:使用远程调试请确保手机与PC在同一局域网

代码风格

快应用的开发文档还是比较全面的,类比微信小程序的开发文档,更侧重框架的使用指导。做过angular、vuejs、reactjs以及小程序开发的都可以直接上手,懂一些JS的也可以快速上手。
例如:一个简单的隐藏、展现模块。

<template>
  <div class="tutorial-page">
    <text onclick="onClickShow">显示隐藏:</text>
    <text show="{{showVar}}">show: 渲染但控制是否显示</text>

    <text onclick="onClickCondition">条件指令:</text>
    <text if="{{conditionVar === 1}}">if: if条件</text>
    <text elif="{{conditionVar === 2}}">elif: elif条件</text>
    <text else>else: 其余</text>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
  }
</style>

<script>
  export default {
    private: {
      showVar: true,
      conditionVar: 1
    },
    onInit () {
      this.$page.setTitleBar({ text: '指令if与指令show' })
    },
    onClickShow () {
      this.showVar = !this.showVar
    },
    onClickCondition () {
      this.conditionVar = ++this.conditionVar % 3
    }
  }
</script>

语言风格方面:
当前应用平台本身仅支持ES5的语法,所以要支持它必须借助babel之类的语法分析转换工具,同时还要在代码中注入polyfill。
这看起来不怎么与时俱进,姑且可以看其未来是否支持。

框架特性

框架应用开发与传统的H5页面开发之间有一个显著的不同点:
应用是多页面共享同一个V8 Context,而H5页面通常是一个页面一个V8 Context,页面间无法通讯。
当然微信小程序也是类似的机制,而框架本身通过框架API实现函数共享。
这一特性并不是快应用之所以“快”的原因,大概是所有SP框架的共同特性。

平台功能

框架支持通过链接从外部打开应用。

http://hapjs.org/app//[path][?key=value]
https://hapjs.org/app//[path][?key=value]
hap://app//[path][?key=value]
但是,官方说了,不同的厂商对该能力可能有不同限制,使用前请和相应厂商确认。
好吧,这一点我非常不能苟同,十家厂商号称统一标准,看来利益不同,还是想在分蛋糕的时候多蹭点奶油。

URL跳转配置

URL跳转配置是指在H5页面中可以通过调用接口跳转到应用。
简单说普通网页可以通过JS实现调起快应用。

接入成本

快应用接入有以下步骤:
1. 注册快应用联盟帐号,在快应用官网申请开发者资质
注册引导入口 ,进入点击右上角注册。

  1. 绑定各厂商开发者帐号,与品牌厂商开发者帐号绑定,一站式上架多厂商全平台入口。
    注册及绑定账号
    注册绑定要提供很多资料,各家厂商开发者平台要求可能有不同,建议先收集好各家的要求再统一准备申请材料。

  2. 开发快应用

  3. 发布快应用
    目前根据官方描述,快应用在各大厂商推广的入口:
    https://bbs.quickapp.cn/forum.php?mod=viewthread&tid=552

从注册成本看,需要跟十家厂商的开发者平台分别对接,但一次对接绑定以后就不用这么麻烦了。
从开发和发布成本看,需要对产品进行代码重构,但仅限于模板和交互层面。代码甚至可以从以前的项目里直接获取重用。

总结

快应用已经筹备了大半年,对于想快速拓展业务渠道的商家非常有利。在流量风口期蹭一波也是666,但到了窗口期就要衡量好ROI了。
作为一个前端的项目,此时此刻更考验底层服务的设计,如果过往的产品构建与松耦合、微服务等架构之上,开发一套前端层面的展现可以轻松扩展产品的渠道覆盖。反之,就需要投入一定的成本搞这些事。

参考

QuickApp文档

发表评论

电子邮件地址不会被公开。 必填项已用*标注