只會html也可以做安卓app（附實例）

有人說我只會只會簡單的html 能不能做安卓（android）手機(jī)上的app呢？答案是可以的。什么是android呢，用過手機(jī)的估計都知道了。App就是手機(jī)上的應(yīng)用軟件，一種移動客戶端軟件。掌握html，你就可以做一個HTML的網(wǎng)站了，這也不是APP啊。其實我們利用html寫出手機(jī)屏幕大小的web頁面讓后放入手機(jī)瀏覽器內(nèi)執(zhí)行，就是一款web app了。在幾年前的工作中有做過手機(jī)App項目，pc前端和android和ios程序員配合完成整個項目的開發(fā)，這也讓我產(chǎn)生了學(xué)習(xí)android和ios程序開發(fā)的興趣。于是寫了第一個android程序first_app，分享給其他也想學(xué)習(xí)android移動開發(fā)的朋友或是好奇安卓app是怎么制作的朋友。Web app 也是app 的一種。可以把這個Html頁面打包成app。本質(zhì)上都是web，都是利用html、css、js構(gòu)建的網(wǎng)站，不同的是，webapp利用框架技術(shù)等讓你有了在使用App的感覺（比如頁面不跳轉(zhuǎn)刷新等）。這方面做的最好的是 HBuilder。使用它，你可以使用網(wǎng)頁（html+css+js）快速地創(chuàng)建APP應(yīng)用程序。并在android手機(jī)中展示和使用。（當(dāng)然如果網(wǎng)頁做得好的話，采用響應(yīng)式布局，即可在手機(jī)上完美展示）。hbuilder優(yōu)點：速度快，所需要的環(huán)境少，加快了開發(fā)者速度，不會因為各種JDK，java，Android環(huán)境而無法打包生成apk或ipa頭疼，大大減少了開發(fā)繁瑣操作。

我們首先打開web開發(fā)工具h(yuǎn)builder，新建一個項目如圖：

新建完成后，在項目管理器會顯示新建的項目目錄，其中css，img，js和index.html這幾個文件可刪可改可替換。

unpackage文件夾是放置app圖標(biāo)和啟動界面的圖片。

1和2是mui框架，需要的css和js文件，不懂可以不用動。

頁面入口默認(rèn)是index.html，根據(jù)自己項目需要，更改APP的啟動頁面，3是manifest.json文件是移動App的配置文件，用于指定應(yīng)用的顯示名稱、圖標(biāo)、應(yīng)用入口文件地址及需要使用的設(shè)備權(quán)限等信息，用戶可通過HBuilder的可視化界面視圖或者源碼視圖來配置移動App的信息，當(dāng)然如果你要設(shè)置 APP 的啟動圖和圖標(biāo)，你只需要在 manifest.json 里面進(jìn)行設(shè)置即可，這就是為什么不要刪掉的原因！

下圖為index.html的內(nèi)容，很簡單，在html的body中寫入內(nèi)容。

云打包的好處就是我們不需要在本地搭建環(huán)境，直接提交上去，打包好會返回下載鏈接讓我下載安裝包，除了生產(chǎn) Android 安裝包之外，還可以生成 ios 的，我們這邊只測試生成 Android 的安裝包。

配置完成后，點擊頁面下方的圖標(biāo)配置：配置APP在手機(jī)上的顯示圖標(biāo)；默認(rèn)是HBuilder的圖標(biāo)：

提交之后會需要 2-5 分鐘的打包，然后生成一個 apk 安裝包，就可以在手機(jī)安裝使用你開發(fā)得 app 了，什么簽名這些全都不用搞。

打包成功后就可以將apk文件裝到到android手機(jī)上查看效果了。如圖：

著移動互聯(lián)網(wǎng)的興起，越來越多的公司、個人把展示的內(nèi)容轉(zhuǎn)到了手機(jī)網(wǎng)站上，學(xué)會制作手機(jī)網(wǎng)站就成了大家關(guān)注的熱點。傳統(tǒng)的網(wǎng)頁制作工具制作電腦端的網(wǎng)站功能很強(qiáng)大，但手機(jī)網(wǎng)站由于手機(jī)屏幕大小和CPU處理能力較弱，對網(wǎng)站的要求與傳統(tǒng)網(wǎng)站有很大的不同。如果用傳統(tǒng)的網(wǎng)頁制作工具設(shè)計手機(jī)網(wǎng)站需要的技術(shù)復(fù)雜，操作難度大，一般人很難完成。如果有一個傻瓜式的工具，讓用戶無需復(fù)雜操作就能完成手機(jī)網(wǎng)站的設(shè)計，將會大受歡迎。

手機(jī)網(wǎng)站展示

下面就給大家推薦的就是一款這樣的工具，使用它可以像搭積木一樣快速完成網(wǎng)站的設(shè)計，再也不用被專業(yè)技術(shù)名詞和操作包圍，痛苦難受了。

