摘要:前陣子微信小程序的推出快速占據了桌面,手機廠商們坐不住了,為了搶回移動端應用分發入口,前幾天中國通信院等協會聯合小米華為等一眾手機廠商共同發布了快應用。總的來說,這個文件就是微信小程序清單文件的混合體,用來描述應用和做一些基本配置。
前陣子微信小程序的推出快速占據了Android桌面,手機廠商們坐不住了,為了搶回移動端應用分發入口,前幾天中國通信院等協會聯合小米、華為、OPPO等一眾手機廠商共同發布了“快應用”。
廢話不說,先甩兩個網址:
快應用官網
開發文檔
文檔是最權威的,建議大家在看完此文章后也去看看文檔,在這里我給大家演示一個。
此文章適合不熟悉Android開發的前端工程師和不熟悉前端開發的Android工程師閱讀。
0.環境搭建準備一個Android手機,不然等下沒法測試,用Android模擬器或許也可以,沒測試過。
安裝nodejs。這是現在基本必備的前端開發環境,去nodejs官網下載安裝就好,快應用官方推薦版本是v6.11.3 LTS,另外,快應用官方提醒:不要使用8.0.*版本.這個版本內部ZipStream實現與node-archive包不兼容,會引起報錯,我電腦里本來就有8.9的版本,懶得安裝低版本了,跑流程應該是沒問題的。
安裝hap-toolkit。這是快應用的命令環境,執行命令行npm install -g hap-toolkit(PS:我用windows,用cmd執行,Mac用自己的命令行執行工具就可以啦)
測試命令環境是否成功,輸入命令hap -V,能看到版本號就說明hap-toolkit安裝成功了。
1.創建文件夾例如testhap,我用的是windows平臺,所以就用cmd打開啦,Mac不用cmd差別應該也不大。
2.創建模板工程項目輸入命令hap init
必須輸入項目名(差評:人家npm init 可以使用當前目錄的),然后會提示Init your Project,直接回車就可以啦。
完成后長這樣:
目錄結構說明(截圖內容來自官方文檔):
切換到項目根目錄,我是testPro,執行命令npm install,等待安裝完即可,如果實在太慢可以使用國內鏡像cnpm試試,具體自己去網上找找教程吧。
安裝好的依賴都在node_modules目錄下,一般不需要我們去管。
4.編譯打包根目錄執行命令npm run build生成rpk包,這里可能會報錯,例如 Cannot find module ".../webpack.config.js",遇到了執行命令hap update --force即可,然后重新執行npm run build。
完成后會生產兩個目錄build、dist。
build:臨時產出,包含編譯后的頁面js,圖片等
dist:最終產出,包含rpk文件。其實是將build目錄下的資源打包壓縮為一個文件,后綴名為rpk,這個rpk文件就是項目編譯后的最終產出
5.安裝調試器和預覽平臺這是用來做調試的,是apk文件,即Android安裝文件。
下載調試器 (鏈接失效就去官網下載)
下載預覽平臺 (鏈接失效就去官網下載)
必須兩個都安裝了,不然一個是按鈕不能點擊,一個是白板一片。
6.運行第4步生成的rpk包有兩種方式:
HTTP請求:開發者啟動HTTP服務器,打開調試器,點擊掃碼安裝配置HTTP服務器地址,下載rpk包,并喚起平臺運行rpk包
本地安裝:開發者將rpk包拷貝到手機文件系統,打開調試器,點擊本地安裝選擇rpk包,并喚起平臺運行rpk包
這里采用“HTTP請求”:
執行命令npm run server -- --port 502
端口可以自定義,執行npm run server會使用默認端口12306(好眼熟的樣子),至于我為什么用502,不告訴你哈哈哈~
完成后會生成一個HTTP地址和二維碼,來看看cmd不忍直視的二維碼,鄙視臉~
(盜張圖,侵刪~)
建議用vsCode打開項目,用終端執行生成,二維碼會好看很多,vsCode也很好用。
配置HTTP服務器地址
打開調試器(剛才安裝在手機的那個軟件) ,然后:(二選一)
點擊"掃碼安裝",掃描終端窗口中的二維碼即可完成配置(若掃描不成功,可在瀏覽器中打開頁面:http://localhost:
點擊右上角menu --> 設置,輸入終端窗口中提示的HTTP服務器地址
配置完成后,若沒有自動喚起平臺運行rpk包,點擊在線更新按鈕即可,若提示安裝失敗,請檢查執行npm run server的終端窗口是否正常運行。(在線更新按鈕多點幾次吧,可能會延遲)
而點擊開始調試按鈕,則可打開chrome devtools調試界面,詳見文檔調試工具介紹,前端er應該不陌生。
到這里基本就算完了,詳細的開發指南看這里。
現在我們來看看這個“快應用”是什么鬼,這里只是簡單瀏覽一下,未作深入分析,可能有誤。
先看看根目錄結構:
disk、node_modules、以及package等等,不就是常見的前端項目文件夾和文件嗎,至于build和src,前端和Android都很熟悉。
build目錄里面看看:
這里是打包時生成的一些臨時文件,js和map(源碼映射文件)。manifest是什么呢,做Android開發的小伙伴都認識,清單文件啊這是,只是Android的是XML文件,這里的是JSON文件。
看看這個JSON文件里面:
包名、應用名、版本號、版本名、最低支持平臺、應用圖標都齊了。
繼續看:
頁面路由配置,有點像Vue,又不像,里面指定組件。
看看還有什么:
一些基本的頁面配置,看起來像微信小程序的json配置文件,又不太像。
總的來說,這個manifest.json文件就是Vue、微信小程序、Android清單文件的混合體,用來描述應用和做一些基本配置。
dist目錄:
打包后的輸出目錄,里面有一個rpk文件,嗯,Android打包后是apk文件,好曖昧的擴展名╮(╯▽╰)╭
node_modules目錄:
這里都是npm安裝后的依賴,類似于Android開發的jar包,里面的東西出了名的多,光剛才創建個基本項目就有700+的文件夾。
sign目錄:
這是rpk包的簽名模塊,類似于Android里的簽名文件,這里是調試時候用的,發布正式版估計也要使用另外的文件。
src目錄:
跟build目錄差不多,基本就是按src結構復制一份過去build。當然,這里的是ux文件,編譯打包時會把src里面的ux文件抽取出來生成js文件,不知道可不可以分別抽取為js、css、html呢,沒試過哈
ux文件里的內容:
這結構template、style、script目測跟vue一個樣啊
剩下這堆就不說了:
總的來說,個人目測,這個“快應用”就是借鑒了Android、Vue、微信小程序的綜合體,至于有沒有借鑒其他的框架什么的,作者見識有限,不清楚哈。
如果你還想了解更多,去看官方文檔哈,里面才是最權威的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93600.html
摘要:雖然有著各種各樣的不同,但是相同的是,他們前端優化不完全指南前端掘金篇幅可能有點長,我想先聊一聊閱讀的方式,我希望你閱讀的時候,能夠把我當作你的競爭對手,你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面,使用很多基于Web的應用。這些站點看起來既不一樣,用途也都各有不同,有在線視頻,Social Media,新聞,郵件客戶端...
摘要:一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。 工欲善其事必先利其器-前端實習簡歷篇 - 掘金 有幸認識很多在大廠工作的學長,在春招正式開始前為我提供很多內部推薦的機會,非常感謝他們對我的幫助?,F在就要去北京了,對第一份正式的實習工作也充滿期待,也希望把自己遇到的一些問題和...
閱讀 3091·2023-04-25 15:44
閱讀 1876·2019-08-30 13:11
閱讀 2830·2019-08-30 11:11
閱讀 3004·2019-08-29 17:21
閱讀 1306·2019-08-29 15:38
閱讀 898·2019-08-29 12:49
閱讀 1793·2019-08-28 18:19
閱讀 3222·2019-08-26 14:01