添加webapp_WEBAPP秘密开发笔记 第五集

目标：实现一个可以安装在手机上运行的，ui效果很好的app (开饭了)。

前端框架汇总：

框架其实就是优秀的代码，帮助封装了工具、类库等,提高开发速度。

jQuery: js的库 简化DOM操作

jQuery UI ： 是一个html组件库，实现PC端应用

bootStrap： 响应式 pc+移动端 偏向于PC端

angularJS： 是一个实现SPA的js的MVC框架，数据操作比较频繁

Ionic：h5的实现移动端应用程序的框架，集成了ng、cordova、ui库、uiRouter

PhoneGap/cordova：通过plugin插件的形式 提供了丰富的js API，实现原生应用程序才能调用的功能(hybridApp)

配对组合：框架之间的定位是否有相同的部分

jQuery+jQueryUI

jQuery+bootStrap

jQuery+ng 不建议

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

jQueryUI+bootStrap 不建议

jQueryUI+ng

jQueryUI+Ionic 不建议

bootStrap+ng

bootStrap+Ionic 不建议

技术选型

①考虑生态圈

②明确框架的卖点

③根据需求，选择

④技术是否有定位有很多相似的地方，如果是，建议选其中最好的

ionic (cssion-list$ionicLoading + uiRouter )

目的：实现移动端的app(开饭啦)

技术构成： ionic

('ui库->内容'+

'ng->数据'+

'uiRouter->处理路由'+

'打包：部署在服务器')

①完成脚手架的搭建

②模拟数据 把页面展示出来

③联调，在前端调用后端的接口进行调试(边做边测试)

④部署到生产环境

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

①、创建项目，添加css、js、img、tpl文件夹，添加必须引用的css、js文件，添加自定义的css、js文件以及img图片，并创建完整的引导页面kaifanla.html；

②、编写kaifanla.html文件：

定义模块ng-app=”kaifanla”

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

定义用于替换模板的视图

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

③、添加模板文件：添加 start/main/detail/order/myorder页面，每个页面中删掉原有内容，添加一个文字；

④、编写 kaifanla.js 文件

定义各自的控制器

定义路由：为所有模板定义路由，默认跳转到start

⑥、测试：跳转是否正常，是否有错误

2、所有静态页面的编写---》运行通畅，数据静态死数据

①start.html (16:25 - 16:40)

1.1 页面布局

1.2 实现该页面时，将通过js跳转的方法封装在控制器中(所有的代码片段都可以去用)

②main.html 模拟数据

http://ionicons.com/

可以通过ng-include包含页头和页尾

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

③detail.html 详情页

card

(9:45 - 10:10)

④order.html 表单提交页

⑤myOrder.html 个人中心页

通过grid 模拟 table 展示数据

每日一练：

完成所有的静态页面。

3、调用php页面，联调

在进行联合调试时，如果遇到了问题？

①确认请求的api接口是否正确

②请求服务器端时，确保参数的个数和类型服务要求

③服务器端返回的数据是否正确

④经常去看network(responseheader)、console

条件：

①工程在c:xampphtdocs

②xampp的apache和mySql跑起来

③测试-》 localhost: / (不要直接在webStorm中打开)

要求：通过service创建一个自定义服务$kflHttp，

①在服务中封装一个方法sendRequest(url,func),在这个方法中有两个参数，第一个是要求的地址，第二个参数是请求成功之后要执行的处理函数；

②在sendRequest方法被调用时启动一个‘正在加载数据’的窗口，当成功的请求到服务器端的数据，关闭加载中的窗口。

①main.html

ng-model

-->

初始化模型数据：$scope.inputTxt = {kw:''};

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

方向2的数据绑定： ng-model='inputTxt.kw'

尝试： ion-infinite-scroll 上拉加载更多

第一步：要将ionInfiniteScroll放到页面底部

第二步：on-infinite

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

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

发送： main->a

接受： detail

1、配置detail状态中的url /detail/:id

2、$stateParams

③order.html(14:50 - 15:20)

接收detail传递来的参数:菜品的id

点击下单，将数据一起发给服务器端，根据服务器返回的结果，将表单隐藏显示下单结果

序列化：

$HttpParamSerializerJQLike

④myOrder.html

根据手机号 去查找所有的订单

