移動(dòng)平臺(tái)前端開(kāi)發(fā)總結(jié)

移動(dòng)平臺(tái)前端開(kāi)發(fā)是指針對(duì)高端智能手機(jī)（如Iphone、Android）做站點(diǎn)適配也就是WebApp，并非是針對(duì)普通手機(jī)開(kāi)發(fā)Wap2.0，所以在閱讀本篇文章以前，你需要對(duì)webkit內(nèi)核的瀏覽器有一定的了解，需要對(duì)HTML5和CSS3有一定的了解。

1、首先我們來(lái)看看webkit內(nèi)核中的一些私有的meta標(biāo)簽，這些meta標(biāo)簽在開(kāi)發(fā)webapp時(shí)起到非常重要的作用

(1)

(2)

(3)(4)

第一個(gè)meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽；尤其要注意的是content里多個(gè)屬性的設(shè)置一定要用分號(hào)+空格來(lái)隔開(kāi)，如果不規(guī)范將不會(huì)起作用。

第二個(gè)meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；第三個(gè)meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；第四個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼2、如何去除Android平臺(tái)中對(duì)郵箱地址的識(shí)別

看過(guò)iOSwebappAPI的同學(xué)都知道iOS提供了一個(gè)meta標(biāo)簽:用于禁用iOS對(duì)頁(yè)面中電話號(hào)碼的自動(dòng)識(shí)別。在iOS中是不自動(dòng)識(shí)別郵件地址的，但在Android平臺(tái)，它會(huì)自動(dòng)檢測(cè)郵件地址，當(dāng)用戶touch到這個(gè)郵件地址時(shí)，Android會(huì)彈出一個(gè)框提示用戶發(fā)送郵件，如果你不想Android自動(dòng)識(shí)別頁(yè)面中的郵件地址，你不妨加上這樣一句meta標(biāo)簽在head中

3、如何去除iOS和Android中的輸入U(xiǎn)RL的控件條

你的老板或者PD或者交互設(shè)計(jì)師可能會(huì)要求你：能否讓我們的webapp更加像nativeapp，我不想讓用戶看見(jiàn)那個(gè)輸入url的控件條？

答案是可以做到的。我們可以利用一句簡(jiǎn)單的javascript代碼來(lái)實(shí)現(xiàn)這個(gè)效果

setTimeout(scrollTo,0,0,0);

請(qǐng)注意，這句代碼必須放在window.onload里才能夠正常的工作，而且你的當(dāng)前文檔的內(nèi)容高度必須是高于窗口的高度時(shí)，這句代碼才能有效的執(zhí)行。4、如何禁止用戶旋轉(zhuǎn)設(shè)備

我曾經(jīng)也想禁止用戶旋轉(zhuǎn)設(shè)備，也想實(shí)現(xiàn)像某些客戶端那樣：只能在肖像模式或景觀模式下才能正常運(yùn)行。但現(xiàn)在我可以很負(fù)責(zé)任的告訴你：別想了!在移動(dòng)版的webkit中做不到！

至少ApplewebappAPI已經(jīng)說(shuō)到了：我們?yōu)榱俗層脩粼趕afari中正常的瀏覽網(wǎng)頁(yè)，我們必須保證用戶的設(shè)備處于任何一個(gè)方位時(shí)，safari都能夠正常的顯示網(wǎng)頁(yè)內(nèi)容（也就是自適應(yīng)），所以我們禁止開(kāi)發(fā)者阻止瀏覽器的orientationchange事件，看來(lái)蘋果公司的出發(fā)點(diǎn)是正確的，蘋果確實(shí)不是一般的蘋果。iOS已經(jīng)禁止開(kāi)發(fā)者阻止orientationchange事件，那Android呢？對(duì)不起，我沒(méi)有找到任何資料說(shuō)Android禁止開(kāi)發(fā)者阻止瀏覽器orientationchange事件，但是在Android平臺(tái)，確實(shí)也是阻止不了的。5、如何檢測(cè)用戶是通過(guò)主屏啟動(dòng)你的webapp

