文档章节

如何采用Yeoman + Grunt + Bower开发基于PhoneGap的Hybrid APP

僵尸猫
 僵尸猫
发布于 2015/06/24 23:14
字数 2465
阅读 3121
收藏 136
点赞 1
评论 6
 

一直想开发手机应用,也跟着教程学做了两个iOS小应用,但开发思维上的转变需要一个长期的过程,而且iOS系统功能很强大,陌生的地方也很多,很多功能不知道该自己开发还是系统上已经存在,也不了解现在iOS开发的流程。所以对于没有任何移动平台客户端开发经验的开发人员来说,想要做一个产品级别的产品出来,如果直接采用原生开发,不知道有多少坑要填。幸好现在有Hybrid APP方式,一种介于Web APP和Native APP之间的解决方案。Web APP无需安装,但需要打开系统上的浏览器来运行,因为就是网页嘛,用户体验不太好,操作局限性大。Native APP是安装在系统上的应用,体验更好,但是开发难度不小,并且需要针对不同系统开发对应的版本,开发和维护成本太高。Hybrid APP综合了上述两种APP的优点,用户界面通过Web前端技术实现,使用JavaScript调用第三方库封装的系统API,这样一来,不同系统下应用的UI界面不再需要使用原生语言重新开发,只用调用对应的第三方库即可。

  • 为什么开发Hybrid APP
    Hybrid APP——混合APP,就是采用非原生APP的开发语言来制作APP的界面,调用第三方发布的APP中间件在各平台上运行,关于中间件的介绍请参考《Hybrid App开发实战》。由此可见,因为有第三方中间件封装了各种平台的底层API,Hybrid APP可以实现跨平台开发,而且没有原生APP开发经验的开发人员也可以使用自己擅长的技术来开发APP。特别对于Web开发人员来讲,如果没有这种方式,转向去学习纯原生方式的开发,其成本和难度都不小。在前端方面,现在使用HTML5 + CSS3 + JavaScript可以快速开发出很强大的Web应用,所以能复用Web前端技术在APP开发上真是一件普大喜奔的好事。

  • 如何搭建一个基于PhoneGap的Hybrid APP
    我采用的是PhoneGap作为中间件,它采用命令行的方式来创建工程,所以需要先安装PhoneGap的命令行工具,并且这个命令行工具要用到npm来安装,也就是Node.js的包管理工具,所以在自己的开发环境里把Node.js安装好就可以使用npm了。
    安装妥当npm之后,全局条件下安装PhoneGap的命令行工具,在命令行界面输入如下命令,因为我的环境没能成功安装PhoneGap,所以采用cordova代替。
    $ sudo npm install -g phonegap
    我没有成功安装,于是安装的cordova
    $ sudo npm install -g cordova
    安装完毕之后,就可以使用cordova来创建PhoneGap项目。cordova是从PhoneGap提取出来的一个开源项目,在我看来,除了名字不一样之外,二者没有什么区别。
    然后在常用的项目文件夹下运行命令:
    $ cordova create hello com.example.hello "HelloWorld"
    Creating a new cordova project.
    $ ls
    hello
    create后面第一个参数hello是新建的项目文件夹名称,第二个参数com.example.hello是公司名称,第三个参数"HelloWorld"是项目名。在当前目录下可以看到多了一个文件夹hello。
    然后进到项目文件夹里,添加对iOS的支持
    $ cd hello
    $ cordova platform add ios
    $ cordova prepare
    至此,就完成了对基于PhoneGap的Hybrid APP项目的创建工作,接下来用XCode来打开这个项目,运行iOS模拟器来检验这个项目能否正常运行。
    启动Xcode,打开文件/hello/platforms/ios/HelloWorld.xcodeproj



    使用Xcode打开项目后,点击运行按钮后,稍等片刻,在模拟器中看到Cordova的界面,就表示成功运行。



    创建其他平台的流程应该也是类似的,具体操作建议参考官方文档。

  • 怎样加入Yeoman + Grunt + Bower开发流程
    通过上面的过程,创建了一个基于PhoneGap的Hybrid APP工程,可是APP本身的开发流程还没有涉及到。我想采用当前Web前端流行的Yeoman + Grunt + Bower全明星组合,开发一款基于AngularJS的应用,然后将这个Web APP打包后放到PhoneGap的环境下,使用Xcode编译之后就可以部署到iOS上运行了。
    Yeoman是一个Web APP的脚手架程序,所谓脚手架程序,就是帮助开发者完成搭建一个Web项目时经常重复的项目初始设置的过程,换句话说,就是用一个命令就可以搞定一个项目的初始搭建工作。
    Grunt是现在流行的Web前端自动化开源工具,并且有丰富的插件可以使用。可以完成单元测试,静态文件合并、缩小,还可以为前端运行一个简单的Web服务器等很多工作。
    Bower是Web前端的包管理工具,可以使用它来管理Web前端的各种第三方库,比如jQuery,Bootstrap,AngularJS等。
    以上三者也是通过npm来安装,既然上面已经安装过了,现在只需要输入安装这三个工具的命令,
    $ npm install -g yo bower grunt-cli
    这三个工具安装完毕之后,在之前创建的Hybrid APP项目文件夹下创建一个Web APP的目录,比如叫yo,然后安装用于创建基于angular的Web项目的自动生成器,并运行yeoman来创建一个Web APP项目。
    $ mkdir yo
    $ cd yo
    $ npm install -g generator-angular
    $ yo angular
    项目创建完成后,检查一下项目能否正常运行,在命令行输入
    $ grunt serve
    这样就启动了一个Web服务器来运行刚才创建的Web APP,顺利的话可以在浏览器上看到这个yeoman的实例页面。


    好了,现在看看怎么把yeoman创建的项目放到Hybrid APP里运行。
    把Hybrid APP根目录下的config.xml拷贝到yo/app目录下,然后修改yo下的Gruntfile.js。
    1,增加xml到copy->dist->files->src中
    2,在copy->dist->files中添加
    {
      expand: true,
      cwd: '../platforms/ios/www',
      dest: '<%= yeoman.dist %>/scripts',
      src: [
      'plugins/**',
      'cordova.js',
      'cordova_plugins.js'
      ]
    }
    3,在clean中增加options: {force: true}

    修改后代码如下:
    // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt,xml}',
            '.htaccess',
            '*.html',
            'views/{,*/}*.html',
            'images/{,*/}*.{webp}',
            'styles/fonts/{,*/}*.*'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: '../platforms/ios/www',
          dest: '<%= yeoman.dist %>/scripts',
          src: [
          'plugins/**',
          'cordova.js',
          'cordova_plugins.js'
          ]
        }]
      },
      styles: {
        expand: true,
        cwd: '<%= yeoman.app %>/styles',
        dest: '.tmp/styles/',
        src: '{,*/}*.css'
      }
    },
    
    // Empties folders to start fresh
    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/{,*/}*',
            '!<%= yeoman.dist %>/.git{,*/}*'
          ]
        }]
      },
      server: '.tmp',
      options: {
        force: true
      }
    },
    4,修改index.html,在angular的引用之前添加对cordova.js的引用
    <script type="text/javascript" src="scripts/cordova.js"></script>
    5,在命令行运行grunt build,打包整个Web APP项目,然后拷贝yo/dist下所有文件到Hybrid APP项目的www目录下
    $ grunt build
    6,来到Hybrid APP项目的根目录,在命令行运行cordova prepare
    $ cordova prepare
    7,用Xcode打开Hybrid APP项目,运行iOS模拟器,可以看到Web APP已经成功的在iOS上运行了。


    步骤5,6在每次将Web APP部署到iOS上调试时都要做,纯属重复的手工操作,我写了一段shell脚本来运行
    echo '### Sync APP to Platforms ###'
    
    echo 'Building web APP...'
    echo 'Please be patient, it may take several minutes'
    grunt build
    
    sourceDir="dist"
    targetDir="../www"
    allFiles="/*"
    
    if [ -d $sourceDir ]
    then
    	if [ ! -d $targetDir ]
    	then
    		mkdir -p $targetDir
    	fi
    	echo 'Copying source files to www/'
    	cp -r $sourceDir$allFiles $targetDir
    
    	echo 'Calling cordova prepare'
    	cd ..
    	cordova prepare
    	echo 'All done'
    else
    	echo 'Err: The source directory "dist" doesnot exist, use command "grunt build" to generate it firstly'
    fi


    但想要开发高效率的应用,公认还是做原生开发更好,iOS原生应用开发入门教程推荐王寒的编纂的《从零开始学iOS7开发系列》,教程写的非常生动易懂,文章里的例子也很有代表性,仔细学习和琢磨之后可以举一反三开发自己的应用。其实Hybrid APP开发早已经不限于移动平台了,我最早接触到的Hybrid APP是家用主机平台,在XBOX ONE上,微软也实现了供JavaScript调用的XBOX系统API,将Web APP通过Visual Studio打包后发布到主机上就可以运行。既然HTML5和CSS3在制作用户界面上巨大的潜力,采用Hybrid APP方式确实可以极大的帮助Web开发人员开发浏览器平台以外的应用。


