第一讲 phonegap + Angularjs + ionic 移动app开发视频教程

合作网站：www.phonegap100.com (PhoneGap中文网)

合作网站：www.itying.com  (IT营)

1. JquerMobile (发现做app运行速度太慢，我们后续教程放弃用它做App开发，但是可以用它来做一些wap网站 或者微信中的微站)

第二季内容: （jqmobi基础免费，其他赞助）赞助期满后陆续免费公开

1. Phonegap介绍

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用。

http://baike.baidu.com/view/4157600.htm

2. Phonegap运行速度

1. android环境：

a) 512 内存手机可以放弃phoengap  

b) 1G  双核手机  运行流畅  感觉速度稍微比原生慢 可结合Crosswalk 优化

c) 2G  4核+ 手机运行流畅 看不出和原生差别

d) 部分手机兼容可能会出现问题 需要调整css（原生开发也会有此问题）

2. ios环境：

a) iphone4+运行流畅   

b) iphone5+ 看不出和原生差别

3. Phonegap安装教程 

PhoneGap2.9安装视频教程地址：

http://bbs.phonegap100.com/thread-174-1-1.html

PhoneGap3.4安装视频教程地址：

http://bbs.phonegap100.com/thread-668-1-1.html

说明：如果n年后地址不对   可以去www.phonegap100.com下载

AngularJS诞生于2009年，由Misko Hevery 等人创建，后被Google收购。是一款优秀的前端JS框架，已用于Google的多款产品当中 如Gmail、Maps、Calender 等。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。

http://baike.baidu.com/view/9604951.htm    

Angularjs号称 下一代web应用 主要特性如下：

1.MVC

2.模块化与依赖注入

3.双向数据绑定

4.指令与UI控件

官方网站  Angularjs.org    但是打不开 大家都懂的

angularJs资源

http://www.angularjs.org/

https://www.github.com/angular/

http://www.angularjs.cn/

http://docs.angularjs.cn/api 

http://www.ngnice.com/

http://www.phonegap100.com  (phonegap中文网)

angularJs下载

1. http://www.bootcdn.cn/angular.js/

2. npm install angular

Ionic 是一个强大的 HTML5 应用程序开发框架，号称Advanced HTML5 Hybrid Mobile App Framework 是AngularJS 移动端解决方案 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

Ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题。

官网：http://ionicframework.com/

1. Ionic  整合（AngularJs integrate）AngularJs  

2.  Ionic  Url routing，use AngularUI  Router

Ionic url路由使用AngularUI Router，可以指定不同的路由，方便开发和集成

3 . Ionic扩展了 AngularJS指令  （AngularJS Extensions & Directives）

ion-tab, ion-content, ion-nav-view, ion-header

$ionicPopup,$ionicLoading, $ionicModal…

遗憾：ionic直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

http://www.umindex.com/devices/android_os

1. 配置环境

2. 先安装node.js

3. 安装cordova

npm install -g cordova             sudo npm install -g cordova

注意：部分同学现在直接使用 npm install -g cordova 发现安装了以后  执行 cordova build android的时候 提示需要安装 platform for android-21 sdk ，意思就是需要 最新版本的sdk 

1．更新sdk   （推荐） 翻墙 代理 或者想其他办法

2．Sdk没法更新的情况下面 可以先卸载当前的cordova，然后再重新指定版本安装cordova

3. 下载sdk包集成 推荐    http://bbs.phonegap100.com/thread-1566-1-1.html

http://bbs.phonegap100.com/thread-1456-1-1.html

http://bbs.phonegap100.com/thread-1180-1-1.html

http://bbs.phonegap100.com/thread-1127-1-1.html

npm install -g cordova@4.1.2   

npm install -g ionic

sudo npm install -g ionic

Ios创建安装运行

ionic start myproject

cd myproject

ionic platform add ios

ionic build ios

ionic emulate ios

Android创建安装运行

ionic start myproject

cd myproject

ionic platform add android

ionic build android

ionic emulate android  (模拟器运行)

ionic run android  (连接上手机运行)

安装完成后发现 android环境下面导航在最上面解决方案:

http://bbs.phonegap100.com/thread-1495-1-1.html

 

 

前面给大家讲过 weinre 在xcode开发中调试我们的代码还有  Phonegap桌面开发工具 Desktop-App与手机调试工具

http://bbs.phonegap100.com/thread-1315-1-1.html

下面的ionic 调试方法适合于ios 和android 并且非常简单

ionic  serve    重要用于浏览器调试 

cordova serve   

第二季中我们采用的是eclipse 开发工具 发现对html5的支持不是特别好，所以第三季中我们采用了其他编辑器

其他编辑器：任何html5编辑器  但是必须不占用adb端口

可以使用的：例如：dw   Apatana Studio 3  sublime    WebStorm

不可以使用的：国内优秀的Hbuilder html5开发共工具 (原因：占用adb ，暂时未找到如何解除占用) 

http://bbs.phonegap100.com/thread-1567-1-1.html

1. Jqmobi 

轻量级框架，它的语言基于jquery语言容易上手,运行速度快，但是没有MVC 多人协作开发的概念，项目比较大后 代码不易维护     (中小项目  1-2个人开发很适用)

2. SenchaTouch

运行速度快 和 jqmobi运行速度差不多，兼容性好，基于MVC世界上第一个html5 移动开发框架，但是它是一个重量级的框架，需要extjs 基础 代码复杂需要较强的程序基础。

但是sencha architect 是个很不错的可视化开发工具，弥补了sencha的不少缺点

3. ionic

运行速度快 和 jqmobi运行速度差不多，轻量级框架，基于Angularjs，支持Angularjs的特性，MVC ，代码易维护

IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就 。

Crosswalk作为一款开源的web引擎，正是为了跨越这些障碍而生。目前Crosswalk正式支持的移动操作系统包括Android和Tizen，在Android 4.0及以上的系统中使用Crosswalk的Web应用程序在HTML5方面可以有一致的体验，同时和系统的整合交互方面（比如启动画面、权限管理、应用切换、社交分享等等）可以做到类似原生应用。现在Crosswalk已经成为众多知名HTML5平台和应用的推荐引擎，包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等，未来的Cordova 4.X也计划集成Crosswalk。同时在去年的中国iWeb大会上，Cocos2d-HTML5游戏引擎也宣布与Crosswalk展开合作。

优点：运行速度提升

安装包比较大

1．集成crosswalk  

ionic browser add crosswalk  

2.卸载 crosswalk  

ionic browser revert android     或者   ionic browser remove crosswalk  

http://bbs.phonegap100.com/thread-1446-1-1.html

Cordova中集成CorssWall(比较复杂,上面方法已经适用于所有应用，自己研究)

http://blog.csdn.net/zapzqc/article/details/41945927

安装中可能出现这个错误，解决方案按照最上面的更新sdk

 

感谢收看本次教程

本教程由 phonegap 中文网(phonegap100.com)

www.itying.com 提供

我是主讲老师： 树根

我的邮箱： phonegap100@qq.com