看過(guò)ApplewebappAPI的同學(xué)都知道iOS為safari提供了一個(gè)將當(dāng)前頁(yè)面添加主屏的功能，按下iphone\\ipod\\ipodtouch底部工具中的小加號(hào)，或者ipad頂部左側(cè)的小加號(hào)，就可以將當(dāng)前的頁(yè)面添加到設(shè)備的主屏，在設(shè)備的主屏?xí)�自�?dòng)增加一個(gè)當(dāng)前頁(yè)面的啟動(dòng)圖標(biāo)，點(diǎn)擊該啟動(dòng)圖標(biāo)就可以快速、便捷的啟動(dòng)你的webapp。從主屏啟動(dòng)的webapp和瀏覽器訪問(wèn)你的webapp最大的區(qū)別是它清除了瀏覽器上方和下方的工具條，這樣你的webapp就更加像是nativeapp了，還有一個(gè)區(qū)別是window對(duì)像中的navigator子對(duì)象的一個(gè)standalone屬性。iOS中瀏覽器直接訪問(wèn)站點(diǎn)時(shí)，navigator.standalone為false,從主屏啟動(dòng)webapp時(shí)，navigator.standalone為true，我們可以通過(guò)navigator.standalone這個(gè)屬性獲知用戶當(dāng)前是否是從主屏訪問(wèn)我們的webapp的。在Android中從來(lái)沒(méi)有添加到主屏這回事！6、如何關(guān)閉iOS中鍵盤自動(dòng)大寫

我們知道在iOS中，當(dāng)虛擬鍵盤彈出時(shí)，默認(rèn)情況下鍵盤是開(kāi)啟首字母大寫的功能的，根據(jù)某些業(yè)務(wù)場(chǎng)景，可能我們需要關(guān)閉這個(gè)功能，移動(dòng)版本webkit為input元素提供了autocapitalize屬性，通過(guò)指定autocapitalize=”off”來(lái)關(guān)閉鍵盤默認(rèn)首字母大寫。

擴(kuò)展閱讀：針對(duì)移動(dòng)終端的Web App前端開(kāi)發(fā)

手機(jī)移動(dòng)應(yīng)用|APP應(yīng)用開(kāi)發(fā)愛(ài)布斯APP制作平臺(tái)

針對(duì)移動(dòng)終端的WebApp前端開(kāi)發(fā)

據(jù)201*年VisionMoblie開(kāi)發(fā)者經(jīng)濟(jì)學(xué)報(bào)告顯示，如果移動(dòng)Web視作新的開(kāi)發(fā)平臺(tái)，那么它僅次于Android和iOS成為最受開(kāi)發(fā)者青睞的第三大平臺(tái)。特別是HTML5技術(shù)的飛速發(fā)展不斷涌現(xiàn)的各種創(chuàng)新產(chǎn)品和工具，F(xiàn)acebook推出斯巴達(dá)項(xiàng)目、Adobe收購(gòu)PhoneGap等重大動(dòng)作，無(wú)不吸引眾多開(kāi)發(fā)者投入。

一個(gè)被業(yè)界廣泛關(guān)注的問(wèn)題是：“移動(dòng)Web會(huì)否在不久的未來(lái)重現(xiàn)在PC端上最終成為主流的的發(fā)展趨勢(shì)？”10月13日晚上，在CMDN移動(dòng)開(kāi)發(fā)者俱樂(lè)部第六期活動(dòng)，當(dāng)當(dāng)網(wǎng)前端工程師柴春燕分享了他的思考和實(shí)踐心得。演講實(shí)錄如下：

當(dāng)當(dāng)網(wǎng)Web前端工程師柴春燕

非常高興今天晚上在這里跟大家分享移動(dòng)終端使用HTML5技術(shù)做了一些實(shí)踐。對(duì)于移動(dòng)終端目前開(kāi)發(fā)方式無(wú)非就兩種，其中一種就是HTML5的解決方案。如果采用HTML5的話它的Fxs（音譯）就在前端。移動(dòng)互聯(lián)網(wǎng)及其現(xiàn)狀

