快應用簡介
快應用是各大手機廠商聯合制定的,類似於微信小程序都是採用css+js前端開發,不同於微信的是,微信小程序依附在微信上,而快應用是可以再各大安卓應用市場上搜索直接打開,無須安裝。還可以直接生成桌面圖標,下次直接打開。快應用的使用體驗和我們android開發出來的app差不多。所以,作爲一名android開發仔,我決定學習它,多掌握一項技能。今天就先寫出一個hello world吧
準備工作
要開發快應用,我們需要做好一些環境配置。
1.安裝6.0以上的NodeJS,這個可以在NodeJS官網下載。
2.安裝完成NodeJS後,還需安裝hap-toolkit。安裝方式是:在命令行輸入
npm install -g hap-toolkit
接下來就是等待一下安裝,安裝完成後,再輸入
hap -V
如果出現上圖版本號0.0.32,證明你前面操作都成功了。
以上的是電腦的環境搭建,因爲快應用最終是在手機上運行起來的。所以我們還需要,配置一下手機的環境。簡單來說,就是下載一個快應用調試app。
1.下載需要到快應用官網點擊打開鏈接,打開鏈接後,選擇下載 快應用調試器
2.下載完成安裝後,界面如下圖
到這裏,所有的環境都配置好了,接下來就到了正式創建一個快應用項目了。
創建快應用項目
1.創建一個快應用項目,在你想要放快應用項目的目錄下,輸入命令行
hap init <ProjectName> ProjectName就是你的項目名字
如下圖:
成功後目錄下就會出現 QuickAPPHello
2.接下來就是安裝依賴,在項目的根目錄下,輸入命令行
npm install
我們現在只需等待它安裝
3.安裝完成後,我們再編譯一下項目,在項目根目錄下輸入命令行
npm run build
出現上圖的提示,證明我們一個完整的快應用項目已經創建完成了。再來看看項目目錄結構
進行代碼的編寫
完成上面的兩個步驟後,就正式進入了代碼編寫的環節了。因爲快應用屬於前端的範疇,所以我用得編寫工具是Visual Studio Code。
1.需要在Visual Studio 安裝一個插件,可以在搜索框上,直接搜索Hap Extension。
2.開發Visual Studio導入項目
選擇到剛創建的文件
導入成功後,我們可以馬上運行一下這個快應用,首先我們選擇到 終端 選項
其實這就是一個cmd 命令行,接下來在界面上輸入
npm run server
你會發現最終,會生成一個二維碼。這時候,我們在第二步的時候,安裝在手機的 快應用調試器 發揮作用了,我們在手機上打開 調試器,選擇 掃碼安裝
然後點擊,掃描二維碼,我們的快應用就會安裝到了手機上。注意:這裏掃描安裝的條件是,我們的手機和電腦必須在同一個局域網內,因爲我們目前的應用只是在調試階段,並沒有真正發佈到應用市場上,所以手機和電腦在不同局域網是會安裝失敗的。我們看看,掃描成功後。手機上安裝的應用
這就是我們剛創建的應用。好了,我們改一下界面。寫出一個hello world,完成今天的作業先。要改界面,我們需要先找到這個頁面。
我們找到Demo目錄,根據manifest.json文件的配置,可以知道,而這個Demo目錄的頁面入口就是叫index的文件
打開文件可以看到裏面的代碼
可以看到了,熟悉的文字字段。看到這裏,我相信如果開發過前段的同學應該可以熟悉了!這就是html開發,所以我們直接完成作業,先把文字改一下。完成修改後,我們怎麼更新到手機上呢?這時候,我們再在終端上多開一個窗口,輸入命令
npm run watch
這個命令的意思是,你每次編寫完保存代碼,系統會自動更新到手機上。
再看回手機上
而當你點擊退出快應用,界面上會提醒你,是否要保存爲桌面圖標。
好了,到這裏已經完成了今天的作業了,快應用的第一個hello world。大家趕緊玩起來吧,我是一名Android 工程師,加油吧!