移動(dòng)Web開(kāi)發(fā)實(shí)踐之旅ppt課件

1、移動(dòng)Web開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)實(shí)際之旅開(kāi)發(fā)實(shí)際之旅主主 講：剛子講：剛子團(tuán)隊(duì)成員：威老、阿本團(tuán)隊(duì)成員：威老、阿本二零一一年金秋十月 于 杭州移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)內(nèi)容提綱挪動(dòng)挪動(dòng)Web開(kāi)發(fā)和調(diào)試工具引見(jiàn)開(kāi)發(fā)和調(diào)試工具引見(jiàn)jQueryMobile 和和 SenchaTouch2實(shí)例演示實(shí)例演示挪動(dòng)挪動(dòng)Web開(kāi)展機(jī)遇和技術(shù)優(yōu)勢(shì)開(kāi)展機(jī)遇和技術(shù)優(yōu)勢(shì)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇挪動(dòng)挪動(dòng)Web技術(shù)資源和前景展望技術(shù)資源和前景展望移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)v傳統(tǒng)網(wǎng)站面臨的挑戰(zhàn)v隨著手機(jī)和平板電腦普及，傳統(tǒng)信息類和電子商務(wù)網(wǎng)站因市場(chǎng)需求向挪動(dòng)端轉(zhuǎn)移。這面臨著挑戰(zhàn)，傳統(tǒng)網(wǎng)

2、站在終端不能很好的順應(yīng)，需求做挪動(dòng)站點(diǎn)；客戶端運(yùn)用由于Android、IOS等多種平臺(tái)存在，開(kāi)發(fā)、維護(hù)本錢高。v機(jī)遇與挑戰(zhàn)并存v挪動(dòng)Web技術(shù)，利用閱讀器、HTML5、JavaScript跨平臺(tái)特性，提供通用的處理方案。一次編碼，可以做為挪動(dòng)站點(diǎn)支持手機(jī)和平板電腦，包裝成客戶端運(yùn)用支持Android、IOS等主流平臺(tái)。v挪動(dòng)Web技術(shù)優(yōu)勢(shì)v通用性，挪動(dòng)站點(diǎn)、跨平臺(tái)的客戶端運(yùn)用提供一致的處理方案。v較低的開(kāi)發(fā)和維護(hù)本錢，由于您只需求一次編碼。v挪動(dòng)Web技術(shù)目前適宜場(chǎng)景v 以信息為主的運(yùn)用，不適宜對(duì)性能要求過(guò)高的產(chǎn)品。挪動(dòng)挪動(dòng)Web開(kāi)展機(jī)遇和技術(shù)優(yōu)勢(shì)開(kāi)展機(jī)遇和技術(shù)優(yōu)勢(shì) 之需求分析移動(dòng)移動(dòng)Web開(kāi)

3、發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)站點(diǎn)手機(jī)、平板電腦客戶端運(yùn)用Android、IOS客戶端運(yùn)用其他平臺(tái)挪動(dòng)挪動(dòng)Web開(kāi)展機(jī)遇和技術(shù)優(yōu)勢(shì)開(kāi)展機(jī)遇和技術(shù)優(yōu)勢(shì) 平臺(tái)表示圖移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇v以挪動(dòng)Web開(kāi)發(fā)客戶端為例，整體架構(gòu)如下：vUI層擔(dān)任頁(yè)面規(guī)劃，可自行實(shí)現(xiàn)或運(yùn)用現(xiàn)有框架，框架優(yōu)美之處在于封裝常用規(guī)劃和公共組件，開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯，引薦框架jQueryMobile和SenchaTouch。v挪動(dòng)中間件，處于UI層和終端系統(tǒng)之間，封裝各系統(tǒng)差別，提供一致的JavaScript接口，操作系統(tǒng)資源，如：文件系統(tǒng)、攝像頭等，引薦PhoneGap。v終端

4、系統(tǒng)，處于整個(gè)運(yùn)用的最底層，除非需求擴(kuò)展PhoneGap接口，否那么開(kāi)發(fā)者可以不關(guān)懷。 之總體架構(gòu)UI層層挪動(dòng)中間件挪動(dòng)中間件終端系統(tǒng)終端系統(tǒng)jQueryMobileSencha TouchPhoneGapAndroid、IOS移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之jQueryMoble引見(jiàn)vjQueryMobile 支持較多平臺(tái)：v建立在jQuery框架之上，為其跨平臺(tái)才干提供良好的根底。v支持較好的平臺(tái)有：Apple IOS 3.2-5.0Beta、Android 2.1-2.3、windows phone7、Blackberry、Firfox