前面劉鐵鋒講的是把PC都包含進(jìn)去，我講的就是針對(duì)移動(dòng)互聯(lián)網(wǎng)，針對(duì)移動(dòng)終端，常見(jiàn)像智能機(jī)、上網(wǎng)本、移動(dòng)終端可以訪問(wèn)網(wǎng)絡(luò)的設(shè)備，它的可以實(shí)現(xiàn)的一些方式。第二是在移動(dòng)

移動(dòng)互聯(lián)網(wǎng)營(yíng)銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機(jī)移動(dòng)應(yīng)用|APP應(yīng)用開(kāi)發(fā)愛(ài)布斯APP制作平臺(tái)

互聯(lián)網(wǎng)MobileWebApp開(kāi)發(fā)的時(shí)候可能會(huì)遇到的一些問(wèn)題。還有HTML5適合MobileWebApp開(kāi)發(fā)的特性。這是我開(kāi)發(fā)MobileWebApp的心得跟大家分享。

之前互聯(lián)網(wǎng)消費(fèi)調(diào)查中心做了一個(gè)研究，手機(jī)上網(wǎng)在生活中重要性比例，他所占據(jù)份額會(huì)越來(lái)越高。另外這個(gè)統(tǒng)計(jì)調(diào)查在201*年底，一半美國(guó)人都會(huì)使用智能手機(jī)，201*年預(yù)計(jì)移動(dòng)互聯(lián)網(wǎng)用戶超過(guò)10億，2020年HTML5這種方案已經(jīng)確定了。截止到201*年6月底，中國(guó)的三大運(yùn)營(yíng)商智能機(jī)份額已經(jīng)超過(guò)8千萬(wàn)。這個(gè)趨勢(shì)隨著3G互聯(lián)網(wǎng)方面會(huì)越來(lái)越大。移動(dòng)互聯(lián)網(wǎng)是指什么？官方解釋就是將移動(dòng)通信和互聯(lián)網(wǎng)兩者結(jié)合，用戶借助移動(dòng)終端包括手機(jī)、平板、PDA、上網(wǎng)本等，通過(guò)網(wǎng)絡(luò)訪問(wèn)互聯(lián)網(wǎng)。大家如果做過(guò)移動(dòng)開(kāi)發(fā)的話，最開(kāi)始如果想用手機(jī)訪問(wèn)互聯(lián)網(wǎng)的話，從幾個(gè)階段過(guò)渡過(guò)來(lái)，一個(gè)是WML方式，Web1.0，還有Web2.0。

移動(dòng)互聯(lián)網(wǎng)使用的關(guān)鍵技術(shù)

第一是Web2.0技術(shù)。在移動(dòng)互聯(lián)網(wǎng)的時(shí)候，MobileWebApp的時(shí)候以Web2.0為基礎(chǔ)，利用集體智慧，數(shù)據(jù)驅(qū)動(dòng)，帶來(lái)較豐富的體驗(yàn)。iOS操作系統(tǒng)誕生，從本質(zhì)來(lái)說(shuō)其實(shí)帶來(lái)顛覆性是用戶體驗(yàn)上的一些更新。后面我會(huì)講到為什么移動(dòng)設(shè)備有很多局限性，包括大家在做移動(dòng)開(kāi)發(fā)的時(shí)候都會(huì)遇到兼容性的問(wèn)題。

第二是云計(jì)算像超大規(guī)模、高可擴(kuò)展性、高可靠性和相對(duì)廉價(jià)。移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)面臨問(wèn)題

第一個(gè)是設(shè)備。你拿到手機(jī)終端，相比PC端瀏覽器運(yùn)算處理速度都有很大差距。內(nèi)存小，電池續(xù)航能力差，屏幕不統(tǒng)一。針對(duì)哪種終端設(shè)備做適配，比你做PC端前端開(kāi)發(fā)所遇到的困難還要大。