這個軟件叫WYSIWYG Web Builder，是一個所見即所得的網(wǎng)頁設(shè)計工具，體積小巧，使用簡單。這個軟件最大的特點就是采用了圖層概念，任何元素都是圖層，可以拖放到頁面上的任意位置，而不影響其他的元素，非常適合初學(xué)者使用。不需要學(xué)習(xí)html知識就可以設(shè)計一個手機(jī)網(wǎng)站。

WYSIWYG Web Builder

下面以設(shè)計一個網(wǎng)站的三個頁面為例，了解一下該軟件的使用，首先看一下這三個頁面的實際效果。

網(wǎng)頁實際效果

下面逐一介紹每個頁面的創(chuàng)建過程。

一、設(shè)計網(wǎng)站結(jié)構(gòu)

要想做網(wǎng)站，首先要搭建網(wǎng)站結(jié)構(gòu)，由于是演示，這個網(wǎng)站只有三個頁面：首頁、新聞資訊、關(guān)于我們。

啟動WYSIWYG Web Builder，程序自動新建一個空白頁面，這個頁面是PC端的，而我們要設(shè)計的是手機(jī)端網(wǎng)站，所以要進(jìn)行更改。

在“站點管理器”中選中“無標(biāo)題1”，單擊站點管理器工具欄中的“新建移動頁”按鈕，新建一個“頁面1”，重復(fù)上述操作，在新建“頁面2”、“頁面3”。選中index，單擊工具欄中的“刪除”按鈕，把這個pc端的頁面刪除，然后分別右鍵單擊頁面1、頁面2、頁面3，在彈出的菜單中選擇“重命名頁面”，將這三個頁面分別命名為index、news、about，對應(yīng)于網(wǎng)站的首頁、新聞資訊、關(guān)于我們。

站點管理器

在編輯區(qū)看到網(wǎng)頁變成了手機(jī)的豎屏頁面，上面的標(biāo)簽也也出現(xiàn)了三個頁面的名稱，下面就開始設(shè)計這三個頁面。

二、建立首頁

由四部分組成，由上到下依次是：標(biāo)題、導(dǎo)航條、圖片、頁腳。

A、標(biāo)題

單擊“插入—文本”的命令，在頁面上用鼠標(biāo)拖動，產(chǎn)生一個文本框，雙擊這個文化，在其中輸入文字，然后在“格式”標(biāo)簽頁中設(shè)置字體類型、大小、顏色、排列方式等。

B、導(dǎo)航條

單擊”插入—導(dǎo)航—導(dǎo)航欄”，在頁面上拖動，生成一個導(dǎo)航欄，雙擊導(dǎo)航欄，打開設(shè)置對話框，單擊“條目”右側(cè)的按鈕，進(jìn)入導(dǎo)航欄對話框，在“名稱”列表中選中一個選項，單擊右側(cè)的“編輯”按鈕，可以設(shè)置文本名稱、連接頁面等參數(shù)。

導(dǎo)航欄對話框

單擊“添加”按鈕，可以新增項目，同時可以單擊“向下移動”和“向上移動”按鈕，調(diào)整條目的順序。

C、圖片

單擊“插入—圖像—從圖像文件”命令，在網(wǎng)頁上拖動，從本機(jī)中選擇一個圖片插入，可以拖動調(diào)整圖片的大小位置。

D、頁腳

單擊“插入—頁腳”命令，在頁面上拖動，插入頁腳，雙擊頁腳打開編輯窗口，單擊“條目”右側(cè)的按鈕，打開“常規(guī)”設(shè)置框，單擊“添加”按鈕，增加頁腳中包含的內(nèi)容，在打開的窗口中輸入文本、指定圖標(biāo)、設(shè)置好連接的頁面，重復(fù)以上操作，添加多個頁腳內(nèi)容。返回頁腳設(shè)置對話框，在“圖標(biāo)位置”下拉列表中選擇圖標(biāo)的顯示方式，同時將標(biāo)題中的Footer刪除。

頁腳編輯窗口

三、建立新聞資訊頁

有頁眉、頁腳、新聞列表3部分組成。頁腳與前面首頁中的相同，直接復(fù)制粘貼到當(dāng)前頁即可。

A、頁眉

單擊“插入—標(biāo)題”命令，在頁面中拖動，生成一個頁眉，它會自動處于頁面頂部，雙擊頁眉，打開設(shè)置對話框，在“左鍵按鈕”中，將文本改為“首頁”，URL指向index，將“右鍵按鈕”中的文本改為“關(guān)于我們”，URL指向about，將“雜項”中的標(biāo)題改為“新聞資訊”。

頁眉對話框

B、新聞列表

單擊“插入—列表視圖”，在網(wǎng)頁中插入一個列表，雙擊它，打開設(shè)置對話框，在“名稱”列表中選中一個條目，單擊“編輯”按鈕設(shè)置文本、圖像、連接頁面等參數(shù)，單擊“添加”按鈕，可以添加新的條目。

列表視圖

四、建立關(guān)于我們頁

