PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

PhoneGap中文网 首页 视频教程 ionic 教程 查看内容

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

2015-4-19 22:34| 发布者: admin| 查看: 20597| 评论: 0

摘要: 第一讲 phonegap性能优化 以及phonegap + Angularjs + ionic 移动app开发介绍学习要点:1. Phonegap第一季 第二季视频教程内容简介2. phonegap介绍phonegap运行速度介绍以及phonegap安装介绍3. Angularjs介绍4. Ioni ...


第一讲  phonegap性能优化 以及phonegap + Angularjs + ionic 移动app开发介绍

学习要点:
1. Phonegap第一季 第二季视频教程内容简介 
2. phonegap介绍phonegap运行速度介绍以及phonegap安装介绍
3. Angularjs介绍
4. Ionic介绍以及学习ionic前为什么要学Angularjs  
5. Ionic 安装 helloword 演示 以及ionic在android环境下面导航在最上面解决方案 (重点)
6. Phonegap3.0以上ios android调试,以及ionic写好代码后浏览器动态预览
7. 开发工具介绍 ,如何不使用eclipse来运行模拟器调试程序 (重点)
8. 已经学会了jqmobi , Sencha这样的htnl5 移动App开发框架 为什么还要学ionic
9. Crosswalk开源android WebView 引擎,让Phonegap android应用飞起来(经测试运行速度可以提升 3-5倍  重点)


主讲教师:(树根)
合作网站:www.phonegap100.com (PhoneGap中文网)
合作网站:www.itying.com  (IT营)


1. 第一季 第二季内容简介

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

第二季内容: (jqmobi基础免费,其他赞助)赞助期满后陆续免费公开
  • 1. jqmobi基础 (运行速度快)
  • 2. jqmobi+discuz+phonegap  discuz项目实战
  • 3. SenchaTouch+Sencha Architecture可视化开发工具基础  (运行速度快)
  • 4. SenchaTouch+Sencha Architectures 淘宝导购app项目实战 


2. phonegap介绍phonegap运行速度介绍以及phonegap安装介绍

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下载


3. Angularjs介绍

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

4. Ionic介绍 以及学习ionic前为什么要学Angularjs

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

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

官网:http://ionicframework.com/


学习ionic前为什么要学Angularjs

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



5. Ionic安装 helloword 演示以及ionic在android环境下面导航在最上面解决方案

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


Android adt 离线包集成sdk  
http://bbs.phonegap100.com/thread-1456-1-1.html




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


重新指定版本 安装cordova

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

npm install -g cordova@4.1.2   


4. 安装ionic


npm install -g ionic
sudo npm install -g ionic


5.创建运行项目

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

 
 


6. Phonegap3.0以上ios android调试,以及ionic写好代码后浏览器动态预览
前面给大家讲过 weinre 在xcode开发中调试我们的代码还有  Phonegap桌面开发工具 Desktop-App与手机调试工具
http://bbs.phonegap100.com/thread-1315-1-1.html

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

ionic  serve    重要用于浏览器调试 

cordova serve   


7. 开发工具介绍 ,如何不使用eclipse来运行模拟器调试程序

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

其他编辑器:任何html5编辑器  但是必须不占用adb端口
可以使用的:例如:dw   Apatana Studio 3  sublime    WebStorm
不可以使用的:国内优秀的Hbuilder html5开发共工具 (原因:占用adb ,暂时未找到如何解除占用) 

WebStorm8.0 免费下载地址:
http://bbs.phonegap100.com/thread-1567-1-1.html



8. 已经学会了jqmobi , Sencha这样的htnl5 移动App开发框架 为什么还要学ionic

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一定会取得不错的成就 。


9. Crosswalk开源android WebView 引擎,让Phonegap android应用飞起来(经测试运行速度可以提升 3-5倍)


1. Crosswalk介绍:
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展开合作。

2.使用Crosswalk的优点和缺点
优点:运行速度提升
安装包比较大

Ionic 中集成 Crosswalk (也可以集成其他的htnl5框架 如jqmobi)介绍:

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


头晕

难过

扯淡

不解

搞笑
5

支持

超赞

欠扁

刚表态过的朋友 (5 人)

相关阅读

最新评论

关闭

站长推荐上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2019-10-15 07:52 , Processed in 0.176219 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部