⑤设置页面

在点击设置的时候，有一个设置页面(显示一个列表：关于--点击显示自定义弹窗，退出登录--点击回到起始页)

自定义弹窗：

①创建一个自定义弹窗

②显示

注册邀请：http://t.cn/RqG1Nja

混合编程：

打开eclipse，将模拟器，新建一个Android应用，通过webView的loadUrl

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

方式1：

将前端工程的全部代码 拷贝到 assets目录

方式2：

将前端代码放在服务器，拿到服务器的url地址(不需要拷贝assets)

①确保前端代码没问题

②将代码部署在服务器

③编写java代码

//创建WebView类型的一个变量

WebView wv = newWebView(getApplicationCotnext());

//允许执行js

wv.getSettings().setJavaScriptEnabled(true);

//载入指定的页面

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

//设置内容视图

setContentView(wv);

添加网络权限：

上午：

迭代

在之前的基础上：start main detail order myOrder

加入购物车。

详情页：立即下单--》添加到购物车

中间多了购物车的标签： 跳转到购物车页面，购物车支持产品数量的编辑。

一、ZeptoJS概述

http://zeptojs.com/

what？是一个接口和JQuery比较类似的js的库，它的目标是实现一个10k以内的通用的模块化的js的库

注意事项：ZeptoJS只是实现了JQuery一部分的功能，也有自己的和移动端相关的处理。

where？

针对现代高级浏览器，在手机端用的比较多

why？

①非常轻量

②有着熟悉的api接口(开发者不需要太高的学习成本)

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

④核心库的性能比较好，舍弃了低版本的兼容的支持

how？

引入对应的zepto.js文件到工程

在zepto.js中内置：

zepto核心模块；包含许多方法

event通过on()& off()处理事件

ajaxXMLHttpRequest 和 JSONP 实用功能

form序列化 & 提交web表单

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

二、ZeptoJS Core Module

2.1 操作数据的基本方法：

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

2.2 常见的选择器

id、标签、父子、后代、

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 第一次事件触发之后，将自动解除绑定

trigger 通过js的方式触发指定的事件(多数都是自定义事件)

练习：实现一个页面，在该页面中有2个按钮，两个按钮的id分别btn1，btn2；

要求：

①点击btn1，超过5次自动解除绑定

②点击btn2，在第3次，触发自定义的事件，弹窗显示‘自定义事件被触发了’

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... 和数据操作相关的方法

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()

练习：使用post请求，将{name:'zhangsan'}发给服务器端，服务器端接收到数据，返回一个{tip:"Hello zhangSan"}.

通过Zepto中的$.post()来实现要求。

打开apache，请求注意端口号。

3、form模块

serialize

serializeArray

submit

使用基本步骤：需要给表单元素指定name属性。

注意事项：

如果表单元素中有复选、单选框，如果没有选中的，默认在进行表单序列化时，是不会把它添加到字符串或者数组中的。

4、Touch模块

//设置阻止掉默认的滑动效果

document.addEventListener(

'touchmove',

function (event) {

event.preventDefault();

},

{passive:false}

)

Touch模块 给我们提供了两大类事件的支持

①点按类

tap/longtap/doubletap

②滑动类

swipe/swipeLeft/swipeRight/swipeUp/swipeDown

如何使用事件呢？

①绑定对应的事件

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

②触发事件

5、动画模块 (fx+fxmethods)

fxmethods:

fadeIn fadeOut fadeTo fadeToggle

show hide toggle

...

fx:

animate()

二、练习Zepto的使用。

1、实现一个网页版的简历

1.1 向服务器端获取数据，将数据显示在列表中。

①获取数据

②找到列表，创建元素，插入到列表

1.2 向服务器端获取数据，将数据显示在列表中。

①获取数据

②找到id为skills的div，创建元素，插入到div

2、将pc端的项目移植到Mobile端。

2048实现混合编程的方式有很多种，phoneGap也是一种的常见的方式，它最大的特点是借助各种各样的插件来实现对于设备底层的调用。

phoneGap与cordova的关系：

最早的时候，phoneGap是一个非常流行的框架，后来被Adobe收购了，PhoneGap依然了自己的商标所有权，将核心的跨平台代码共享给了Adobe，Adobe将核心代码全部开源，形成的新的项目叫做cordova。

