关于快应用的体验和想法

方军
4,317 阅读8分钟
原文链接： mp.weixin.qq.com

快应用是移动互联网新型应用生态，由十大厂商联合推出与手机系统深度整合，为用户提供更加场景化的体验。

1、快应用具有灵巧轻便的特点，可在应用商店、浏览器、全局搜索、负一屏等位置推广，各厂商快应用入口不同，具体位置请在手机端查看。 2、只针对Android系统，用户无需下载，直接点开使用3、目前可以使用快应用的有10家品牌手机厂商：小米、中兴、华为、金立、联想、魅族、努比亚、 OPPO、vivo、一加

环境搭建

1、安装NodeJS 需安装6.0以上版本的NodeJS，请从NodeJS官网下载，推荐v6.11.3

注意: 不要使用8.0.*版本．这个版本内部ZipStream实现与node-archive包不兼容，会引起报错

2、安装hap-toolkit

npm install -g hap-toolkit

创建项目

hap init <ProjectName>

打开项目

使用Visual Studio Code开发 点击跳转下载Visual Studio Code 安装插件 Hap Extension

目录的简要说明如下：

  • src：项目源文件夹

  • .ux: 页面文件，可以类比为weex里的vue文件，由template模板、style样式和script脚本3个部分组成

  • sign：签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法详见文档编译工具

  • node_modules：依赖包安装路径

编译项目

在项目根目录下，安装依赖

npm install

编译项目

npm run build

报错了：

看了一下路径./bode_modules，不存在hap-tools路径

可是我们刚init project的时候是有的， 现在怎么没有了呢？ 因为package.json的依赖里没有hap-tools，所以高版本的npm经过npm install时，就把node_modules里不需要的文件夹删除了。 于是在根目录下添加hap-tools依赖，执行：

hap update --force

运行之后，刷新一下路径，就有./bode_modules/hap-tools了。 然后继续编译项目：

npm run build

编译打包成功后，项目根目录下会生成文件夹：build、dist

  • build：临时产出，包含编译后的页面js，图片等

  • dist：最终产出，包含rpk文件。其实是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出

预览项目，自动更新

  • 为了开发过程中，每次修改源代码文件后，都自动编译项目，请运行如下命令：

npm run watch

  • 在手机上安装调试器APK，

  • 安装平台预览版 安装成功后，打开调试器应用如下图所示：

  • 终端新开一个窗口，在项目根目录运行

npm run server

  • 使用快应用调试器的扫码安装，扫描二维码，安装快应用

然后由于前面另外一个窗口运行着npm run watch，所以开发过程中，修改文件后，就会自动编译，然后快应用平台预览上就会自动更新了。

项目开发

应用框架

├── manifest.json ├── app.ux ├── Page1 │ ├── page1.ux ├── Page2 │ ├── page2.ux └── Common ├── ComponentA.ux ├── ComponentB.ux └── xxx.png

  • manifest.json 取代了AndroidManifest.xml，用于声明权限，声明系统提供的接口组件，页面路由，显示的配置等。

  • app.ux 是快应用的入口，相当于原生应用的Application.java

  • *.ux 相当于Activity，写法跟vue相差不大，但是也有一些差异，比如引入自定义组件通过import标签来引入

<import name="comp-part1" src="./part1"></import>

APP的生命周期

onCreate、onDestroy 可在app.ux中定义回调函数

export default {
  onCreate () {
    console.info('Application onCreate')
},
  onDestroy () {
    console.info('Application onDestroy')
},
  // 暴露给所有页面的数据，在页面中通过：this.$app.$def.data1访问
  data1: {
    name: '这是APP存的数据'
},
  // 暴露给所有页面的方法，在页面中通过：this.$app.$def.method1()访问
  method1 () {
    console.info('这是APP的方法')
},
  /**manifest**/
}

页面的生命周期

onInit: 表示ViewModel的数据（events,props,data）已经准备好；所以你可以使用props，data中的数据  onReady: 表示ViewModel的模板已经编译完成，所以你可以获取DOM节点（如：this.$element(idxxx)） onShow、 onHide: 页面被切换隐藏时调用onHide()，页面被切换重新显示时调用onShow()

onDestroy: 页面被销毁时调用 onBackPress: 当用户点击返回实体按键、左上角返回菜单、调用返回API时触发该事件 onMenuPress: 当使用原生的顶部标题栏时，可以通过manifest.json中的menu属性配置是否显示右上角的菜单

页面切换及参数传递

  • 通过组件a切换页面和传递参数 路径/PageParams/receiveparams指的是src下的页面路径，通过’?key=value’的方式添加参数，支持参数为变量

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

  • 此外，组件a还提供调起电话、短信、邮件的功能和加载网页的能力

<template>
  <div class="tutorial-page">
    <!-- 包含完整schema的uri -->
    <a href="tel:10086">调起电话</a>
    <a href="sms:10086">调起短信</a>
    <a href="mailto:example@xx.com">调起邮件</a>
    <!-- 打开webview加载网页 -->
    <a href="https://www.baidu.com/">打开网页</a>
  </div>
