HTML5+js 可以開(kāi)發(fā)手機(jī)app么？

時(shí)間：2023-11-25 02:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-11-25 02:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML5+js 可以開(kāi)發(fā)手機(jī)app么？：首先，隨著硬件和系統(tǒng)的不斷升級(jí)，一些以前很頭疼的效率和效果都能得到解決，比如在android2.3時(shí)代的頁(yè)面展現(xiàn)，由于使用的是android browser而不是

chrome，有很對(duì)webkit特有的特性都不支持，如輸入框的邊框顯示，css的遮罩效果，一些css特效動(dòng)畫(huà)等都不能實(shí)現(xiàn)。從效率上頁(yè)面渲染的速度也比較慢，主要原因

應(yīng)該還是dom占用內(nèi)存很多導(dǎo)致。而目前的主流手機(jī)都已經(jīng)是2G甚至4G內(nèi)存+,并且大都配置了android 4.x(關(guān)鍵是4.4版本)了，瀏覽器默認(rèn)都是chrome了，上述問(wèn)題可以說(shuō)

基本得到了解決。因此我想說(shuō)的是，當(dāng)我們把目光放遠(yuǎn)一些，會(huì)發(fā)現(xiàn)HTML5是很誘人并且確實(shí)是很現(xiàn)實(shí)的選擇了。

然后談一下做一款HTML5應(yīng)用的體會(huì)和經(jīng)驗(yàn)吧，對(duì)于HTML5和原生的優(yōu)劣比較這里不多說(shuō)了，已經(jīng)有了很多很好的論述，我從實(shí)際開(kāi)發(fā)的角度說(shuō)一下有哪些可以優(yōu)化的地方。

1 網(wǎng)絡(luò)連接優(yōu)化：應(yīng)該說(shuō)網(wǎng)絡(luò)連接優(yōu)化是最可控的，這個(gè)能達(dá)到和原生應(yīng)用完全一致的體驗(yàn)。原因很簡(jiǎn)單，HTML5應(yīng)用里面所有的html頁(yè)面，css，js，圖片等，我們都

可以打到安裝包中，用戶安裝完畢后，打開(kāi)的頁(yè)面都是本地頁(yè)面，不需要連網(wǎng)，只有產(chǎn)生業(yè)務(wù)數(shù)據(jù)時(shí)，才使用AJAX進(jìn)行數(shù)據(jù)請(qǐng)求。而對(duì)于網(wǎng)絡(luò)情況的判斷，對(duì)于連接超時(shí)的

設(shè)置等，JS或者說(shuō)XHR規(guī)范都支持了。

2 數(shù)據(jù)本地存儲(chǔ)：主流瀏覽器對(duì)于LOCAL STORAGE的支持沒(méi)有問(wèn)題，可以保證本地存儲(chǔ)的實(shí)現(xiàn)。當(dāng)然，這個(gè)存儲(chǔ)是KEY-VALUE模式的，需要在應(yīng)用中對(duì)于存儲(chǔ)的數(shù)據(jù)進(jìn)行

一定的設(shè)計(jì)，比如用JSON存儲(chǔ)實(shí)際數(shù)據(jù)，而對(duì)于這些數(shù)據(jù)的檢索，目前也已經(jīng)有了不少JSON QUERY的支持庫(kù)了。當(dāng)然CHROME也支持SQL LITE，不過(guò)個(gè)人對(duì)于這種方式

不推薦，畢竟在客戶端上我們不需要太復(fù)雜的SQL查詢。

3 文件本地存儲(chǔ)：在原生應(yīng)用中很多文件我們都需要下載到本地，比如音視頻，圖片等，HTML5應(yīng)用一樣，如果是純HTML模式那么目前我們可選擇的就只有CHROME的

FILE SYSTEM了，當(dāng)這個(gè)選擇會(huì)有一些限制，比如需要用戶同意本地存儲(chǔ)的策略，另外FILE SYSTEM的存儲(chǔ)路徑與物理路徑?jīng)]有直接關(guān)聯(lián)，這個(gè)對(duì)于應(yīng)用的調(diào)試和管理

也會(huì)產(chǎn)生障礙。因此這里還是推薦使用原生插件的模式，利用原生文件系統(tǒng)做這個(gè)事情，比如CORDOVA的FILE TRANSFER插件。

4 音視頻的播放：HTML5的插件可以滿足需求

5 動(dòng)畫(huà)效果：HTML5 CANVAS以及CSS3的各種動(dòng)畫(huà)特效都能滿足需要。

6 錄音錄像：CHROME的WEBRTC可以實(shí)現(xiàn)，但是在手機(jī)上的效果一般，還是建議使用原生的插件或者自定義插件實(shí)現(xiàn)。

7 頁(yè)面展現(xiàn)和排列：這個(gè)確實(shí)效率比原生應(yīng)用有一定差距，尤其是滾動(dòng)和頁(yè)面內(nèi)容比較多的時(shí)候。這就需要應(yīng)用在渲染的時(shí)候進(jìn)行優(yōu)化，比如限制展現(xiàn)區(qū)域，比如在定義

點(diǎn)擊區(qū)域時(shí)盡量使用TAP而不是CLICK，并且最好減少對(duì)于大區(qū)域的點(diǎn)擊事件.....

最后介紹一款使用HTML5實(shí)現(xiàn)的安卓應(yīng)用:),OK外語(yǔ)寶，一款英語(yǔ)學(xué)習(xí)的安卓應(yīng)用，使用CORDOVA框架實(shí)現(xiàn)的HTML5與原生混合型應(yīng)用，

里面的HTML5實(shí)現(xiàn)了動(dòng)畫(huà)，音視頻，語(yǔ)音錄制，語(yǔ)音識(shí)別，本地文件和數(shù)據(jù)存儲(chǔ)，網(wǎng)絡(luò)同步等多個(gè)HTML5特性的使用。在各大應(yīng)用市場(chǎng)都可以下載這款應(yīng)用（應(yīng)用寶市場(chǎng)：

http://android.app.qq.com/myapp/detail.htm?apkName=com.okappclient）。而且還有一個(gè)特色是這個(gè)應(yīng)用真正實(shí)現(xiàn)了原生與HTML5的同步，即所有的安卓應(yīng)用功能都能在網(wǎng)頁(yè)上同步呈現(xiàn)。用CHROME瀏覽器訪問(wèn)http://web.okkouyu.com，你會(huì)發(fā)現(xiàn)里面的內(nèi)容與手機(jī)上安裝的功能完全一致。