参考


© 著作权归作者所有

共有 人打赏支持
僵尸猫
粉丝 3
博文 8
码字总数 5620
作品 0
成都
程序员
加载中

评论(6)

僵尸猫
僵尸猫

引用来自“Slayer”的评论

楼主的入门教程不错,不过个人推荐ionic,开发速度快,定制自己的也比较快,IONIC在IOS上的表现很好,几乎和原生的差不多,至于安卓,主要是因为安卓自带webview太渣,如果不在意apk大小(大20M),集成crosswalk,也很流畅,
多谢推荐,我也打算研究下ionic。
冬芽
冬芽
楼主的入门教程不错,不过个人推荐ionic,开发速度快,定制自己的也比较快,IONIC在IOS上的表现很好,几乎和原生的差不多,至于安卓,主要是因为安卓自带webview太渣,如果不在意apk大小(大20M),集成crosswalk,也很流畅,
僵尸猫
僵尸猫

引用来自“huangjacky”的评论

ionic 继承angular,gulp更快

我理解ionic是cordova + angular + 一套它设计和实现的UI是这样的吗?它针对移动开发做了什么特别的优化吗?
kinosang
kinosang
ionic + 1
提供很多界面元件可以在不同平台上自適應 ui 規範
huangjacky
huangjacky
ionic 继承angular,gulp更快

