標(biāo)：實現(xiàn)一個可以安裝在手機上運行的，ui效果很好的app （開飯了）。

前端框架匯總：

框架其實就是優(yōu)秀的代碼，幫助封裝了工具、類庫等,提高開發(fā)速度。

jQuery: js的庫 簡化DOM操作

jQuery UI ： 是一個html組件庫，實現(xiàn)PC端應(yīng)用

bootStrap： 響應(yīng)式 pc+移動端 偏向于PC端

angularJS： 是一個實現(xiàn)SPA的js的MVC框架，數(shù)據(jù)操作比較頻繁

Ionic：h5的實現(xiàn)移動端應(yīng)用程序的框架，集成了ng、cordova、ui庫、uiRouter

PhoneGap/cordova：通過plugin插件的形式 提供了豐富的js API，實現(xiàn)原生應(yīng)用程序才能調(diào)用的功能（hybridApp）

配對組合：框架之間的定位是否有相同的部分

jQuery+jQueryUI

jQuery+bootStrap

jQuery+ng 不建議

jQuery+Ionic(ng+phoneGap+ui) 不建議

jQueryUI+bootStrap 不建議

jQueryUI+ng

jQueryUI+Ionic 不建議

bootStrap+ng

bootStrap+Ionic 不建議

技術(shù)選型

①考慮生態(tài)圈

②明確框架的賣點

③根據(jù)需求，選擇

④技術(shù)是否有定位有很多相似的地方，如果是，建議選其中最好的

ionic (css\ion-list$ionicLoading + uiRouter )

目的：實現(xiàn)移動端的app（開飯啦）

技術(shù)構(gòu)成： ionic

('ui庫->內(nèi)容'+

'ng->數(shù)據(jù)'+

'uiRouter->處理路由'+

'打包：部署在服務(wù)器')

①完成腳手架的搭建

②模擬數(shù)據(jù) 把頁面展示出來

③聯(lián)調(diào)，在前端調(diào)用后端的接口進行調(diào)試（邊做邊測試）

④部署到生產(chǎn)環(huán)境

1、項目的搭建(15:45 - 16:10)

①、創(chuàng)建項目，添加css、js、img、tpl文件夾，添加必須引用的css、js文件，添加自定義的css、js文件以及img圖片，并創(chuàng)建完整的引導(dǎo)頁面kaifanla.html；

②、編寫kaifanla.html文件：

定義模塊ng-app=”kaifanla”

引入ionic.css以及自定義的css文件

定義用于替換模板的視圖

引入ionic_bundle.js文件，并引入自定義的js文件

③、添加模板文件：添加 start/main/detail/order/myorder頁面，每個頁面中刪掉原有內(nèi)容，添加一個文字；

④、編寫 kaifanla.js 文件

定義各自的控制器

定義路由：為所有模板定義路由，默認跳轉(zhuǎn)到start

⑥、測試：跳轉(zhuǎn)是否正常，是否有錯誤

2、所有靜態(tài)頁面的編寫---》運行通暢，數(shù)據(jù)靜態(tài)死數(shù)據(jù)

①start.html （16:25 - 16:40）

1.1 頁面布局

1.2 實現(xiàn)該頁面時，將通過js跳轉(zhuǎn)的方法封裝在控制器中（所有的代碼片段都可以去用）

②main.html 模擬數(shù)據(jù)

http://ionicons.com/

可以通過ng-include包含頁頭和頁尾

has-header has-footer --> ion-content

③detail.html 詳情頁

card

(9:45 - 10:10)

④order.html 表單提交頁

⑤myOrder.html 個人中心頁

通過grid 模擬 table 展示數(shù)據(jù)

每日一練：

完成所有的靜態(tài)頁面。

3、調(diào)用php頁面，聯(lián)調(diào)

在進行聯(lián)合調(diào)試時，如果遇到了問題？

①確認請求的api接口是否正確

②請求服務(wù)器端時，確保參數(shù)的個數(shù)和類型服務(wù)要求

③服務(wù)器端返回的數(shù)據(jù)是否正確

④經(jīng)常去看network(response\header)、console

條件：

①工程在c:\xampp\htdocs

②xampp的apache和mySql跑起來

③測試-》 localhost: / (不要直接在webStorm中打開)

要求：通過service創(chuàng)建一個自定義服務(wù)$kflHttp，

