快應用開發筆記

下面我調研快應用的一些基礎資料,供參考:

快應用環境安裝:

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

6.flex佈局學習文檔:

http://www.runoob.com/w3cnote/flex-grammar.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章