30分钟精通快应用

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

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

徐建勇

京东Android开发工程师

京东JDReact多端融合平台组

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

快应用简介

由中国信息通信研究院、电信终端产业协会等联合包括小米中兴华为金立联想魅族努比亚OPPOViVO一加,共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开发,现阶段不能仅仅是原生开发了,要更多的去学习新的技术,去适应新的时代。 这里列出几个相关的学习链接:

  • Flex 布局
  • Quick App 官方文档

希望这篇文档能够对你有所帮助。

原文发布于微信公众号 - 京东技术(jingdongjishu)

原文发表时间:2018-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙|老司机教你玩转Appium自动化测试

Appium自动化测试 活动时间:2016年10月13日 QQ群视频交流 活动介绍:TMQ在线沙龙第十期分享 本次分享的主题是老司机教你玩转Appium自动化测...

37370
来自专栏V站

数据库性能优化冗余字段的作用 数据库冗余

在设计数据库时,某一字段属于一个表,但它又同时出现在另一个或多个表,且完全等同于它在其本来所属表的意义表示,那么这个字段就是一个冗余字段。

18830
来自专栏IT大咖说

前端老牌框架衰退,IMVC(同构 MVC)成未来趋势?

19120
来自专栏hbbliyong

opoa介绍

一 定义       One Page, One Application(后面缩写为OPOA,或者1P1A), 含义很简单:一个页面就是一个应用。不再使用ifr...

35870
来自专栏知晓程序

小程序真的只有 1 MB 吗?/注册小程序需要营业执照吗?/小程序有什么 UI 框架?| 小程序问答 #3

27740
来自专栏互联网杂技

列表设计的一些思路

列表算是一个非常基础的设计元素,无非是一排一排的数据内容,加上一些基本的操作。最近连续设计了一个礼拜的列表后,最直观的感受是:再简单的东西,也有很多的细节需要思...

42190
来自专栏小白课代表

软件分享 | C4D R14 安装教程

18820
来自专栏web前端教室

[一对一讲什么] 之 测完了接口、搞好了目录,然后做啥?

接 [一对一讲什么] 之 切图之后做啥?要加入项目和测试接口 上回书说,切完了页面,把HTML文件啊,CSS,JS,IMG图片什么都扔到相应的开发环境目录里,把...

22680
来自专栏非著名程序员

强烈推荐:绝对是最好的一个小程序开源框架

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程...

25240
来自专栏非著名程序员

强烈推荐:一个非常棒的开源库

今天给大家推荐的一个开源库是大家可能会经常遇到的,可能以后会常常用到的一个开源库。

11620

扫码关注云+社区

领取腾讯云代金券