①在服務(wù)中封裝一個方法sendRequest(url,func),在這個方法中有兩個參數(shù)，第一個是要求的地址，第二個參數(shù)是請求成功之后要執(zhí)行的處理函數(shù)；

②在sendRequest方法被調(diào)用時啟動一個‘正在加載數(shù)據(jù)’的窗口，當(dāng)成功的請求到服務(wù)器端的數(shù)據(jù)，關(guān)閉加載中的窗口。

①main.html

ng-model

-->

初始化模型數(shù)據(jù)：$scope.inputTxt={kw:''};

$watch : $scope.$watch('inputTxt.kw',function(){})

方向2的數(shù)據(jù)綁定： ng-model='inputTxt.kw'

嘗試： ion-infinite-scroll 上拉加載更多

第一步：要將ionInfiniteScroll放到頁面底部

第二步：on-infinite

第三步：$scope.$broadcast('scroll.infiniteScrollComplete');

②detail.html (2:15 - 2:30)

發(fā)送： main->a

接受： detail

1、配置detail狀態(tài)中的url /detail/:id

2、$stateParams

③order.html（14:50 - 15:20）

接收detail傳遞來的參數(shù):菜品的id

點擊下單，將數(shù)據(jù)一起發(fā)給服務(wù)器端，根據(jù)服務(wù)器返回的結(jié)果，將表單隱藏顯示下單結(jié)果

序列化：

$HttpParamSerializerJQLike

④myOrder.html

根據(jù)手機號 去查找所有的訂單

⑤設(shè)置頁面

在點擊設(shè)置的時候，有一個設(shè)置頁面（顯示一個列表：關(guān)于--點擊顯示自定義彈窗，退出登錄--點擊回到起始頁）

自定義彈窗：

①創(chuàng)建一個自定義彈窗

②顯示

注冊邀請：http://t.cn/RqG1Nja

混合編程：

打開eclipse，將模擬器，新建一個Android應(yīng)用，通過webView的loadUrl

wv.loadUrl('http://172.163.0.1/ionic_kaifanla/kaifanla.html');

方式1：

將前端工程的全部代碼 拷貝到 assets目錄

方式2：

將前端代碼放在服務(wù)器，拿到服務(wù)器的url地址（不需要拷貝assets）

①確保前端代碼沒問題

②將代碼部署在服務(wù)器

③編寫java代碼

//創(chuàng)建WebView類型的一個變量

WebView wv=newWebView(getApplicationCotnext());

//允許執(zhí)行js

wv.getSettings().setJavaScriptEnabled(true);

//載入指定的頁面

wv.loadUrl("http://172.173.0.100/chaptor4/webApp/kfl_ionic/kaifanla.html#/settings");

//設(shè)置內(nèi)容視圖

setContentView(wv);

添加網(wǎng)絡(luò)權(quán)限：

上午：

迭代

在之前的基礎(chǔ)上：start main detail order myOrder

加入購物車。

詳情頁：立即下單--》添加到購物車

中間多了購物車的標(biāo)簽： 跳轉(zhuǎn)到購物車頁面，購物車支持產(chǎn)品數(shù)量的編輯。

一、ZeptoJS概述

http://zeptojs.com/

what？是一個接口和JQuery比較類似的js的庫，它的目標(biāo)是實現(xiàn)一個10k以內(nèi)的通用的模塊化的js的庫

注意事項：ZeptoJS只是實現(xiàn)了JQuery一部分的功能，也有自己的和移動端相關(guān)的處理。

where？

針對現(xiàn)代高級瀏覽器，在手機端用的比較多

why？

①非常輕量

②有著熟悉的api接口（開發(fā)者不需要太高的學(xué)習(xí)成本）

③非常方便的搭配其他庫去使用

④核心庫的性能比較好，舍棄了低版本的兼容的支持

how？

引入對應(yīng)的zepto.js文件到工程

在zepto.js中內(nèi)置：

zepto核心模塊；包含許多方法

event通過on()& off()處理事件

ajaxXMLHttpRequest 和 JSONP 實用功能

form序列化 & 提交web表單

ie增加支持桌面的Internet Explorer 10+和Windows Phone 8。

二、ZeptoJS Core Module

2.1 操作數(shù)據(jù)的基本方法：

