30分钟精通快应用

京东技术

发布于 2018-04-10 15:50:12

1.7K0

发布于 2018-04-10 15:50:12

文章被收录于专栏：京东技术京东技术

来这里找志同道合的小伙伴！

阅读全文大约需要10分钟，动手实践大约需要30分钟。

徐建勇

京东Android开发工程师

京东JDReact多端融合平台组

参与并重构多个项目，完成京东多个JDReact上线项目

快应用简介

由中国信息通信研究院、电信终端产业协会等联合包括小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、ViVO、一加，共10家手机厂商在北京发布快应用生态平台，目的是希望解决应用服务与触达难题：

与传统App相比，用户直接跳过了下载安装过程，所见即所得，以达到高转化的目的

快应用官网https://www.quickapp.cn/
开发文档https://doc.quickapp.cn/

快应用技术架构

快应用平台架构

快应用运行时架构

官网的介绍来看，快应用采用前端技术栈，熟悉前端开发的同学几乎不需要任何学习成本：

标准JS语法
重组CSS/标签
Flexbox布局
MVVM模式

在实践过程中，发现有一些前端语法虽然在官网上标注的是支持，但是编译命令却提示暂没有该css标签，前端也没有生效，相信后续应该会有更好的支持。

快应用上线实例

在官网看到已经有这么多合作案例，于是打开小米应用商店，搜索微博，看到有微博极速版，点击秒开

无需安装，直接打开了微博了快应用页面，页面较微博原版app少了很多功能，目前只提供了信息流，还没有开放登录注册功能，不过总的体验还是很不错的。

快速入手

开发文档已经提供了非常详细的环境搭建步骤，这里以Windows为例（如果你拥有一台mac，那就更好了），3分钟搭建开发环境。

安装NodeJS, 官网推荐的是v6.11.3版本，出于兼容性考虑，官网强调不要使用8.0.*版本。Windows v6.11.3版本下载地址：https://nodejs.org/dist/v6.11.3/
执行以下命令安装开发工具包

npm install -g hap-toolkit

由于身处国内，运行该命令可能需要很长时间，或者根本无法响应^_^，此时需要配置

npm config set registry https://registry.npm.taobao.org

成功输出版本号代表安装成功

hap -V

初始化工程

hap init hello-quick-app

该命令在windows上执行完毕前端没有任何反馈，不要等待，直接ctrl+c退出即可

切换至 hello-quick-app根目录，执行

npm install

手机安装调试器https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803200129552999556.apk 笔者认为，这里的调试器，其功能为一个载体微信小程序中，微信相当于一个载体，小程序需依附于微信客户端才可以运行，微信客户端提供了小程序的运行时环境；轻应用中，各手机厂商应用商店相当于一个载体，轻应用需依附于应用商店才可以运行，应用商店提供了轻应用的运行时环境；
打开调试器app，可能所有按钮都不可点，此时需要升级手机系统版本。

编译项目&运行根目录下运行如下命令生成rpk

npm run build

或者

npm run watch

修改代码后会自动编译生成rpk 为了增加调试便携性，这里采用启动一个http 服务器的方式：

npm run server -- --port 8889

端口可任意指定，只要与其他端口不冲突就行

击扫码安装，即可运行示例demo

快速开发自己的应用

快应用采用Flex布局方式，以京东领京豆页面为例，快速画出UI，修改 Demo/index.ux文件：

<template>
  <div class="demo-page">
    <image class="image" src="https://m.360buyimg.com/mobilecms/jfs/t17263/26/637571351/69343/7c0624d4/5a9cf431N2ad48066.jpg"/>
    <image class="pic" src="https://storage.jd.com/i.imageUpload/6e6a5f7465737431343932343131323539323139_big.jpg"/>
    <div class="bean-box">
      <div>
        <text class="mybean">我的京豆:</text>
        <text class="bean-number">{{beanNumber}}</text>
        <text class="mybean"> 个</text>
      </div>
      <image class="sign-progress" src={{buttonImg}}/>
    </div>
    <image class="sign-button" src="./sign_info_button.png"/>
    <text class="sign-text" onclick="onSignClick">{{buttonText}}</text>
    <a href="openapp.jdmobile://virtual?params={"category":"jump","des":"enjoybuy", "source":"来源"}">{{buttonText}}</a>
  </div>
</template>

页面布局没有很复杂，这里以bean-box样式为例简单说明：

.bean-box{
    flex-direction: column;
    position:fixed;
    top:80px;
    left:140px;
  }

绝对布局的关键字为 fixed，在React Native开发中，绝对布局的关键字为 absolute，两者略有区别。

这里值得说明的是，android由于屏幕碎片化严重，开发者往往需要消耗不少精力在屏幕适配上面，快应用的长度单位支持 px 和 %,这里介绍一下比较简单的方式：

修改 配置文件manifest.json:

"config": { 
    "designWidth": 750
}

750代表设计给出的设计稿基准宽度，接下来的UI布局中，只需简单的根据设计稿尺寸px填写控件大小了，还是非常方便的

编写js：当点击签到领京豆按钮时，增加京豆数量，改变签到状态图，同时改变按钮文字：

<script>
  export default {
    data: {
      text: '欢迎打开详情页',
      beanNumber:9999,
      buttonText:"签到领京豆",
      buttonImg:"./progress_unsign_6.png"
    },
    /**
     * 当用户点击菜单按钮时触发，调用app中定义的方法showMenu
     * 注意：使用加载器测试`创建桌面快捷方式`功能时，请先在`系统设置`中打开`应用加载器`的`桌面快捷方式`权限
     */
    onMenuPress() {
      this.$app.showMenu()
    },

    onSignClick(){
      this.beanNumber=1001;
      this.buttonText="今日已签到";
      this.buttonImg="./progress_sign_7.png"
    }
  }
</script>

实际操作中，会遇到的各种各样的问题，如：

新增加图片时，需要重新运行编译命令，自动更新或者扫二维码都不生效
, 与 ;使用不当运行会报错，要严格区分其使用场景

再给示例增加一个轮播图

<swiper class="swiper-con">
      <image src="https://m.360buyimg.com/mobilecms/jfs/t18475/66/665020317/61221/4624fd1a/5a9cf48dN0c260759.jpg!q70.jpg"/>
      <image src="https://m.360buyimg.com/mobilecms/jfs/t18475/66/665020317/61221/4624fd1a/5a9cf48dN0c260759.jpg!q70.jpg"/>
</swiper>

整个页面运行起来示例如下：

应用唤起

在实际的开发过程中，开发者需要有唤起快应用或者从快应用唤起原生app的能力。快应用框架支持通过deeplink连接从外部打开应用，支持的格式有：

http://hapjs.org/app/<package>/[path][?key=value]
https://hapjs.org/app/<package>/[path][?key=value]
hap://app/<package>/[path][?key=value]

例如，开发者可以从外部唤起快应用：

<html>
  <body>
    <a href="hap://app/com.application.demo/" style="font-size:40px">跳转quick app</a>
  </body>
</html>

其中，com.application.demo为快应用包名。保存该文件从浏览器打开，会自动唤起快应用

快应用&微信小程序&JDReact三者比较

最后

本文只是简单介绍了一下快应用的入门，开发文档上还有很多的内容需要各位有兴趣的开发者自己去研究。虽然目前开发文档相比微信小程序还有不少差距，比如示例不全，也没有类似小程序一体化的开发环境，不过对于有兴趣的同学来说，这都不是事。技术的发展是非常快的，作为一名Android开发，现阶段不能仅仅是原生开发了，要更多的去学习新的技术，去适应新的时代。这里列出几个相关的学习链接：