快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装,即点即用,享受原生应用的性能体验。研究了一个星期的快应用之后,然后写了一个简单的快应用,原本是想做一个玩Android的快应用,后来发现刚开始接触快应用的时候学习并不是很迅速,加上事情确实比较多,就只完成了一个练手的项目。如果你也在学习快应用,不如现在动手做一个小的快应用练练手吧。
1、我的快应用主要逻辑和应用截图
2、环境的搭建和idea的选择
快应用的开发环境为Node.js,首先应当去下载Node.js。然后需要安装toolkit工具hap-toolkit、调试器debugger,平台预览版mockup platform。 这边直接贴出官方网站给出的环境搭建地址。
https://doc.quickapp.cn/tutorial/getting-started/build-environment.html
编码工具我选择的是vs code。 也有其他的工具可供选择,具体可以看官网的链接:
https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html
3、非常重要的manifest.json
环境搭建好之后,不要急着开发,先大概了解manifest,这个文件和开发安卓原生的AndroidManifest.xml一样重要,这里配置非常多的东西,比如:应用包名、应用名、版本号、应用图标、路由等等。 关于manifest.json:https://doc.quickapp.cn/framework/manifest.html
4、界面的开发
界面的布局有点类似Html开发,一共分为三部分组成:
- template: 界面的标签元素
- style: 界面的样式,通过css方式来编写
- script:用Node.js语法写的一些逻辑操作
<template>
这里面填写一些界面的标签元素
</template>
<style>
这里里面是一些样式的编写
</style>
<script>
这里面是一些js脚本
</script>
关于template:https://doc.quickapp.cn/framework/template.html
关于style:https://doc.quickapp.cn/framework/style-sheet.html
关于script:https://doc.quickapp.cn/framework/script.html
快应用的标签元素
快应用有自己的一些标签元素,比如
快应用的css样式 快应用的布局方式采用Flex布局,但是有些css样式在快应用中并不支持,这种一般在实际开发中才能知道,因为并不是看一遍文档就能记住的。 关于css样式:https://doc.quickapp.cn/features/ 在组件=>通用中找到。
快应用的脚本 快应用的js脚本用的就是Node.js的语法,当开发几个界面之后,这一套js逻辑并不是很麻烦,大概就是以下几点:
- 声明变量
- 生命周期的函数
- 界面的一些事件的响应方法
这边需要对Node.js有基本的了解。
5、使用系统提供的接口
如果要做界面跳转、加载H5界面、网络请求等操作,那就必须配置接口。 以一个用webView加载H5界面作为例子: 在manifest.json配置需要添加的接口
"features": [
{ "name": "system.prompt" },
{ "name": "system.router" },
{ "name": "system.shortcut" },
{ "name": "system.fetch" },
{ "name": "system.share"},
// system.webview为访问
{ "name": "system.webview"}
]
以上不仅配置了system.webview,说明还用到了其他的很多的系统接口。 使用web标签
<template>
<web src="http://xxxx" id="web"></web>
</template>
然后跳转到这个界面就会去访问这个网址啦。
6、外部js文件的调用来封装网络请求框架
有时候也需要封装一些公用的组件来提供各个地方调用,比如网络请求的框架。如果不写公用的网络请求框架,在script中单独编写,代码类似如下:
// 网络请求需要用到的组件
import fetch from '@system.fetch'
// 具体的方法
getAritcle(){
const self = this;
const url = 'http://www.wanandroid.com/article/list/' + self.curPage + '/json'
const ret = fetch.fetch({
url,
method: 'GET',
responseType: 'json',
success: function (ret) {
}
})
}
如果要使用外部调用的js,代码将会如下:
先将网络请求的代码在外部js写好
这边是将getAritcle()的方法,写在home.js中。
然后调用home.js中的代码:
第一步要将home中的方法导入。
// 将封装好的网络请求方法导入
import {
getArticle
} from '../Common/Api/home'
第二步就是使用该方法:
const self = this;
getArticle(this.curPage)
.then((ret) => {
// 正常的情况
}).catch((err) => {
// 异常的情况
})
这种方式封装好之后便可以多处调用,非常实用。 我并没写过js,以上的思路是来自张鸿洋的WanAndroid快应用,文章后面会将张鸿洋的快应用app地址贴出来
7、非常重要的调试工具
调式快应用也是非常重要的一部分,快应用调试器中打开usb调试,然后点击开始调试。
在这里可以看到界面的布局和日志。和调试前端网页是一样的。
关于如何配置日志请看官网提供的地址:
https://doc.quickapp.cn/tutorial/getting-started/development-and-debugging.html
8、传包上线
如果第一次做快应用对快应用的上线绝对是懵逼的。不慌,里面的坑我已经踩过一部分了。 首先需要去注册各个平台的开发者账号:https://www.quickapp.cn/docCenter/post/71
8.1、签名文件
和开发原生的安卓程序一样,快应用也需要签名的,签名要用到openssl,这里有一个简单的方式去安装openssl。
-
第一步:在这个网站下载openssl安装工具并安装(这里指windows用户): http://slproweb.com/products/Win32OpenSSL.html
安装就是一路next点到底,最后有一个资助项目,这个可以不去资助。 -
第二步:添加环境变量
找到安装openssl的路劲下的bin目录,添加到path中。 -
第三步:监测是否安装成功
在控制台输入openssl看看是不是下面的情况
以上openssl就算安装完成。那么如何生成签名文件呢? 看下官方的文档吧: https://doc.quickapp.cn/tools/compiling-tools.html
8.2、控制rpk的大小
当掌握到开发快应用的技巧之后,往往就控制不住自己的双手,慢慢的开始浪起来了,然后放各种图片,把界面做的那是花花绿绿,美不胜收。当经过测试的多轮测试没有bug之后,就有点扶不住墙了,感觉一切都在自己的控制之下,然而当你上传你的rpk发布时一句提示会秀得你头皮发麻: 没错,你的rpk要小于1M,此时你的心情应该是这样的:
主要是图片过多影响的,这个时候一些大图片就应该由服务器下载下来。不要再项目中放太多的图片,或者使用矢量图,iconfont等(注意:使用矢量图,和iconfont我并没有去测试过)。
8.3、提交一些必要的信息等待审核
在这个界面填写信息之后就可以提交审核啦。
https://www.quickapp.cn/myCenter/appManage/createApp
感觉我的应该能难通过审核。
9、多看快应用的官方文档和优秀的开源代码
我花了大概一个星期去学习快应用,主要的学习方式就是看文档。官方文档是非常重要的一个东西,里面基本将搭建环境到上线基本上都说得比较明白,接下来贴出快应用的官方文档地址。
https://doc.quickapp.cn/
当然也有很多优秀的程序员已经有关于快应用的开源代码了,我这边主要也是参考的张鸿洋的快应用:
http://www.wanandroid.com/blog/show/2096
10、本应用的代码地址
由于我也是刚开始学习快应用,可能写的东西并不是很好,还有很多地方可以优化,比如:分享操作可以提取出来做个一外部js调用,另外我对快应用的性能优化也是一无所知。如果你有兴趣看看我写的代码的话可以提供一些参考: 代码传送门:https://github.com/AxeChen/AxeChen_QuickApp (欢迎各位大佬给star)