cordova是phoneGap的核心代码

混合编程：

①将前端代码拷贝到Android工程的assets

②将前端代码部署在服务器，通过loadUrl载入服务器的url

一、PhoneGap的概述

https://phonegap.com/ phoneGap官网

http://cordova.apache.org/ cordova官网

https://build.phonegap.com/ phoneGap提供的云端打包网址

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

what？是一个针对移动端的，旨在通过编写前端代码来实现开发跨平台应用程序的开发框架

之前通过eclipse创建Android项目，通过混合编程的方式来打包生成安装文件(没有办法通过java来实现很多原生组件的调用，包括设备底层的调用)

*phoneGap提供了各种各样的插件，这些插件给我们提供了js的接口来实现设备低层的调用。

理念：

实现write once,run everywhere.

where？ 低成本的开发跨平台应用程序(Android/iOS/WP)

why?

①免费开源

②标准化 完全遵循w3c标准

③提供了非常方便的云端打包工具，可以直接将前端代码打包生成可以安装在移动端OS的app

④低成本 即使没有学过专业的原生开发技能，也能够基于前端技术以及phoneGap所提供的核心API来实现一个能够调用底层硬件的app

ADB: Android Debug Bridge 安卓调试桥，之前在Android项目点击run as去作为Android应用去运行，背后就是靠ADB将生成的apk结尾的文件传递到模拟器中。

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

//创建一个基于cordova 的myApp项目

cordova create MyApp

//进入到MyApp的目录

cd MyApp

//让cordova支持Android开发平台

cordova platform add android

//打包APK的安装包，运行在对应的Android设备

cordova run android

二、PhoneGap支持的事件

deviceready

pause/resume

online/offline

battery***

***button

绑定事件的方式：

document.addEventListener(

'deviceready',

function(){},

false

)

在phoneGap项目中想要查看控制台输出的日志信息：

console.log(). 需要到PC端view server log 查看日志信息

三、PhoneGap所提供的核心的API

1、device

该插件主要是提供设备的软硬件信息

device.platform/version/uuid/..

demo：在触发deviceready事件之后，找到id为myDevice的p，将获取到的设备信息显示出来。

①找到deviceready事件对应的处理函数

②获取设备信息

③找到p，设置innerHTML

插件的基本工作原理？

如果要使用一个插件，在插件被调用时，会根据当前运行的平台，如果是Android，加载对应的cordova.js，否则就会加载对应平台下的cordova.js.

会根据当前所运行的平台，去找对应的原生的代码，执行，将执行的结果返回给调用方。

2、加速度传感器

可以根据加速度传感器对应的插件，调用js来实现获取在x/y/z轴方向的加速度信息的数据。

采集设备在x、y、z方向上的动作。

navigator.accelerometer

.getCurrentAcceleration();

.watchAcceleration();

.clearWatch();

3、capture 采集

navigator.device.capture

.captureImage//拍摄照片

.captureVideo //录制视频

.captureAudio //录制音频

4、camera 摄像头

练习：点击按钮，从相册中选取一张图片，将选取的图片设置为img标签去显示的内容

提示：需要使用camera的插件中getPicture,在调用时指定sourceType.

5、notification 通知

通知的插件 提供了3种方式的通知：

①视觉通知

alert 警告窗

confirm 确认窗口

②触觉

vibrate(3000) 设备发出3s震动

③听觉

beep(2) 发出2次声音

6、file 文件

以需求为导向，讲在实现在mobile，文件读写操作的基本步骤。

fileSystem/fileEntry/fileWriter/fileReader/file

向根目录下，创建一个test.txt的文件，写入Hello

PhoneGap

6.1 写操作

fileSystem 文件系统

window.requestFileSystem()

fileEntry 文件的入口对象

fs.root.getFile()

fileWriter 文件的写操作对象

fileEntry.createWriter(

function(fileWriter){

fileWriter.write('');

},

function(){}

)

6.2 读操作

fileSystem

window.requestFileSystem()

fileEntry

fileSystem.root.getFile()

fileReader

reader = new FileReader();

file对象：记录了文件的所有的信息

fileEntry.file(

function(file){

reader.readAsText(file)

},

function(){}

)