快應用之先寫出第一個hello world

快應用簡介

    快應用是各大手機廠商聯合制定的,類似於微信小程序都是採用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 工程師,加油吧!


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