快應用初探——寫一個快應用練練手。

HTML · 發表 2018-09-27 16:06:26

摘要：快應用是九大手機廠商基於硬體平臺共同推出的新型應用生態。使用者無需下載安裝，即點即用，享受原生應用的效能體驗。研究了一個星期的快應用之後，然後寫了一個簡單的快應用，原本是想做一個玩Android的快應用，後來發現剛開始接觸快應用的時候學習並不是很迅速，加上事情確實比較多，就只完成了一個練手的專...

快應用是九大手機廠商基於硬體平臺共同推出的新型應用生態。使用者無需下載安裝，即點即用，享受原生應用的效能體驗。研究了一個星期的快應用之後，然後寫了一個簡單的快應用，原本是想做一個玩Android的快應用，後來發現剛開始接觸快應用的時候學習並不是很迅速，加上事情確實比較多，就只完成了一個練手的專案。如果你也在學習快應用，不如現在動手做一個小的快應用練練手吧。

1、我的快應用主要邏輯和應用截圖

專案的主要邏輯

介面截圖

2、環境的搭建和idea的選擇

快應用的開發環境為Node.js，首先應當去下載Node.js。然後需要安裝toolkit工具hap-toolkit、偵錯程式debugger，平臺預覽版mockup platform。

這邊直接貼出官方網站給出的環境搭建地址。

ofollow,noindex">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寫好

image.png

這邊是將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除錯，然後點選開始除錯。

image.png

除錯

在這裡可以看到介面的佈局和日誌。和除錯前端網頁是一樣的。

關於如何配置日誌請看官網提供的地址：

https://doc.quickapp.cn/tutorial/getting-started/development-and-debugging.html

8、傳包上線

如果第一次做快應用對快應用的上線絕對是懵逼的。不慌，裡面的坑我已經踩過一部分了。

8.1、簽名檔案

和開發原生的安卓程式一樣，快應用也需要簽名的，簽名要用到openssl，這裡有一個簡單的方式去安裝openssl。

第一步：在這個網站下載openssl安裝工具並安裝(這裡指windows使用者)：

OpenSSL.html" target="_blank" rel="nofollow,noindex">http://slproweb.com/products/Win32OpenSSL.html 安裝就是一路next點到底，最後有一個資助專案，這個可以不去資助。
第二步：新增環境變數

找到安裝openssl的路勁下的bin目錄，新增到path中。

image.png
第三步：監測是否安裝成功

在控制檯輸入openssl看看是不是下面的情況

image.png