最新版本号[免费下载]

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

作者:本站编辑 发布时间:2015-11-24 来源:本站原创 点击数:

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. 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控件

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

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

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

学习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…

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

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 ,暂时未找到如何解除占用) 

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  


本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友
AI智能听书
选取音色