Jashon
Jashon
不错
使用The PhoneGap Developer App实现快速调试项目

如今,基于 PhoneGap 的混合 APP 开发技术更加成熟,优势更加凸显。移动互联网的迅猛发展,Android 和 iOS 的版本快速迭代,使 HTML5 的性能问题逐步解决。仅仅在 PhoneGap 官网上,已经有来...

crazymus
2015/04/26
0
0
看看国外的phonegap和ionic移动app开发框架有多火

在2010年左右的时候,在android内存还在512内存的时候,和多人对phonegap提出了很多的质疑,以及一些不正当竞争的国内公司,用自己的框架和jqueryMobile+phonegap组合来给phonegap泼凉水,懂...

2tman
2014/12/23
0
1
[Android]PhoneGap源码分析——白名单

对于单独的Web app应用来说,加载进来的url一般不能保证它的安全性。那么如何来处理url安全性的问题呢。 让我们来看看PhoneGap是如何做的。 PhoneGap采用了白名单的形式,认为在白名单中的u...

亭子happy
2012/09/29
0
1
使用visual studio 2013 快速搭建phonegap开发环境

前一段时间开发了一款简单的Phonegap应用,遇到了很多坑,其中有一个坑就是在搭建开发环境上。由于Phonegap 2.x 与3.x 区别比较大,导致了开发环境也有所不同。 2.x 是这样的 http://www.cnb...

hentai
2014/10/05
0
1
hybrid app适用范围猜想

如同很多功能公司的老大一样,我的顶头上司前几天了解到了HTML5(看了我发给他的友盟分析报告...),他脑子里有了几个词语:html5、跨平台、phonegap。 由于以前做过一年的J2EE,所以写个JS,...

黑狗
2013/09/21
0
0
phonegap桌面开发工具视频教程-不搭建环境就可以开发phonegap app

不搭建andrid 环境 不配置android sdk 或者不搭建xcode环境,或者不安装 node.js npm 的情况下就可以创建phoengap应用 电脑敲代码 手机上的phonegap app实时自动更新显示 Phonegap桌面开发工...

2tman
2015/01/22
0
0
小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载四(使用程序加载事件)

在了解了PhoneGap中都有哪些事件之后,本节将开始对这些事件的用法进行详细地介绍。本节要介绍的是程序加载事件,也就是deviceready、pause和resume这3个事件。 【范例4-2 程序加载事件的使用...

woiwoi
2014/11/03
0
0
AppCan VS PhoneGap - 对比两大移动开发平台

要说hybrid app 框架的典范,Phonegap和AppCan无疑是最受大家关注的。先说明,本人是App的开发者,对手机上的web app也研究一段时间。本文以技术角度去阐述一个事实:为什么AppCan比Phonega...

迷途d书童
2012/07/05
0
13
Android:PhoneGap入门

PhoneGap是一能够让你用普通的web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台。是唯一的一个支持7个平台的开源移动框架。它的优势是无以伦比的:开发成本低——据估算,...

Xushao
2013/08/12
0
2
小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载五(使用PhoneGap

除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的。范例...

woiwoi
2014/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
13
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部