快應用是九大手機廠商基於硬件平臺共同推出的新型應用生態。用戶無需下載安裝，即點即用，享受原生應用的性能體驗。研究了一個星期的快應用之後，然後寫了一個簡單的快應用，原本是想做一個玩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
快應用的標籤元素
快應用有自己的一些標籤元素，比如<text>表示文字，<image>表示圖片等等。也有一些和html相同的元素，比如<div>等等。
關於標籤元素：https://doc.quickapp.cn/features/ 在組件標籤中可以找到這些標籤的使用。
快應用的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、傳包上線
如果第一次做快應用對快應用的上線絕對是懵逼的。不慌，裏面的坑我已經踩過一部分了。
8.1、簽名文件
和開發原生的安卓程序一樣，快應用也需要簽名的，簽名要用到openssl，這裏有一個簡單的方式去安裝openssl。
第一步：在這個網站下載openssl安裝工具並安裝(這裏指windows用戶)：
http://slproweb.com/products/Win32OpenSSL.html
安裝就是一路next點到底，最後有一個資助項目，這個可以不去資助。-
第二步：添加環境變量
找到安裝openssl的路勁下的bin目錄，添加到path中。
![]()
image.png -
第三步：監測是否安裝成功
在控制檯輸入openssl看看是不是下面的情況
![]()
image.png
以上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）