摘要：前陣子微信小程序的推出快速占據(jù)了桌面，手機(jī)廠商們坐不住了，為了搶回移動(dòng)端應(yīng)用分發(fā)入口，前幾天中國(guó)通信院等協(xié)會(huì)聯(lián)合小米華為等一眾手機(jī)廠商共同發(fā)布了快應(yīng)用?？偟膩?lái)說(shuō)，這個(gè)文件就是微信小程序清單文件的混合體，用來(lái)描述應(yīng)用和做一些基本配置。

前陣子微信小程序的推出快速占據(jù)了Android桌面，手機(jī)廠商們坐不住了，為了搶回移動(dòng)端應(yīng)用分發(fā)入口，前幾天中國(guó)通信院等協(xié)會(huì)聯(lián)合小米、華為、OPPO等一眾手機(jī)廠商共同發(fā)布了“快應(yīng)用”。

廢話不說(shuō)，先甩兩個(gè)網(wǎng)址：

快應(yīng)用官網(wǎng)

開(kāi)發(fā)文檔

文檔是最權(quán)威的，建議大家在看完此文章后也去看看文檔，在這里我給大家演示一個(gè)。

此文章適合不熟悉Android開(kāi)發(fā)的前端工程師和不熟悉前端開(kāi)發(fā)的Android工程師閱讀。

準(zhǔn)備一個(gè)Android手機(jī)，不然等下沒(méi)法測(cè)試，用Android模擬器或許也可以，沒(méi)測(cè)試過(guò)。

安裝nodejs。這是現(xiàn)在基本必備的前端開(kāi)發(fā)環(huán)境，去nodejs官網(wǎng)下載安裝就好，快應(yīng)用官方推薦版本是v6.11.3 LTS，另外，快應(yīng)用官方提醒：不要使用8.0.*版本．這個(gè)版本內(nèi)部ZipStream實(shí)現(xiàn)與node-archive包不兼容，會(huì)引起報(bào)錯(cuò)，我電腦里本來(lái)就有8.9的版本，懶得安裝低版本了，跑流程應(yīng)該是沒(méi)問(wèn)題的。

安裝hap-toolkit。這是快應(yīng)用的命令環(huán)境，執(zhí)行命令行npm install -g hap-toolkit(PS：我用windows，用cmd執(zhí)行，Mac用自己的命令行執(zhí)行工具就可以啦)

測(cè)試命令環(huán)境是否成功，輸入命令hap -V，能看到版本號(hào)就說(shuō)明hap-toolkit安裝成功了。

例如testhap，我用的是windows平臺(tái)，所以就用cmd打開(kāi)啦，Mac不用cmd差別應(yīng)該也不大。

輸入命令hap init
必須輸入項(xiàng)目名(差評(píng):人家npm init 可以使用當(dāng)前目錄的)，然后會(huì)提示Init your Project，直接回車就可以啦。

完成后長(zhǎng)這樣：

目錄結(jié)構(gòu)說(shuō)明(截圖內(nèi)容來(lái)自官方文檔)：

切換到項(xiàng)目根目錄，我是testPro，執(zhí)行命令npm install，等待安裝完即可，如果實(shí)在太慢可以使用國(guó)內(nèi)鏡像cnpm試試，具體自己去網(wǎng)上找找教程吧。

安裝好的依賴都在node_modules目錄下，一般不需要我們?nèi)ス堋?/p> 4.編譯打包

根目錄執(zhí)行命令npm run build生成rpk包，這里可能會(huì)報(bào)錯(cuò)，例如 Cannot find module ".../webpack.config.js"，遇到了執(zhí)行命令hap update --force即可，然后重新執(zhí)行npm run build。

完成后會(huì)生產(chǎn)兩個(gè)目錄build、dist。

build：臨時(shí)產(chǎn)出，包含編譯后的頁(yè)面js，圖片等

dist：最終產(chǎn)出，包含rpk文件。其實(shí)是將build目錄下的資源打包壓縮為一個(gè)文件，后綴名為rpk，這個(gè)rpk文件就是項(xiàng)目編譯后的最終產(chǎn)出

這是用來(lái)做調(diào)試的，是apk文件，即Android安裝文件。

下載調(diào)試器 (鏈接失效就去官網(wǎng)下載)

下載預(yù)覽平臺(tái) (鏈接失效就去官網(wǎng)下載)

必須兩個(gè)都安裝了，不然一個(gè)是按鈕不能點(diǎn)擊，一個(gè)是白板一片。

有兩種方式：

HTTP請(qǐng)求：開(kāi)發(fā)者啟動(dòng)HTTP服務(wù)器，打開(kāi)調(diào)試器，點(diǎn)擊掃碼安裝配置HTTP服務(wù)器地址，下載rpk包，并喚起平臺(tái)運(yùn)行rpk包

