30分钟精通快应用
来这里找志同道合的小伙伴!
阅读全文大约需要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开发,现阶段不能仅仅是原生开发了,要更多的去学习新的技术,去适应新的时代。 这里列出几个相关的学习链接:
- Flex 布局
- Quick App 官方文档
希望这篇文档能够对你有所帮助。
- Leetcode-Easy 796. Rotate String
- 2017.10.23解题报告
- Leetcode-Easy 461.Hamming Distance
- 洛谷P1439 最长公共子序列(LCS问题)
- Leetcode-Easy 575. Distribute Candies
- 洛谷P2115 [USACO14MAR]破坏Sabotage
- 修改nw.js的exe文件使其请求管理员权限
- Leetcode-Easy 728. Self Dividing Numbers
- Leetcode-Easy 412. Fizz Buzz
- 洛谷P2678 跳石头
- 洛谷P2863 [USACO06JAN]牛的舞会The Cow Prom
- 洛谷P1908 逆序对(归并排序)
- 洛谷P1137 旅行计划
- 洛谷P1722 矩阵 II
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- HTTP对接方式
- 使用ShardingSphere 过程中遇到的关于spring boot 版本的问题
- 腾讯云TKE-Pod案例: 容器内crontab问题
- iOS音视频接入 - TRTC多人视频会议
- Spring系列 SpringMVC的请求与数据响应
- codeforces 1349A(数学)
- leetcode之找不同
- 太强了,这居然是19年双非本科开发一年的Android面筋!开发几年的老程序员自叹不如
- Kotlin Vocabulary | Reified: 类型擦除后再生计划
- WorkManager 在 Kotlin 中的实践
- ElasticSearch 集群分片内部原理
- 360webscan防注入脚本全面绕过
- JQuery 入门学习(完结)
- 由python端口转发脚本看asyncore模块
- emlog模板制作说明(一)