5、 Mobile、Chrome Desktop 11-13 等，請(qǐng)參照官網(wǎng)。v規(guī)劃自順應(yīng)手機(jī)、平板電腦和PC。v結(jié)合PhoneGap，可生成跨平臺(tái)挪動(dòng)客戶端。v較豐富的組件支持，官方組件演示鏈接。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之jQueryMoble典型規(guī)劃vjQueryMobile 典型的頁(yè)面規(guī)劃典型的頁(yè)面規(guī)劃v根據(jù)根據(jù)data-role屬性做組件渲染，屬性做組件渲染，page包含包含head、navbar、content ，pagev 為顯示設(shè)備可視區(qū)域的一屏，多個(gè)為顯示設(shè)備可視區(qū)域的一屏，多個(gè)page可以放在一個(gè)頁(yè)面或一個(gè)獨(dú)立的可以放在一

6、個(gè)頁(yè)面或一個(gè)獨(dú)立的HTML頁(yè)面。頁(yè)面。v開(kāi)源工程參考開(kāi)源工程參考v 例如代碼和界面為例如代碼和界面為“挪動(dòng)挪動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)源工程。開(kāi)發(fā)社區(qū)開(kāi)源工程。v 請(qǐng)點(diǎn)擊鏈接查看源代碼。請(qǐng)點(diǎn)擊鏈接查看源代碼。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之jQueryMoble事件和數(shù)據(jù)加載vjQueryMobile 提供事件監(jiān)聽(tīng)機(jī)制，在頁(yè)面創(chuàng)建或顯示時(shí)，提供回調(diào)函數(shù)。v 如下面的例如代碼，在分類頁(yè)面創(chuàng)建時(shí)，用JSONP方式從效力器端，取回?cái)?shù)據(jù)，然后填充頁(yè)面內(nèi)容。v 也可用JSP、PHP等言語(yǔ)，在效力端打印內(nèi)容。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分

7、析和選擇開(kāi)發(fā)框架分析和選擇 之Sencha Touch 2vSencha Touchv對(duì)于開(kāi)發(fā)者而言，可簡(jiǎn)單以為Sencha Touch是ExtJS在挪動(dòng)端的版本。ExtJS在PC領(lǐng)域，UI款式和交互設(shè)計(jì)都貼近傳統(tǒng)的客戶端軟件。所以非常適宜做挪動(dòng)客戶端運(yùn)用。v 支持以Webkit為中心的平臺(tái)v Android、iPhone、BlackBerry。v Sencha官網(wǎng)在10月11日發(fā)布SenchaTouch2開(kāi)發(fā)者預(yù)覽版，被稱為歷史性改動(dòng)，下面列出部分新特性：v ExtJS4為中心,支持類動(dòng)態(tài)加載機(jī)制，按需運(yùn)用JavaScript文件。v 更明晰的MVC方式。API設(shè)計(jì)更加簡(jiǎn)單，比如：一致接口進(jìn)

8、展類定義和實(shí)例化操作。v 自動(dòng)化程度提高，不再需求對(duì)View、Model等組件手動(dòng)注冊(cè)。vSencha Touch 2 官方指南中文版官方指南中文版v10月月14日，日，“挪動(dòng)挪動(dòng)Web開(kāi)發(fā)社區(qū)發(fā)起了對(duì)開(kāi)發(fā)社區(qū)發(fā)起了對(duì)ST2官方指南的翻譯任務(wù)，了解更多特性請(qǐng)鏈接這里。官方指南的翻譯任務(wù)，了解更多特性請(qǐng)鏈接這里。v 在此贊賞社區(qū)成員：威老、在此贊賞社區(qū)成員：威老、bamboo、假設(shè)天、桔子、假設(shè)天、桔子、terry 為官方指南的翻譯任務(wù)做出的奉獻(xiàn)！為官方指南的翻譯任務(wù)做出的奉獻(xiàn)！v 學(xué)習(xí)本錢較高v 純JavaScript編碼實(shí)現(xiàn)規(guī)劃，需熟習(xí)MVC開(kāi)發(fā)方式和組件之間關(guān)系。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)

