快应用quickapp快速入门教程 by五个半柠檬
快應用
快應用是九大手機廠商基于硬件平臺共同推出的新型應用生態。用戶無需下載安裝,即點即用,享受原生應用的性能體驗。
2018年3月20日在北京推出“快應用”標準。
現在我們就來試試如何快速搭建一個快應用程序吧~
一、準備工具
開始菜單,搜索輸入cmd
二、環境搭建
需安裝6.0以上版本的NodeJS,請從NodeJS官網下載,推薦v6.11.3
注意: 不要使用8.0.*版本.這個版本內部ZipStream實現與node-archive包不兼容,會引起報錯。安裝過程就不細說了,不會的話請自行百度。
通過npm倉庫安裝,在命令行中執行以下命令:
npm install -g hap-toolkit
在命令行中執行hap -V會輸出版本信息表示hap-toolkit安裝成功,如下命令所示:
hap -V // 會顯示安裝版本信息
hap init <ProjectName>
其中<ProjectName>為自定義的項目名稱
命令執行后,會在當前目錄下創建<ProjectName>文件夾,作為項目根目錄
這個項目已經包含了項目配置與示例頁面的初始代碼,項目根目錄主要結構如下:
├── sign rpk包簽名模塊
│ └── debug 調試環境
│ ├── certificate.pem 證書文件
│ └── private.pem 私鑰文件
├── src
│ ├── Common 公用的資源和組件文件
│ │ └── logo.png 應用圖標
│ ├── Demo 頁面目錄
│ | └── index.ux 頁面文件,可自定義頁面名稱
│ ├── app.ux APP文件,可引入公共腳本,暴露公共數據和方法等
│ └── manifest.json 項目配置文件,配置應用圖標、頁面路由等
└── package.json 定義項目需要的各種模塊及配置信息
目錄的簡要說明如下:
src:項目源文件夾
sign:簽名模塊,當前僅有debug簽名,如果內測上線,請添加release文件夾,增加線上簽名;簽名生成方法詳見文檔編譯工具
在項目根目錄下,運行如下命令安裝模塊到node_modules目錄
npm install
編譯項目
(1)手動編譯項目
在項目的根目錄下,運行如下命令進行編譯打包,生成rpk包npm run build編譯打包成功后,項目根目錄下會生成文件夾:build、dist build:臨時產出,包含編譯后的頁面js,圖片等 dist:最終產出,包含rpk文件。其實是將build目錄下的資源打包壓縮為一個文件,后綴名為rpk,這個rpk文件就是項目編譯后的最終產出(2)自動編譯項目
如果希望每次修改源代碼文件后,都自動編譯項目,請使用如下命令:npm run watch兩款工具都必須下載到安卓手機中才能進行調試
下載地址:https://www.quickapp.cn/docCe...
三、運行項目
我首先使用hap init 新建了一個hapmemo的項目
當使用sublime打開時發現不支持.ux的文件。
官方推薦使用Visual Studio Code或者WebStorm進行開發(建議選擇前者)。
啟動Visual Studio Code,打開項目,點擊左上側擴展,搜索hap,點擊安裝Hap Extension,然后點擊重新加載即可預覽效果(如果VS code不是最新版,請先更新)
到這一步,一個官方基礎的demo就構建成功了。
四、連接手機進行調試
注意:一定要注意手機連接的wifi與電腦所連接的網絡需要在同一局域網和網段,需要能夠相互訪問。
npm run server
開發者可以通過命令行終端或者調試服務器主頁看到提供掃描的二維碼
開發者通過快應用調試器掃碼安裝按鈕,掃碼安裝待調試的rpk文件
開發者點擊快應用調試器中的開始調試按鈕,開始調試
如果是使用系統自帶的處理工具,無法掃二維碼,請在瀏覽器中輸入二維碼訪問地址即可
下圖是快應用的初始頁面:
解決方法:在當前目錄下右擊,新打開一個cmder,如圖:
輸入npm run watch自動編譯項目,請使用如下命令:
npm run watch
然后重新打開應用,就可以自動更新了。
小提示:點擊開始調試無法無法自動打開chrome的調試頁面的問題
1>結束npm run server,重新npm run server,并掃碼
2>先按返回鍵,點取消關閉調試界面
然后再點擊開始調試,瀏覽器中就會自動彈出界面了(暫時未找到原因為什么需要這么操作)
注意:手機必須保持常亮不鎖屏,否則chrome會出現白屏的情況~
后續操作稍后更新~
有什么問題或者建議可以給我留言~~
總結
以上是生活随笔為你收集整理的快应用quickapp快速入门教程 by五个半柠檬的全部內容,希望文章能夠幫你解決所遇到的問題。