日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

快应用quickapp快速入门教程 by五个半柠檬

發布時間:2025/3/17 编程问答 44 豆豆
生活随笔 收集整理的這篇文章主要介紹了 快应用quickapp快速入门教程 by五个半柠檬 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

快應用

快應用是九大手機廠商基于硬件平臺共同推出的新型應用生態。用戶無需下載安裝,即點即用,享受原生應用的性能體驗。
2018年3月20日在北京推出“快應用”標準。
現在我們就來試試如何快速搭建一個快應用程序吧~

一、準備工具

  • 用系統自帶的命令處理工具(不建議用,有點丑)

    開始菜單,搜索輸入cmd

  • 下載git-bash,界面如下

  • 下載cmder,界面如下(當前比較好用的一個,推薦)

  • 準備一個安卓手機!!!!
  • 二、環境搭建

  • 安裝NodeJS

    需安裝6.0以上版本的NodeJS,請從NodeJS官網下載,推薦v6.11.3
    注意: 不要使用8.0.*版本.這個版本內部ZipStream實現與node-archive包不兼容,會引起報錯。安裝過程就不細說了,不會的話請自行百度。

  • 安裝hap-toolkit

    通過npm倉庫安裝,在命令行中執行以下命令:

    npm install -g hap-toolkit

    在命令行中執行hap -V會輸出版本信息表示hap-toolkit安裝成功,如下命令所示:

    hap -V // 會顯示安裝版本信息

  • 安裝toolkit工具后,可通過全局hap命令創建一個項目模板,如下所示:

    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進行開發(建議選擇前者)。

  • 安裝Hap Extension
    啟動Visual Studio Code,打開項目,點擊左上側擴展,搜索hap,點擊安裝Hap Extension,然后點擊重新加載即可預覽效果(如果VS code不是最新版,請先更新)

    到這一步,一個官方基礎的demo就構建成功了。

  • 四、連接手機進行調試

    注意:一定要注意手機連接的wifi與電腦所連接的網絡需要在同一局域網和網段,需要能夠相互訪問。

  • 在項目根目錄下執行如下命令,啟動HTTP調試服務器:(server前需要先npm run build)

    npm run server

    開發者可以通過命令行終端或者調試服務器主頁看到提供掃描的二維碼
    開發者通過快應用調試器掃碼安裝按鈕,掃碼安裝待調試的rpk文件
    開發者點擊快應用調試器中的開始調試按鈕,開始調試

    如果是使用系統自帶的處理工具,無法掃二維碼,請在瀏覽器中輸入二維碼訪問地址即可

  • 掃碼安裝

  • 當在同一網段時會提示你安裝成功,否則提示安裝失敗。
    下圖是快應用的初始頁面:

  • 現在你會發現一個問題,當修改文件內容后保存,頁面內容無法自動更新,那如何做到熱更新呢?

    解決方法:在當前目錄下右擊,新打開一個cmder,如圖:

    輸入npm run watch自動編譯項目,請使用如下命令:
    npm run watch

    然后重新打開應用,就可以自動更新了。

    小提示:點擊開始調試無法無法自動打開chrome的調試頁面的問題

    1>結束npm run server,重新npm run server,并掃碼
    2>先按返回鍵,點取消關閉調試界面

    然后再點擊開始調試,瀏覽器中就會自動彈出界面了(暫時未找到原因為什么需要這么操作)

    注意:手機必須保持常亮不鎖屏,否則chrome會出現白屏的情況~

    后續操作稍后更新~
    有什么問題或者建議可以給我留言~~

  • 總結

    以上是生活随笔為你收集整理的快应用quickapp快速入门教程 by五个半柠檬的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。