each/map/grep/parseJson/isFunction/isPlainObject.....

2.2 常見的選擇器

id、標(biāo)簽、父子、后代、

class、屬性($('[name=test]'))

2.3 簡化DOM操作的方法

增刪改查

2.3.1 增

insertAfter insertBefore append appendTo prepend prependTo

2.3.2 改

html()

css()

addClass()

width()

height()

2.3.3 刪

remove

removeClass()

2.3.4 查

三、ZeptoJS Detect Module

$.os

{android: true,phone: true ,tablet: false}

$.browser

{chrome:true,version:"56.0.2924.87",webkit:true}

四、ZeptoJS Event Module

on 綁定一個事件處理程序

off 解除綁定的事件處理程序

one 第一次事件觸發(fā)之后，將自動解除綁定

trigger 通過js的方式觸發(fā)指定的事件（多數(shù)都是自定義事件）

練習(xí)：實現(xiàn)一個頁面，在該頁面中有2個按鈕，兩個按鈕的id分別btn1，btn2；

要求：

①點擊btn1，超過5次自動解除綁定

②點擊btn2，在第3次，觸發(fā)自定義的事件，彈窗顯示‘自定義事件被觸發(fā)了’

Zepto.js默認包含5個模塊

①zepto核心模塊；包含許多方法

②event通過on()& off()處理事件

③ajaxXMLHttpRequest 和 JSONP 實用功能

④form序列化 & 提交web表單

⑤ie增加支持桌面的Internet Explorer 10+和Windows Phone 8。

一、Zepto的常見模塊

1、core

$(''),支持常見的選擇器

$.each/map/grep/parseJson/camelCames/trim... 和數(shù)據(jù)操作相關(guān)的方法

insertAfter insertBefore append appendTo prepend prenpendTO

html/css/addClass/removeClass/width/height

remove

next/prev/parent/parents/children..

detect

$.os

$.browser

event

on

off

one

trigger

2、ajax模塊

$.ajax()

$.get()

$.param() 將一個對象進行表單序列化 （在angularJS時

提供了$httpParamSerializerJQLike(object)）

$.post()

練習(xí)：使用post請求，將{name:'zhangsan'}發(fā)給服務(wù)器端，服務(wù)器端接收到數(shù)據(jù)，返回一個{tip:"Hello zhangSan"}.

通過Zepto中的$.post()來實現(xiàn)要求。

打開apache，請求注意端口號。

3、form模塊

serialize

serializeArray

submit

使用基本步驟：需要給表單元素指定name屬性。

注意事項：

如果表單元素中有復(fù)選、單選框，如果沒有選中的，默認在進行表單序列化時，是不會把它添加到字符串或者數(shù)組中的。

4、Touch模塊

//設(shè)置阻止掉默認的滑動效果

document.addEventListener(

'touchmove',

function (event) {

event.preventDefault();

},

{passive:false}

)

Touch模塊 給我們提供了兩大類事件的支持

①點按類

tap/longtap/doubletap

②滑動類

swipe/swipeLeft/swipeRight/swipeUp/swipeDown

如何使用事件呢？

①綁定對應(yīng)的事件

element.on('swipe',function(){})

②觸發(fā)事件

5、動畫模塊 (fx+fxmethods)

fxmethods:

fadeIn fadeOut fadeTo fadeToggle

show hide toggle

...

fx:

animate()

二、練習(xí)Zepto的使用。

1、實現(xiàn)一個網(wǎng)頁版的簡歷

1.1 向服務(wù)器端獲取數(shù)據(jù)，將數(shù)據(jù)顯示在列表中。

①獲取數(shù)據(jù)

②找到列表，創(chuàng)建元素，插入到列表

1.2 向服務(wù)器端獲取數(shù)據(jù)，將數(shù)據(jù)顯示在列表中。

①獲取數(shù)據(jù)

②找到id為skills的div，創(chuàng)建元素，插入到div

2、將pc端的項目移植到Mobile端。

2048實現(xiàn)混合編程的方式有很多種，phoneGap也是一種的常見的方式，它最大的特點是借助各種各樣的插件來實現(xiàn)對于設(shè)備底層的調(diào)用。

phoneGap與cordova的關(guān)系：