第二個(gè)是開(kāi)發(fā)，多種不同手機(jī)操作系統(tǒng)，每一種操作體驗(yàn)不一樣，相應(yīng)應(yīng)用開(kāi)發(fā)環(huán)境也是不同。像iPhone的IOS操作系統(tǒng)，是使用WebKet（音譯）為核心。兩種版本兼容Webket，具體對(duì)HTML5支持力度是不一樣的。大家可以看到這個(gè)官方站點(diǎn)就可以看到，能夠支持多點(diǎn)觸控。像WindowsPhone是采用IE為內(nèi)核。三者操作起來(lái)也不一樣，iPhone硬件只有一個(gè)Hom鍵，Android是軟硬件結(jié)合一個(gè)實(shí)體，返回可以通過(guò)硬件操作。如果你把所有操作、用戶體驗(yàn)都放到一個(gè)里面看的話，他是有差異的。這是我們做WebApp的時(shí)候都必須要考慮的一些問(wèn)題。

第三是網(wǎng)絡(luò)，這是大家無(wú)法回避的一個(gè)地方。為什么在HTML5出現(xiàn)之后大家會(huì)這么狂熱，會(huì)覺(jué)得他是一個(gè)趨勢(shì)。目前雖然中國(guó)現(xiàn)在有3G，他的覆蓋面并不是達(dá)到處處都可以擁有3G網(wǎng)絡(luò)，它的流量費(fèi)用也并不是人人都可以承擔(dān)的地步。像網(wǎng)絡(luò)穩(wěn)定性上面都還是有一些問(wèn)題的。比如你在坐地鐵的時(shí)候，可能到朝陽(yáng)門的時(shí)候還有信號(hào)，走到建國(guó)門信號(hào)就沒(méi)有

移動(dòng)互聯(lián)網(wǎng)營(yíng)銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機(jī)移動(dòng)應(yīng)用|APP應(yīng)用開(kāi)發(fā)愛(ài)布斯APP制作平臺(tái)

了。這種情況下用原聲還好解決，如果使用網(wǎng)頁(yè)形式訪問(wèn)的話，如果沒(méi)有做到APP方式，基本處于假死或者是掉線狀態(tài)，無(wú)法進(jìn)行第二次訪問(wèn)，這對(duì)用戶體驗(yàn)是很大的問(wèn)題。HTML5適合MobileWebApp開(kāi)發(fā)的特性

這些是一個(gè)不完全包括的HTML5的集合，這里面我只是羅列出來(lái)，我這里說(shuō)明一下，我覺(jué)得HTML5本身也是草案，我也是在一個(gè)學(xué)習(xí)過(guò)程中。

第一是語(yǔ)義化。你做MobileWebApp，他本質(zhì)還是希望以后把PC端搜索引擎，都可以用到移動(dòng)端。當(dāng)用戶通過(guò)手機(jī)搜索某些東西的時(shí)候，可以直接定位到MobileWebApp這種站點(diǎn)，更好的用戶體驗(yàn)。百度框計(jì)算，現(xiàn)在都有這種功能。

第二是新的表單功能。之前做表單功能的時(shí)候可能常見(jiàn)的像Canvas，像移動(dòng)端驗(yàn)證肯定是必須的，像這個(gè)鍵盤是不容忽視的問(wèn)題，你的手指相比你的移動(dòng)設(shè)備還是很大的。這個(gè)情況下如何更好帶來(lái)用戶輸入上的體驗(yàn)，支持瀏覽器都有對(duì)HTML5的一些幫助。我們有對(duì)于E-Mail的，軟鍵盤都有調(diào)用方式，郵件的話鍵盤就增加一個(gè)@符號(hào)。還有Canvas像一些對(duì)圖片旋轉(zhuǎn)是可以原聲支持，像手機(jī)處理性能會(huì)越來(lái)越高，手機(jī)有這樣的提升。做這種技術(shù)儲(chǔ)備，后面都有一些長(zhǎng)足的用處。

