下面我調研快應用的一些基礎資料,供參考:
快應用環境安裝:
1.Node.js
This package has installed:
Node.js v10.10.0 to /usr/local/bin/node
npm v6.4.1 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.
2.安裝hap-toolkit(npm install -g hap-toolkit)
報錯:Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’ npm ERR! { [Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’]
缺少管理員權限。使用 sudo npm install -g hap-toolkit
參考文章:
https://blog.csdn.net/xiajun2356033/article/details/79698706
https://www.jianshu.com/p/81484e8dae79
3.編譯項目
編譯報錯:
Error: Cannot find module ‘/Users/bobge/Desktop/moran_code/quick_app/movie_ticket/node_modules/hap-toolkit/tools/server/index.js’
執行:hap update --force
Pasted Graphic.tiff
繼續執行 npm install
然後 npm run server
Pasted Graphic 1.tiff
4.端口被佔用解決鏈接:
sudo lsof -i :8880
sudo kill -9 4580(4580爲PID)
5.項目的編譯流程:
1.執行以下命令初始化項目
hap init <你的項目名稱>
命令執行後會在當前目錄下生成名爲 你的項目名稱 的文件夾,作爲項目根目錄,目錄結構如下:
├── node_modules
├── sign rpk包簽名模塊
│ └── debug 調試環境
│ ├── certificate.pem 證書文件
│ └── private.pem 私鑰文件
├── src
│ ├── Common 公用的資源文件和組件文件
│ │ └── logo.png manifest.json中配置的icon
│ ├── Demo 頁面目錄
│ | └── index.ux 頁面文件,文件名不必與父文件夾相同
│ ├── app.ux APP文件(用於包括公用資源)
│ └── manifest.json 項目配置文件(如:應用描述、接口申明、頁面路由等)
└── package.json 定義項目需要的各種模塊及配置信息,npm install根據這個配置文件,自動下載所需的運行和開發環境
2.編譯項目
先安裝依賴,在項目根目錄執行以下命令
npm install
待安裝完成,使用以下命令編譯打包生成rpk包
npm run build
編譯打包成功後,項目根目錄下會生成文件夾:build、dist
-
build:臨時產出,包含編譯後的頁面js,圖片等
-
dist:最終產出,包含rpk文件。其實是將build目錄下的資源打包壓縮爲一個文件,後綴名爲rpk,這個rpk文件就是項目編譯後的最終產出
使用以下命令可自動重新編譯,
npm run watch
注意:(我每次都遇到這個問題)
如果報錯遇到Cannot find module ‘…/webpack.config.js’,請重新執行一次hap update --force。這是由於高版本的npm在npm install時,會校驗並刪除了node_modules下部分文件夾,導致報錯。而hap update --force會重新複製hap-tools文件夾到node_modules中
6.調試
1.安裝調試器
調試器是一個android應用,直接下載安裝
安裝完打開如圖所示,此時按鈕都不能點擊,還需要再安裝平臺預覽版
兩個應用安裝完就可以安裝快應用了
2.安裝運行rpk包
有兩種方式:
-
HTTP請求:開發者啓動HTTP服務器,打開調試器,點擊掃碼安裝配置HTTP服務器地址,下載rpk包,並喚起平臺運行rpk包
-
本地安裝:開發者將rpk包拷貝到手機文件系統,打開調試器,點擊本地安裝選擇rpk包,並喚起平臺運行rpk包
推薦第一種方式,調試比較方便。
http請求方式:
執行命令:
// 默認端口12306
npm run server
// 自定義端口,比如8080
npm run server -- --port 8080
執行成功會顯示二維碼,可用調試器掃描二維碼安裝,或點擊調試器右上角設置http服務器地址再點擊在線更新。
此時配合命令
npm run watch
即可邊開發邊預覽效果
關於日誌查看,官方文檔介紹是使用Android Studio的Android Monitor輸出來查看日誌。這裏提供另一種方法,執行以下命令
adb logcat -s JsConsole
// JsConsole是過濾信息,因爲在as看到快應用日誌輸出都有JsConsole這個標記,所以直接使用這個查看快應用日誌,就不會被手機其他日誌干擾
5.api開發文檔鏈接:
https://www.w3cschool.cn/quickapp/quickapp-b5id2nbc.html