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

最新推荐文章于 2018-02-19 00:58:34 发布

范红康

最新推荐文章于 2018-02-19 00:58:34 发布

阅读量2.7k

点赞数

本教程涵盖PhoneGap性能优化、AngularJS与Ionic框架介绍及其在移动App开发中的应用。从PhoneGap安装到Ionic Hello World项目演示，再到Android环境下导航问题的解决方法。教程还涉及PhoneGap 3.0以上版本的iOS和Android调试技巧，以及如何不使用Eclipse进行模拟器调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一讲 phonegap 性能优化以及 phonegap+ Angularjs +

ionic 移动 app 开发介绍

学习要点：

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

主讲教师：（树根）

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

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

第一季内容:（免费）

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

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

jqmobi 基础 (运行速度快)
jqmobi+discuz+phonegap discuz 项目实战
SenchaTouch+Sencha Architecture 可视化开发工具基础 (运行速度快)
SenchaTouch+Sencha Architectures 淘宝导购 app 项目实战

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

Phonegap 介绍

PhoneGap 是一个用基于 HTML，CSS 和 JavaScript 的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada 和 Blackberry 智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外 PhoneGap 拥有丰富的插件，可以调用。 http://baike.baidu.com/view/4157600.htm
Phonegap 运行速度
1. android 环境：
  1. 512 内存手机可以放弃 phoengap
  2. 1G 双核手机运行流畅感觉速度稍微比原生慢可结合 Crosswalk 优化
  3. 2G 4 核+ 手机运行流畅看不出和原生差别
  4. 部分手机兼容可能会出现问题需要调整 css（原生开发也会有此问题）
2. ios 环境：
  1. iphone4+运行流畅
  2. iphone5+ 看不出和原生差别
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 下载

http://www.bootcdn.cn/angular.js/
npm installangular

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

Ionic 整合（AngularJs integrate）AngularJs
Ionic Urlrouting，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

android 市面设备统计图

Ios 市面设备统计图

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

配置环境
先安装 node.js
安装 cordova

npm install -g cordova sudo npm install -g cordova

注意：部分同学现在直接使用 npm install -g cordova 发现安装了以后执行cordova build android 的时候提示需要安装 platformfor 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

安装 ionic

npm install -g ionic sudo npminstall -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 展开合作。