本地安裝：開(kāi)發(fā)者將rpk包拷貝到手機(jī)文件系統(tǒng)，打開(kāi)調(diào)試器，點(diǎn)擊本地安裝選擇rpk包，并喚起平臺(tái)運(yùn)行rpk包

這里采用“HTTP請(qǐng)求”：

執(zhí)行命令npm run server -- --port 502
端口可以自定義，執(zhí)行npm run server會(huì)使用默認(rèn)端口12306(好眼熟的樣子)，至于我為什么用502，不告訴你哈哈哈~
完成后會(huì)生成一個(gè)HTTP地址和二維碼，來(lái)看看cmd不忍直視的二維碼，鄙視臉~
(盜張圖，侵刪~)


建議用vsCode打開(kāi)項(xiàng)目，用終端執(zhí)行生成，二維碼會(huì)好看很多，vsCode也很好用。

配置HTTP服務(wù)器地址
打開(kāi)調(diào)試器(剛才安裝在手機(jī)的那個(gè)軟件) ，然后：(二選一)

點(diǎn)擊"掃碼安裝"，掃描終端窗口中的二維碼即可完成配置（若掃描不成功，可在瀏覽器中打開(kāi)頁(yè)面：http://localhost:，掃描頁(yè)面中的二維碼）

點(diǎn)擊右上角menu --> 設(shè)置，輸入終端窗口中提示的HTTP服務(wù)器地址

配置完成后，若沒(méi)有自動(dòng)喚起平臺(tái)運(yùn)行rpk包，點(diǎn)擊在線更新按鈕即可，若提示安裝失敗，請(qǐng)檢查執(zhí)行npm run server的終端窗口是否正常運(yùn)行。(在線更新按鈕多點(diǎn)幾次吧，可能會(huì)延遲)

而點(diǎn)擊開(kāi)始調(diào)試按鈕，則可打開(kāi)chrome devtools調(diào)試界面，詳見(jiàn)文檔調(diào)試工具介紹，前端er應(yīng)該不陌生。

到這里基本就算完了，詳細(xì)的開(kāi)發(fā)指南看這里。

現(xiàn)在我們來(lái)看看這個(gè)“快應(yīng)用”是什么鬼，這里只是簡(jiǎn)單瀏覽一下，未作深入分析，可能有誤。

先看看根目錄結(jié)構(gòu)：

disk、node_modules、以及package等等，不就是常見(jiàn)的前端項(xiàng)目文件夾和文件嗎，至于build和src，前端和Android都很熟悉。

build目錄里面看看：

這里是打包時(shí)生成的一些臨時(shí)文件，js和map(源碼映射文件)。manifest是什么呢，做Android開(kāi)發(fā)的小伙伴都認(rèn)識(shí)，清單文件啊這是，只是Android的是XML文件，這里的是JSON文件。

看看這個(gè)JSON文件里面：

包名、應(yīng)用名、版本號(hào)、版本名、最低支持平臺(tái)、應(yīng)用圖標(biāo)都齊了。

繼續(xù)看：

頁(yè)面路由配置，有點(diǎn)像Vue，又不像，里面指定組件。

看看還有什么：

一些基本的頁(yè)面配置，看起來(lái)像微信小程序的json配置文件，又不太像。

總的來(lái)說(shuō)，這個(gè)manifest.json文件就是Vue、微信小程序、Android清單文件的混合體，用來(lái)描述應(yīng)用和做一些基本配置。

dist目錄：

打包后的輸出目錄，里面有一個(gè)rpk文件，嗯，Android打包后是apk文件，好曖昧的擴(kuò)展名╮(╯▽╰)╭

node_modules目錄：

這里都是npm安裝后的依賴，類似于Android開(kāi)發(fā)的jar包，里面的東西出了名的多，光剛才創(chuàng)建個(gè)基本項(xiàng)目就有700+的文件夾。

sign目錄：

這是rpk包的簽名模塊，類似于Android里的簽名文件，這里是調(diào)試時(shí)候用的，發(fā)布正式版估計(jì)也要使用另外的文件。

src目錄：

跟build目錄差不多，基本就是按src結(jié)構(gòu)復(fù)制一份過(guò)去build。當(dāng)然，這里的是ux文件，編譯打包時(shí)會(huì)把src里面的ux文件抽取出來(lái)生成js文件，不知道可不可以分別抽取為js、css、html呢，沒(méi)試過(guò)哈

ux文件里的內(nèi)容：
這結(jié)構(gòu)template、style、script目測(cè)跟vue一個(gè)樣啊

剩下這堆就不說(shuō)了：

總的來(lái)說(shuō)，個(gè)人目測(cè)，這個(gè)“快應(yīng)用”就是借鑒了Android、Vue、微信小程序的綜合體，至于有沒(méi)有借鑒其他的框架什么的，作者見(jiàn)識(shí)有限，不清楚哈。

如果你還想了解更多，去看官方文檔哈，里面才是最權(quán)威的。