最早的時候，phoneGap是一個非常流行的框架，后來被Adobe收購了，PhoneGap依然了自己的商標(biāo)所有權(quán)，將核心的跨平臺代碼共享給了Adobe，Adobe將核心代碼全部開源，形成的新的項目叫做cordova。

cordova是phoneGap的核心代碼

混合編程：

①將前端代碼拷貝到Android工程的assets

②將前端代碼部署在服務(wù)器，通過loadUrl載入服務(wù)器的url

一、PhoneGap的概述

https://phonegap.com/ phoneGap官網(wǎng)

http://cordova.apache.org/ cordova官網(wǎng)

https://build.phonegap.com/ phoneGap提供的云端打包網(wǎng)址

http://phonegap-plugins.com/ 第三方的基于phoneGap的插件的列表站點

what？是一個針對移動端的，旨在通過編寫前端代碼來實現(xiàn)開發(fā)跨平臺應(yīng)用程序的開發(fā)框架

之前通過eclipse創(chuàng)建Android項目，通過混合編程的方式來打包生成安裝文件(沒有辦法通過java來實現(xiàn)很多原生組件的調(diào)用，包括設(shè)備底層的調(diào)用)

*phoneGap提供了各種各樣的插件，這些插件給我們提供了js的接口來實現(xiàn)設(shè)備低層的調(diào)用。

理念：

實現(xiàn)write once,run everywhere.

where？ 低成本的開發(fā)跨平臺應(yīng)用程序（Android/iOS/WP）

why?

①免費開源

②標(biāo)準(zhǔn)化 完全遵循w3c標(biāo)準(zhǔn)

③提供了非常方便的云端打包工具，可以直接將前端代碼打包生成可以安裝在移動端OS的app

④低成本 即使沒有學(xué)過專業(yè)的原生開發(fā)技能，也能夠基于前端技術(shù)以及phoneGap所提供的核心API來實現(xiàn)一個能夠調(diào)用底層硬件的app

ADB: Android Debug Bridge 安卓調(diào)試橋，之前在Android項目點擊run as去作為Android應(yīng)用去運行，背后就是靠ADB將生成的apk結(jié)尾的文件傳遞到模擬器中。

how？

方式1:

借助于phoneGap所建議的方式，通過兩個軟件，一個安裝在pc，一個安裝在mobile

①安裝pc端的軟件 phonegap-desktop

②安裝移動端的軟件

https://github.com/phonegap/phonegap-app-developer/tree/master/resources/release

adb install **.apk

2.1 windows+R->cmd

2.2

③

方式2：

通過命令行 ：

//全局安裝cordova

npm install -g cordova

//創(chuàng)建一個基于cordova 的myApp項目

cordova create MyApp

//進入到MyApp的目錄

cd MyApp

//讓cordova支持Android開發(fā)平臺

cordova platform add android

//打包APK的安裝包，運行在對應(yīng)的Android設(shè)備

cordova run android

二、PhoneGap支持的事件

deviceready

pause/resume

online/offline

battery***

***button

綁定事件的方式：

document.addEventListener(

'deviceready',

function(){},

false

)

、實現(xiàn)功能

使用谷歌瀏覽器將網(wǎng)頁打包為可以在桌面直接打開的app，可以實現(xiàn)直接打開瀏覽器指定網(wǎng)頁，也可以隱藏菜單欄全屏打開網(wǎng)頁應(yīng)用。

二、適用范圍

需要直接在桌面打開的網(wǎng)頁應(yīng)用，但不需要客戶端或者硬件交互的場景。

三、操作步驟

1、安裝谷歌瀏覽器

2、打開指定的HTML網(wǎng)頁應(yīng)用

3、瀏覽器右上角的菜單，依次點擊“右上角菜單-更多工具-創(chuàng)建快捷方式-填寫應(yīng)用名稱”，此時會在桌面生成應(yīng)用圖標(biāo)。

4、打開桌面的應(yīng)用圖標(biāo)，會直接使用谷歌瀏覽器打開網(wǎng)頁。

5、如果需要全屏展示，可在應(yīng)用圖標(biāo)“右鍵-屬性-目標(biāo)-增加 ‘-kiosk’ 參數(shù)”，打開即可全屏。

6、備注：如果直接創(chuàng)建谷歌瀏覽器的快捷方式，在“右鍵-屬性-目標(biāo)-增加 -kiosk和網(wǎng)站url”，也可實現(xiàn)相同效果。