使用HTML5開發(fā)手機APP分享_第1頁
使用HTML5開發(fā)手機APP分享_第2頁
使用HTML5開發(fā)手機APP分享_第3頁
使用HTML5開發(fā)手機APP分享_第4頁
使用HTML5開發(fā)手機APP分享_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、使用HTML5開發(fā)手機APP經(jīng)驗分享一、淺談HTML5發(fā)展2二、HTML5開發(fā)手機APP過去的劣勢與當前的優(yōu)勢2三、認識Hbuilder開發(fā)工具及MUI框架3a) 性能3b) 工具3c) 能力3d) 最接近原生體驗的高性能框架4四、開發(fā)案例5五、HTML5開發(fā)手機APP心得7一、淺談HTML5發(fā)展未來App的市場呈現(xiàn)一片光明景象，而對于移動開發(fā)商來說，不同平臺的應(yīng)用則需要開發(fā)不同的App來支持，無論在更新及維護上都需要一定的成本。于是更多人想到了基于HTML5的Web App，目前主流操作系統(tǒng)iOS、Android以及Windows Phone的瀏覽器都對于html5大部分特性的支持也更加突顯

2、HTML5在未來移動設(shè)備端的地位。Html5的特性在于對于開發(fā)者，可以更多地跨設(shè)備、跨平臺使用。強大的跨平臺性也為企業(yè)大大降低了開發(fā)成本、豐富的標簽體系，也大大降低了應(yīng)用開發(fā)的技術(shù)門檻。二、HTML5開發(fā)手機APP過去的劣勢與當前的優(yōu)勢過去的HTML5切頁白屏、轉(zhuǎn)場卡頓、下拉刷新不流暢、側(cè)滑菜單不流暢，HTML5技術(shù)無法對硬件底層的功能進行調(diào)用。眾多問題逼迫開發(fā)者只能用原生技術(shù)解決。優(yōu)勢：1.離線緩存，2.音頻視頻自由嵌入，多媒體形式更為靈活，3、Canvas繪圖，提升移動平臺的繪圖能力4、專為移動平臺定制的表單元素三、認識Hbuilder開發(fā)工具及MUI框架a) 性能：提升HTML5性能的手

3、機端引擎，讓側(cè)滑菜單、下拉刷新等動態(tài)交互卡頓的問題得以解決;b) 工具：HTML5開發(fā)IDE產(chǎn)品HBuilder, 超快的編程利器;封裝成跨平臺的HTML5plus規(guī)范，并將規(guī)范公開于www.HTML5。包括二維碼、搖一搖、語音輸入、地圖、支付、分享、文件系統(tǒng)、通訊錄等常用API，可以方便簡單的編寫，并且可跨平臺。c) 能力：把40萬原生API封裝成JavaScript對象，以解決HTML5能力不足問題的Native.js技術(shù);Native.js技術(shù)即在js中編寫原生代碼技術(shù)，突破瀏覽器的限制d) 最接近原生體驗的高性能框架：MUI框架，體積只有幾十K，加載、運行遠快于一般框架

4、。HTML5plus Runtime，簡稱5+ Runtime，是運行于手機端的強化web引擎，除了支持標準HTML5外，還支持更多擴展的js api，使得js的能力不輸于原生。5+ Runtime內(nèi)置于HBuilder，在真機運行、打包時自動掛載。如果說node.js把js的戰(zhàn)火燒到了服務(wù)器端，那么Native.js把js戰(zhàn)火燒到了原生應(yīng)用戰(zhàn)場。但我們可以使用js直接調(diào)原生API，語法是js語法，API命名是原生命名。HTML5 App的性能低下，有webview自身的性能問題，也有前端框架的性能問題。 HTML5!=傳統(tǒng)瀏覽器，雖然編程語言還是HTML、Javascript、CSS，但發(fā)行

5、方式絕不是傳統(tǒng)網(wǎng)站那么簡單。HTML5應(yīng)用的入口，反而很少是啟動瀏覽器輸入URL，它可以是存在于手機桌面的圖標、也可以來自超級App(如微信朋友圈)、以及搜索引擎、應(yīng)用市場、廣告聯(lián)盟，到處都是它的入口。它的入口，比原生App更多。 通過HBuilder、5+ Runtime、mui，我們很好的解決了HTML5的障礙，做到了與原生App一致的功能和體驗。相關(guān)資源可登陸網(wǎng)站http:/www.dcloud.io查詢。四、開發(fā)案例使用工具：Hbuilder；注意事項：第一次使用需要在有網(wǎng)絡(luò)情況下注冊1、 打開軟件-Hbuilder2、點擊新建移動App，彈出界面，并在應(yīng)用名稱中填寫項目名字，選擇模板

6、中的mui項目3、 點擊完成，并打開項目中的index.html頁面在<body></body>中加入一個按鈕，點擊時彈出對話框“你好”。<script type="text/javascript" charset="utf-8"> mui.init(); function test() alert("你好"); </script>中定義test函數(shù)，button中使用onclick觸發(fā)事件4、點擊“發(fā)行”下拉菜單中“App打包”5、點擊“打包”6、等制作狀態(tài)變?yōu)椤按虬晒?，下載完成”即可以點擊“下載目錄”獲取app安裝包五、HTML5開發(fā)手機APP心得對html5的各個標簽元素熟悉，熟悉開發(fā)所使用的框架基本結(jié)構(gòu)，對于html5+的API熟悉，扎實的后臺語言基礎(chǔ)，能實現(xiàn)調(diào)用相關(guān)語言包在javascript

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論