第四講到視頻和音頻，嵌入音頻和視頻和文字排版布局的時(shí)候，相當(dāng)麻煩，你要把所有音頻視頻文本作為獨(dú)立資源去集合起來(lái)，如果采用HTML5的方式的話就非常簡(jiǎn)單。他和你普通

移動(dòng)互聯(lián)網(wǎng)營(yíng)銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機(jī)移動(dòng)應(yīng)用|APP應(yīng)用開(kāi)發(fā)愛(ài)布斯APP制作平臺(tái)

做頁(yè)面沒(méi)有輔助差別，可以輔助與CSS，包括CSS3這種方式，可以輕松實(shí)現(xiàn)這種布局方式。WebWorker是一個(gè)草案，只是一個(gè)工具。具體項(xiàng)目里面沒(méi)有用到。剩下地理位置信息，是HTML5原聲支持，為什么說(shuō)像HTML5使用一些場(chǎng)景都會(huì)像導(dǎo)航類、地圖類都會(huì)用到地理位置信息。傳統(tǒng)的話谷歌地圖，大家獲得地圖信息，不是所有地圖軟件包獲取下來(lái)，可以實(shí)施地理位置定位。移動(dòng)區(qū)別PC端，因?yàn)樗�就是移�?dòng)。可以擴(kuò)展出很多，在實(shí)際項(xiàng)目應(yīng)用中就會(huì)遇到這樣的，我們所有的商品都會(huì)有區(qū)域購(gòu)買，他在什么地區(qū)可以購(gòu)買，什么地區(qū)他是沒(méi)有配貨。這種情況下如果用地理位置信息他就非常方便。因?yàn)槲铱梢詸z測(cè)到如果他購(gòu)買的用戶是來(lái)自于本地的話，我可以首先獲取它的地理位置，告訴他聯(lián)網(wǎng)請(qǐng)求后臺(tái)服務(wù)，看他是否有貨。他其實(shí)就是利用地理位置信息一個(gè)功能。剩下這個(gè)就是本地存儲(chǔ)和離線功能，這是我們做WebApp的一個(gè)源動(dòng)力。像這個(gè)功能才能夠支持我們?nèi)ジ�好帶�?lái)這種用戶體驗(yàn)，我們可以把一些資源緩存到本地�？梢园延脩魻顟B(tài)緩存到本地，這個(gè)地方也是需要注意的一個(gè)地方，就是安全性問(wèn)題。你像用戶比較核心的一些信心是不建議保存到本地的。但是有一些信心可以用到這些功能，比如在項(xiàng)目中可能會(huì)用到搜索，原來(lái)大家可能會(huì)常用這種搜索推薦。我如果搜索一次，下次還是搜索這個(gè)怎么辦，我可以使用本地搜索功能，我直接把他放到本地，下次直接讀取歷史記錄，這個(gè)跟原生沒(méi)有差別。另外就是離線功能，金融時(shí)報(bào)FT這個(gè)站點(diǎn)，他其實(shí)都用了離線功能，把所需要資源優(yōu)先獲取到本地，然后這樣子，當(dāng)用戶在沒(méi)有網(wǎng)絡(luò)的情況下，我可以把有一些資源呈現(xiàn)給用戶。然后又可以再去請(qǐng)求服務(wù)器端，同時(shí)像這種離線功能還有一些Gmail還有新浪微博都有這些應(yīng)用在里面。我發(fā)帖子也是一樣，把先在發(fā)帖時(shí)候的信息先緩存到本地，然后再把他發(fā)送到服務(wù)器端。WebSocket，雖然現(xiàn)在也是草案，目前各瀏覽器支持力度還是比較好的。這在實(shí)際項(xiàng)目中可能會(huì)用到，我覺(jué)得就是像這些新特性，像HTML5提供了相當(dāng)相當(dāng)多的全新API，是原來(lái)沒(méi)有嘗試過(guò)的。有些地方像OA這種，如果采用傳統(tǒng)這種方式，像這種HTTP這種是無(wú)狀態(tài)的，這種情況下怎么辦，可以通過(guò)WebSocket方式。這是從網(wǎng)上找到，如果你去開(kāi)發(fā)，他有一些底層框架在上面的。

