|
快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装，即点即用，享受原生应用的性能体验。研究了一个星期的快应用之后，然后写了一个简单的快应用，原本是想做一个玩Android的快应用，后来发现刚开始接触快应用的时候学习并不是很迅速，加上事情确实比较多，就只完成了一个练手的项目。如果你也在学习快应用，不如现在动手做一个小的快应用练练手吧。
1、我的快应用主要逻辑和应用截图
2、环境的搭建和idea的选择
快应用的开发环境为Node.js，首先应当去下载Node.js。然后需要安装toolkit工具hap-toolkit、调试器debugger，平台预览版mockup platform。
这边直接贴出官方网站给出的环境搭建地址。
https://doc./tutorial/getting-started/build-environment.html
编码工具我选择的是vs code。 也有其他的工具可供选择，具体可以看官网的链接：
https://doc./tutorial/getting-started/code-edit-conf.html
3、非常重要的manifest.json
环境搭建好之后，不要急着开发，先大概了解manifest，这个文件和开发安卓原生的AndroidManifest.xml一样重要，这里配置非常多的东西，比如：应用包名、应用名、版本号、应用图标、路由等等。
关于manifest.json：https://doc./framework/manifest.html
4、界面的开发
界面的布局有点类似Html开发，一共分为三部分组成：
- template： 界面的标签元素
- style： 界面的样式，通过css方式来编写
- script：用Node.js语法写的一些逻辑操作
<template>
这里面填写一些界面的标签元素
</template>
<style>
这里里面是一些样式的编写
</style>
<script>
这里面是一些js脚本
</script>
关于template：https://doc./framework/template.html
关于style：https://doc./framework/style-sheet.html
关于script：https://doc./framework/script.html
快应用的标签元素
快应用有自己的一些标签元素，比如<text>表示文字，<image>表示图片等等。也有一些和html相同的元素，比如<div>等等。
关于标签元素：https://doc./features/ 在组件标签中可以找到这些标签的使用。
快应用的css样式
快应用的布局方式采用Flex布局，但是有些css样式在快应用中并不支持，这种一般在实际开发中才能知道，因为并不是看一遍文档就能记住的。
关于css样式：https://doc./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./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./tutorial/getting-started/development-and-debugging.html
8、传包上线
如果第一次做快应用对快应用的上线绝对是懵逼的。不慌，里面的坑我已经踩过一部分了。
首先需要去注册各个平台的开发者账号：https://www./docCenter/post/71
8.1、签名文件
和开发原生的安卓程序一样，快应用也需要签名的，签名要用到openssl，这里有一个简单的方式去安装openssl。
第一步：在这个网站下载openssl安装工具并安装(这里指windows用户)：
http:///products/Win32OpenSSL.html
安装就是一路next点到底，最后有一个资助项目，这个可以不去资助。 -
第二步：添加环境变量
找到安装openssl的路劲下的bin目录，添加到path中。
-
第三步：监测是否安装成功
在控制台输入openssl看看是不是下面的情况
以上openssl就算安装完成。那么如何生成签名文件呢？
看下官方的文档吧：
https://doc./tools/compiling-tools.html
8.2、控制rpk的大小
当掌握到开发快应用的技巧之后，往往就控制不住自己的双手，慢慢的开始浪起来了，然后放各种图片，把界面做的那是花花绿绿，美不胜收。当经过测试的多轮测试没有bug之后，就有点扶不住墙了，感觉一切都在自己的控制之下，然而当你上传你的rpk发布时一句提示会秀得你头皮发麻：
没错，你的rpk要小于1M，此时你的心情应该是这样的：
主要是图片过多影响的，这个时候一些大图片就应该由服务器下载下来。不要再项目中放太多的图片，或者使用矢量图，iconfont等（注意：使用矢量图，和iconfont我并没有去测试过）。
8.3、提交一些必要的信息等待审核
在这个界面填写信息之后就可以提交审核啦。
https://www./myCenter/appManage/createApp
感觉我的应该能难通过审核。
9、多看快应用的官方文档和优秀的开源代码
我花了大概一个星期去学习快应用，主要的学习方式就是看文档。官方文档是非常重要的一个东西，里面基本将搭建环境到上线基本上都说得比较明白，接下来贴出快应用的官方文档地址。
https://doc./
当然也有很多优秀的程序员已经有关于快应用的开源代码了，我这边主要也是参考的张鸿洋的快应用：
http://www./blog/show/2096
10、本应用的代码地址
由于我也是刚开始学习快应用，可能写的东西并不是很好，还有很多地方可以优化，比如：分享操作可以提取出来做个一外部js调用，另外我对快应用的性能优化也是一无所知。如果你有兴趣看看我写的代码的话可以提供一些参考：
代码传送门：https://github.com/AxeChen/AxeChen_QuickApp （欢迎各位大佬给star）
|