9、社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之Sencha Touch 2 MVC方式引見(jiàn)vMVC方式引見(jiàn)v數(shù)據(jù)模型層Model包括對(duì)數(shù)據(jù)的根本描畫，如字段稱號(hào)和類型；Store 緩存來(lái)自Model的數(shù)據(jù)，v并且提供排序、過(guò)濾等方法，通常Store會(huì)和視圖層、業(yè)務(wù)控制層打交道。v代表視圖層(View) ，為數(shù)據(jù)提供展現(xiàn)方式，如：列表式展現(xiàn)或其他方式。v業(yè)務(wù)控制層Controller主要擔(dān)任事件監(jiān)聽(tīng)和業(yè)務(wù)處置。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之Sencha Touch 2 普通開(kāi)發(fā)過(guò)程v 建立運(yùn)用，配置運(yùn)用命名空間、控制器和數(shù)據(jù)模型v

10、 新建討論列表數(shù)據(jù)模型Model，Proxy為效力器端數(shù)據(jù)交換接口。 以“挪動(dòng)Web開(kāi)發(fā)社區(qū)客戶端，討論列表為例，引見(jiàn)其開(kāi)發(fā)過(guò)程。該客戶端為開(kāi)源工程，請(qǐng)關(guān)注社區(qū)發(fā)布源代碼。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之Sencha Touch 2 普通開(kāi)發(fā)過(guò)程v 新建數(shù)據(jù)存儲(chǔ)Store，綁定Model，為視圖層提供數(shù)據(jù)訪問(wèn)。v 新建討論列表視圖，綁定Store。 移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之Sencha Touch 2 普通開(kāi)發(fā)過(guò)程v 控制器里注冊(cè)事件監(jiān)聽(tīng)和業(yè)務(wù)處置。v 總結(jié)Sencha Touch

11、更加完善，團(tuán)隊(duì)有ExtJS開(kāi)發(fā)人員，可優(yōu)先選擇。jQueryMobile適宜普通訊息類網(wǎng)站，快發(fā)速度快。Sencha Touch 2 目前為開(kāi)發(fā)者預(yù)覽版，不建議在實(shí)踐工程中運(yùn)用。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之PhoneGapv PhoneGap 提供一組JavaScript 接口，訪問(wèn)設(shè)備本地API，v 而對(duì)其實(shí)行過(guò)程進(jìn)展了很好的封裝，支持多平臺(tái)。v 插件機(jī)制，可方便擴(kuò)展PhoneGap接口。v 提供對(duì)設(shè)備文件系統(tǒng)、攝像頭、手機(jī)聯(lián)絡(luò)人、數(shù)據(jù)存儲(chǔ)等才干。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)框架分析和選擇開(kāi)發(fā)框架分析和選擇 之Pho

12、neGap云編譯v PhoneGap build 云打包運(yùn)用v 開(kāi)發(fā)人員上傳程序緊縮文件到云編譯平臺(tái)：httpsbuild.phonegap/，可在線下載IOS、Android、v 等平臺(tái)運(yùn)轉(zhuǎn)程序。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)和調(diào)試工具開(kāi)發(fā)和調(diào)試工具 之DreamWeaver CS5.5v Dreamweaver CS5.5集成運(yùn)用開(kāi)發(fā)環(huán)境集成jQueryMobile 和 PhoneGap框架，支持Android 虛擬機(jī)。v 詳細(xì)安裝方法請(qǐng)見(jiàn)詳細(xì)安裝方法請(qǐng)見(jiàn) “挪動(dòng)挪動(dòng)Web開(kāi)發(fā)社區(qū)網(wǎng)站。開(kāi)發(fā)社區(qū)網(wǎng)站。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web開(kāi)發(fā)和調(diào)試工具開(kāi)發(fā)和調(diào)試工具 之遠(yuǎn)程調(diào)試工具v PhoneGap 遠(yuǎn)程調(diào)試工具Weinre，官方網(wǎng)站鏈接v jsconsole，官方鏈接在PC閱讀器例如Chrome控制臺(tái)，捕捉PhoneGap在挪動(dòng)設(shè)備上運(yùn)轉(zhuǎn)的錯(cuò)誤，查看挪動(dòng)設(shè)備的DOM文檔。在官方提供的網(wǎng)頁(yè)中，輸入JavaScript命令，在終端設(shè)備執(zhí)行，多用于查看JavaScript變量等。移動(dòng)移動(dòng)Web開(kāi)發(fā)社區(qū)開(kāi)發(fā)社區(qū)挪動(dòng)挪動(dòng)Web技術(shù)資源和前景展望技術(shù)資源和前景展望v “挪動(dòng)挪動(dòng)Web開(kāi)發(fā)社區(qū)提供豐富的挪動(dòng)開(kāi)發(fā)社區(qū)提供豐富的挪動(dòng)Web技術(shù)資源技術(shù)資源v 前景展望 jQueryMobile 開(kāi)源工程 Senc