此文档目的在于：看完后能够对快应用从生态到开发有个概念性的理解，能够清晰开发思路上的调整、工具的准备、技术栈构成。

读者能在阅读完后，结合官方文档、项目例子通过实践就可以掌握快应用的开发。

不提供”从零到XX”此类路线型的教程，不提供文档已有说明的代码使用教程。

简介

  • 安卓十大主流厂商（小米、华为、oppo、魅族…）联合
  • 基于手机硬件平台（系统）提供统一的、标准的接入方式、运行环境。
  • 无需安装，秒开，具有与原生一样的应用体验，能够调用大多数系统功能、服务。
  • 使用前端技术栈开发，基本可以（一些问题的解决思路还是要请教安卓哥）在没有安卓开发经验下面进行快应用开发。
  • 官方文档。以推广的最初阶段而言，文档做得算是用心。大部分能描述得清楚，小部分需要很细心才能“发掘”得出来。

开发体验

起步

  • 首先开发者要具备npm相关的知识或经验。快应用整套开发环境建立在npm生态之上，类比于前端技术栈中的“vue全家桶”的开发模式。
  • 环境搭建直接参考文档，然后阅读快速入门章节尝试运行一个demo项目。
  • 编辑器使用vscode最佳，但原则上只要是个能写代码的都可以，.ux后缀的组件文件与html格式关联后可以高亮显示。
  • 坑点1：请确认系统升至最新；调试器、平台预览版安装后如果还不能正常调试，请重新安装一遍 = =。。。
  • 坑点2：如果遇到npm run server出现报错，就在项目根路径下执行hap update后重新npm install。
  • 坑点3：nodejs版本请保证在7.6以上，别用8.0.*的版本。

调试

  • 在安卓上的调试器，可以唤起PC机上的chrome调试。方式是点击调试器上的“开始调试”。
  • chrome调试界面可以看到当前页面的UI截屏（好low）；
  • 样式、页面结构的功能很不完善；
  • 网络请求栏，使用方法如常。

  • console栏。需要在项目的manifest.json文件设置log级别

    1
    2
    3
    4
    5
    6
    {
    　"config": {
    　     //有debug、log、info、warn、error五个级别。假如设为log，那么console.debug的信息就不会被打印出来。
      　　"logLevel": "debug" 
      }
    }

  • 坑点1：执行npm run watch后，原则上会自动监测文件变动、打包、刷新，但偶现无反应状况，需要在调试器再次点击“在线更新”。

  • 坑点2：在更新图片资源、更改manifest.json配置后，需要重新执行npm run watch 才能生效。

开发模式

  • 先了解原理

    1
    ux/js/css/less/img/json......==webpack==> jsbundle（描述样式、结构、逻辑）、img ==webpack==> rpk(jsbundle被gzip压缩后的文件) ==安卓快应用解析==>调用原生功能

  • 以.ux为后缀的单文件组件开发模式。一个.ux文件为一个组件。路由级（页面）组件、纯逻辑组件、纯结构组件、可复用UI组件。顶级入口文件为app.ux。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <template>
    结构
    </template>
    <script>
    逻辑
    </script>
    <style>
    样式
    </style>

  • 在manifest.json描述整个应用的路由关系、调用功能的声明、应用信息等等。。。一定要细看！

  • js：可以用es6语法（babel转化），async/await。全功能的js，但要注意全局对象是global而非window，而且global的的使用场景有限。
  • 样式：可以使用less（其实直接写css也没有不适感），布局上面只支持flex布局。大体上与web开发的css书写形式上相似，但并不等同于css，只支持有限的属性，渲染机制也（估计）不一样。
  • 结构：与web开发不同，快应用的标签有不同的嵌套关系、支持的样式、事件，这些在文档都有描述。
  • 提示：快应用不提供“浮动”、“绝对定位”、“块级、行内元素”这类概念的特性，降低了灵活性。但是提供各种功能性容器如：stack（层叠）、list、tabs、swiper。思路上面需要转变一些。
  • 总结： 总体开发类似基于webpack的web单页应用开发，但某些特性上又有所区别，不适合照搬经验。

高级特性

接口

  • 路由、弹窗、分享、支付、二维码。。。。。。拥有很多系统级别的功能，支持范围、性能都大幅度领先web应用。

  • 需要在manifest.json文件先做接口声明

    1
    2
    3
    4
    "features": [
        { "name": "system.prompt" },
        { "name": "system.router" }
    ]

  • 调用方式大多数走回调函数风格(但有方式改造成async函数同步调用)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    pkg.hasInstalled({
      package: 'com.hap.app',
      success: function(data) {
        console.log("handling success: " + data.result);
      },
      fail: function(data, code) {
        console.log("handling fail, code=" + code);
      }
    })

  • 调起支付宝支付

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    alipay.pay({
      orderInfo: 字符串形式的支付参数,
      callback:function(ret){
        if (ret.resultStatus === '9000') {
          // 支付成功
        } else {
          // 支付失败
        }
      }
    })

  • 调起微信支付（黑科技：router.push能打开deeplink！）

    1
    2
    3
    router.push({
      uri: 'weixin://wap/pay?支付参数'
    })

组件通信

建议

  • 遇到问题后多去官方论坛逛逛，相当于github的issue区。但没有搜索功能很糟糕。
  • 文档先细看以上提到过的，其他的文档内容可以通过文档的搜索功能检索出来。
  • 文档里多数只列出功能的使用说明，而使用例子偏少，可以下载此官方项目参考代码例子。