</template>

  • js代码跳转页面

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

router是系统提供的接口组件，使用前，需要先import

import router from '@system.router'

  • 接收参数 直接在data里定义参数即可自动获取

<script>
  export default {
    data: {
      key: ''
    },
    onInit () {
      this.$page.setTitleBar({ text: '接收参数' })
      // js中输出页面传递的参数
      console.info('key: ' + this.key)
    }
  }
</script>

  • 参数回传 假设存在页面A和页面B，先从页面A跳转至页面B，然后从页面B返回到页面A 时，需要传递参数 页面B的代码，在onHide ()里写入数据 

<script>
export default {
    data: {
msg: ''
},
onInit () {
      this.$page.setTitleBar({ text: '页面B' })
},
onHide () {
      // 页面被切换隐藏时，将要传递的数据对象写入global数据
      this.$app.$data.dataPageB = {
gotoPage: 'pageA',
params: {
msg: this.msg
}
}
},
updateMsg (e) {
      // 更新input输入的信息文本
      this.msg = e.text;
}
}
</script>

页面A show的时候，从global数据中检查是否有页面B传递来的数据

<script>
export default {
    data: {
msg: ''
},
onInit () {
      this.$page.setTitleBar({ text: '页面A' })
},
onShow () {
      // 页面被切换显示时，从global数据中检查是否有页面B传递来的数据
      if (this.$app.$data.dataPageB && this.$app.$data.dataPageB.gotoPage === 'pageA') {
        // 从global数据中获取回传给本页面的数据
        var data = this.$app.$data.dataPageB.params;
        this.msg = data.msg;
}
}
}
</script>

关于页面的跳转和参数传递，跟之前我在接入weex时做的设计，基本一致，详见《Weex在达人店的一年实践》

组件和接口

快应用提供了通用的事件、通用的属性、通用样式等。 快应用提供了丰富的组件，包括基础组件，容器组件，表单组件，媒体组件，其他组件等。 快应用也提供了丰富的接口，基本包括的设备的所有能力，包括：

  • 基本功能 

    • 应用上下文

    • 日志打印

    • 页面路由

  • 界面交互 

    • 分享

    • 弹窗

    • 打开网页

    • 通知消息

    • 震动

  • 网络访问 

    • 上传下载

    • 数据请求

  • 文件数据 

    • 数据存储

    • 文件存储

  • 系统能力 

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

  • 安全 

    • 密码算法

  • 图形图像，声音音频

  • 厂商服务： 

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

  • 第三方服务： 

    • 支付宝支付，微信支付，第三方分享

项目的发布

目前快应用的发布，需要在快应用平台申请账号，然后绑定需要上家的应用商店的开发者账号，然后上传build出来的rpk

练手项目

性感的技术 https://github.com/or0fun/quickapp-gank

接口数据来自干货集中营 gank.io，感谢。

与weex、微信小程序的对比

对比 快应用 weex 微信小程序
渲染 Native 支持Native，也可以降级为Web Web
运行环境 Android（支持快应用的部分机型） Android和iOS 微信环境
开发形式 新建一个快应用 集成到原生应用 新建一个小程序
发布 rpk 压缩包，上传快应用平台 产物 js 文件，下发到集成了weex sdk的应用 微信开发者工具直接上传审核
大小限制 rpk小于1M 没有限制 小于2M
发布 快应用平台 各大Android应用商店和Apple Store 微信小程序平台
更新 需要重新发布，需要审核 没有原生能力支持的功能和bug可以动态更新，需要原生支持的需要发布或者使用native 的 热修复，无需审核 重新上传，需要审核
开发工具 无特定IDE，推荐VS Code 或者 WebStorm 无特定IDE，推荐VS Code 微信开发者工具
开发语言 类Vue结构，由template模板（类HTML）、style样式和script脚本3个部分组成 默认Vue，由template模板（类HTML）、style样式和script脚本3个部分组成，也可以通过Rax使用React编写 提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架

对快应用的思考

快应用直指微信小程序，不过比起小程序有两个很大的劣势：

  • 小程序拥有的社交优势是无可比拟的；

  • 快应用只支持联盟里的10家Android手机厂商新的系统，所以老机型以及所有的iOS都是不支持的。这样对于产品的一致性来说是一个很大缺憾；

另外，发布的审核体验不佳，这是我开发的快应用的审核现状，两天了

不过快应用的优势也有：

  • native 的体验

  • 丰富的接口、组件

  • 具备传统APP完整的应用体验，无需安装、即点即用

  • 开发体验很不错

觉得快应用目前也是有点尴尬，对于创业小公司或个人开发者初期更愿意选择小程序来获取更多永华；而对于相对较大的公司更希望拥有自己独立的App以及iOS和Android的产品一致性。快应用毕竟大小限制只有1M，能做的事情相对有限，只能针对主要的场景进行额外开发，目前无法替代原生Android应用。

且行且看。有些公司应该也会试试水，看看快应用到底能不能获取更多用户再观望吧。

参考： https://juejin.cn/post/6844903581393354759?t=2018323

avatar
文章
阅读
粉丝