HTML5在開(kāi)發(fā)移動(dòng)應(yīng)用方面有哪些優(yōu)勢(shì)呢？

第一是跨平臺(tái)。如果公司比較小，你如果要去開(kāi)發(fā)一套針對(duì)iPhone版本，再針對(duì)一套Android版本，Android目前有高中低三種版本，每一種版本去做適配有四個(gè)版本，兩套代碼。你開(kāi)發(fā)需要兩套成本，然后運(yùn)營(yíng)。我們通過(guò)MobileWebApp的方式，開(kāi)發(fā)成本低于你這種本地應(yīng)用，在不同操作系統(tǒng)上可以帶來(lái)近乎一致這種用戶體驗(yàn)。因?yàn)樗�其�?shí)還是一種Web方式去展現(xiàn)。

第二是他基于Web技術(shù)。它有成熟社區(qū)，Web開(kāi)發(fā)人員很容易遷移到像移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)上面去。

第三個(gè)是易用部署。這是后面我在開(kāi)發(fā)中發(fā)現(xiàn)他其實(shí)真的有很大差異的地方。我們用傳統(tǒng)方式去開(kāi)發(fā)APP這種應(yīng)用的時(shí)候，我要做一個(gè)廣告位，像原生這種方式，我更新一個(gè)版本，

移動(dòng)互聯(lián)網(wǎng)營(yíng)銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機(jī)移動(dòng)應(yīng)用|APP應(yīng)用開(kāi)發(fā)愛(ài)布斯APP制作平臺(tái)

通過(guò)他的用戶去下載。更新一個(gè)版本的話，你必須把每個(gè)系統(tǒng)都做一次更新升級(jí)，這個(gè)帶來(lái)部署和維護(hù)上面一些成本。采用這種MobileWebApp方式，可以實(shí)現(xiàn)持續(xù)更新。HTML5開(kāi)發(fā)移動(dòng)應(yīng)用的注意事項(xiàng)

第一智能手機(jī)市場(chǎng)占有率。針對(duì)對(duì)比一下這種HTML5開(kāi)發(fā)移動(dòng)應(yīng)用注意事項(xiàng)，智能手機(jī)市場(chǎng)占有率沒(méi)有達(dá)到人手一部，雖然智能機(jī)在8000萬(wàn)，但是中國(guó)13億人，沒(méi)有做到人人一部。我們公司做的統(tǒng)計(jì)，移動(dòng)端，Symbian操作系統(tǒng)還是占45%份額以上，訪問(wèn)量還是比較大的。

第二是移動(dòng)設(shè)備瀏覽器對(duì)HTML5的支持并沒(méi)有像桌面版本那么全面。每個(gè)移動(dòng)瀏覽器，目前市面上見(jiàn)到的IE的Mobile版本，包括目前出來(lái)的QQ瀏覽器、遨游、海豚瀏覽器，各個(gè)移動(dòng)設(shè)備瀏覽器對(duì)HTML5支持都是不一樣的。像HTML5開(kāi)發(fā)WebApp方式，最成功案例永遠(yuǎn)是出現(xiàn)在iPhone上面，出現(xiàn)在iOS操作系統(tǒng)上面，會(huì)做他的兼容和適配。第三是不同瀏覽器間的兼容性問(wèn)題。移動(dòng)端的瀏覽器不比PC端他要差一些。適合采用MobileWebApp方式的場(chǎng)景

我自己總結(jié)一下適合采用MobileWebApp方式的場(chǎng)景，所有都是我在自己不斷學(xué)習(xí)過(guò)程的一個(gè)總結(jié)，并不是一個(gè)權(quán)威的觀點(diǎn)，只是拿出來(lái)和大家分享。我覺(jué)得MobileWebApp基本上都是基于信息流的，什么叫做信息流的？這種應(yīng)用都是由后臺(tái)服務(wù)器推送過(guò)來(lái)。打個(gè)比方，我們看到新聞?lì)悾琲OS、Android支持兩種，一個(gè)是JSL，一個(gè)是HTML。有兩條產(chǎn)品線做iPhone和Android產(chǎn)品線，采用MobileWebApp的方式，我可以完全做到直接去存儲(chǔ)數(shù)據(jù)庫(kù)就可以。我做一套API提供給客戶端。