有頁眉、頁腳、可折疊面板三部分組成。頁腳與前面相同，直接復(fù)制粘貼，也沒設(shè)置。頁眉設(shè)置不屬于新聞資訊頁相同，只不過是把“右鍵按鈕”中的URL改為news，即新聞資訊頁。

單擊“插入—可折疊”，在頁面中插入一個可折疊面板，默認(rèn)有兩個面板，可以雙擊打開設(shè)置對話框，添加更多面板。單擊加號按鈕展開面板，然后將需要的元素插入其中即可。

可折疊面板

五、預(yù)覽網(wǎng)站

在首頁標(biāo)簽中單擊預(yù)覽按鈕或按F5鍵，用瀏覽器預(yù)覽網(wǎng)頁。

六、發(fā)布網(wǎng)站

制作好的網(wǎng)站可以直接上傳到網(wǎng)站服務(wù)器上，也可以保存到本機(jī)上的某個目錄中，在“首頁”標(biāo)簽中單擊“發(fā)布”按鈕，打開發(fā)布站點對話框。

發(fā)布站點對話框

單擊“新建”按鈕，在“類型”列表中選擇“本地文件夾”，單擊“文件夾”右邊的按鈕，選擇一個保存網(wǎng)站的目錄，單擊“確定”按鈕返回。

添加發(fā)布位置

單擊“發(fā)布”按鈕，即可將制作好的網(wǎng)站保存到本機(jī)中，發(fā)布完成后，打開保存目即可瀏覽設(shè)計好的網(wǎng)站，與上傳到網(wǎng)上的效果是完全一樣。

通過上面的實戰(zhàn)操作，我們可以體會到WYSIWYG Web Builder使用非常簡單。無須html知識，只需要點擊鼠標(biāo)就可以完成網(wǎng)站的設(shè)計，簡潔高效，WYSIWYG Web Builder功能非常強(qiáng)大，你可以在制作中逐漸學(xué)習(xí)，越用你會越喜歡他。

1.閱后如果喜歡，不妨點贊、評論和關(guān)注一下。

2.如果喜歡玩軟件，請關(guān)注本頭條號閱讀相關(guān)文章。

3.在學(xué)習(xí)中有什么問題，歡迎與我溝通交流，號搜索：微課傳媒，我在這里等你喲！

文由ScriptEcho平臺提供技術(shù)支持

項目地址：傳送門

手機(jī)界面卡片功能實現(xiàn)

應(yīng)用場景介紹

本代碼片段適用于構(gòu)建移動設(shè)備或網(wǎng)頁端界面的手機(jī)卡片功能。它可以通過簡單的HTML、CSS和JavaScript實現(xiàn)一個具有逼真視覺效果和交互功能的手機(jī)卡片。

基本功能介紹

該代碼實現(xiàn)了以下基本功能：

創(chuàng)建一個帶有屏幕、攝像頭、小部件和應(yīng)用程序圖標(biāo)的逼真手機(jī)卡片。
攝像頭可通過CSS動畫模擬呼叫過程。
小部件和應(yīng)用程序圖標(biāo)可以自定義，以適應(yīng)不同的設(shè)計需求。

功能實現(xiàn)步驟及關(guān)鍵代碼分析

1. HTML結(jié)構(gòu)

<div class="phoneContainer">
  <div class="screen">...</div>
</div>

phoneContainer是手機(jī)卡片的容器，它定義了卡片的尺寸和背景色。
screen是手機(jī)屏幕，它包含了所有手機(jī)元素。

2. 攝像頭動畫

@keyframes callTransition {
  15% {
    width: 40px;
  }
  95% {
    width: 95px;
    background-color: darkblue;
  }
}

.camera {
animation-name: callTransition;
animation-duration: 1.9s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

@keyframes callTransition定義了攝像頭動畫的幀。
camera類將動畫應(yīng)用于攝像頭元素，使其在呼叫過程中變寬和變色。

3. 小部件和應(yīng)用程序圖標(biāo)

<div class="widgets">
  <div class="one"></div>
  <div class="two"></div>
</div>
<div class="apps">
  <div class="oneApp"></div>
  <div class="oneApp"></div>
  ...
</div>

widgets包含兩個小部件，它們是可點擊的。
apps包含多個應(yīng)用程序圖標(biāo)，也可以自定義。

4. 狀態(tài)欄

<div class="menuBar">
  <div class="twoApp"></div>
  ...
</div>

menuBar是手機(jī)狀態(tài)欄，它包含了電池、信號和時間等信息。

總結(jié)與展望

開發(fā)經(jīng)驗與收獲

了解了如何使用CSS動畫創(chuàng)建逼真的交互效果。
掌握了使用HTML和CSS構(gòu)建自定義用戶界面的技巧。

未來拓展與優(yōu)化

添加更多的交互功能，例如解鎖、撥號和消息。
優(yōu)化代碼以提高性能和響應(yīng)能力。
集成外部API以獲取實時數(shù)據(jù)，例如電池狀態(tài)和信號強(qiáng)度。
更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術(shù)支持