来这里找志同道合的小伙伴!
阅读全文大约需要10分钟,动手实践大约需要30分钟。
徐建勇
京东Android开发工程师
京东JDReact多端融合平台组
参与并重构多个项目,完成京东多个JDReact上线项目
由中国信息通信研究院、电信终端产业协会等联合包括小米、中兴、华为 、金立、联想、魅族、努比亚、OPPO、ViVO、一加,共10家手机厂商在北京发布快应用生态平台,目的是希望解决应用服务与触达难题:
与传统App相比,用户直接跳过了下载安装过程,所见即所得,以达到高转化的目的
快应用平台架构
快应用运行时架构
官网的介绍来看,快应用采用前端技术栈,熟悉前端开发的同学几乎不需要任何学习成本:
在实践过程中,发现有一些前端语法虽然在官网上标注的是支持,但是编译命令却提示暂没有该css标签,前端也没有生效,相信后续应该会有更好的支持。
在官网看到已经有这么多合作案例,于是打开小米应用商店,搜索微博,看到有微博极速版,点击秒开
无需安装,直接打开了微博了快应用页面,页面较微博原版app少了很多功能,目前只提供了信息流,还没有开放登录注册功能,不过总的体验还是很不错的。
开发文档已经提供了非常详细的环境搭建步骤,这里以Windows为例(如果你拥有一台mac,那就更好了),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
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为快应用包名。保存该文件从浏览器打开,会自动唤起快应用
本文只是简单介绍了一下快应用的入门,开发文档上还有很多的内容需要各位有兴趣的开发者自己去研究。虽然目前开发文档相比微信小程序还有不少差距,比如示例不全,也没有类似小程序一体化的开发环境,不过对于有兴趣的同学来说,这都不是事。技术的发展是非常快的,作为一名Android开发,现阶段不能仅仅是原生开发了,要更多的去学习新的技术,去适应新的时代。 这里列出几个相关的学习链接:
希望这篇文档能够对你有所帮助。