第一個(gè)是微博，另外是社交新聞?lì)�，地圖和導(dǎo)航類，他采用就是按需下載，能夠帶來(lái)客戶更多流量上的節(jié)省和體驗(yàn)上的提升�；�于這個(gè)基礎(chǔ)之上可以做更多的分享，像切客這種功能。一個(gè)是商品列表、一個(gè)是商品詳情，點(diǎn)進(jìn)去之后就是購(gòu)物流程。信息展示類，他是非常適合用MobileWebApp的方式做的。

后面我想展示一些成功的站點(diǎn)，比如說(shuō)谷歌Plass（音），還愛(ài)百度小說(shuō)都是采用MobileWebApp方式做的。還有像淘寶。像列表展示，其實(shí)內(nèi)部嵌這個(gè)都是Webwell（音），他們做HTML5然后去實(shí)現(xiàn)的。這個(gè)圖登錄和注冊(cè)功能，完全可以使用HTML5表單功能，去做記住密碼，你去校驗(yàn)用戶輸入。還有第三方框架，有學(xué)習(xí)和參考的地方，第一是iUI，還有JQtouch，

MobileWebApp開(kāi)發(fā)心得

移動(dòng)互聯(lián)網(wǎng)營(yíng)銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

手機(jī)移動(dòng)應(yīng)用|APP應(yīng)用開(kāi)發(fā)愛(ài)布斯APP制作平臺(tái)

第一要?jiǎng)?chuàng)新。HTML5提供了很多原來(lái)你不曾想象的一些功能點(diǎn)，你可以去參考iPhone和IOS操作體驗(yàn)。你去看像這種HTML5官方站點(diǎn)提供Demo（音），你想這些功能可能會(huì)用到什么地方。你可以去判斷這個(gè)商品是否是區(qū)域購(gòu)買，你針對(duì)具體應(yīng)用場(chǎng)景，完全可以做到你的實(shí)際項(xiàng)目里邊。

第二是安全性。并不是這個(gè)技術(shù)一定要用到這個(gè)項(xiàng)目里邊去，你要考慮是這個(gè)場(chǎng)景，我做的Android應(yīng)用的時(shí)候其實(shí)只是考慮到為了實(shí)現(xiàn)這樣的功能，比如說(shuō)記住密碼。我們可以由其他替代方案，并不是一定要采用為了技術(shù)而技術(shù)，我們用戶需求是第一位的。

第三是規(guī)范。HTML5本身是草案，每個(gè)公司做MobileWebApp的時(shí)候，都沒(méi)有一套完整的體系，不像之前做開(kāi)發(fā)的時(shí)候前端會(huì)給你開(kāi)發(fā)，像HTML5跟CSS3結(jié)合，做MobileWebApp這種，WebApp的方式的話更多可能會(huì)在交互，還有就是樣式，配置等等，你要精確到細(xì)節(jié)，比你原來(lái)做前端，具體到細(xì)節(jié)更加要規(guī)范一些。

移動(dòng)互聯(lián)網(wǎng)營(yíng)銷：廣州網(wǎng)站建設(shè)：小草壩天麻：

友情提示：本文中關(guān)于《移動(dòng)平臺(tái)前端開(kāi)發(fā)總結(jié)》給出的范例僅供您參考拓展思維使用，移動(dòng)平臺(tái)前端開(kāi)發(fā)總結(jié)：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《移動(dòng)平臺(tái)前端開(kāi)發(fā)總結(jié)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://m.taixiivf.com/gongwen/626231.html

• 上一篇：實(shí)施工程師總結(jié)論文-王思錦
• 下一篇：web程序設(shè)計(jì)(JSP)課程設(shè)計(jì)總結(jié)