请选择 进入手机版 | 继续访问电脑版

谈一谈自己对跨平台开发的理解之PhoneGap

发表于 2016-07-14 16:14 显示全部楼层 71 3098

       许久没在论坛发帖了,突然发现论坛的人气高了很多啊.以前每次签到都能前几名的现在都抢不到了.2333....,姑且不说题外话了.最近在论坛上看到两篇跨平台开发的帖子,让我颇感兴趣,但奈何竟然是mac的,这让我就很尴尬了.怎么办呢?想玩一下,奈何自己不是土豪玩家.只有平民装win7系统在手.于是我便在网上百度了一下资料,跨平台开发.这一看发现东西还真的是挺多的.只怪自己知道的太少.现在就给大家介绍一下我研究的phonegap吧!之所以拿这个phonegap技术来说明主要是因为这种跨平台开发已经在网上有很多学习资料可方便大家要是感兴趣可以自己进一步去了解.本篇只为帮你打开一扇窗口.

        说了这么多可能很多人还不清楚什么是phonegap.以下是我在百度的一些资料(请相信百度还是专业的)。

phonegap介绍.bmp


        看完这个介绍。是否让你觉得这个东西还是挺有意思的呢?再来看看他支持的手机操作系统。

        支持的系统.bmp




        此时你是否感觉这个phonegap很牛逼!!!竟然写一套代码就能支持这么多的系统。然后你再看看它需要用到的开发技术。卧槽!!竟然是html+js+css,做我们这一行的应该都清楚这三剑客吧!我一直觉得这个phonegap出现的意义就在于它让web前端开发人员一样拥有了和android/ios开发人员开发移动应用程序的能力。你想想,web前端开发人员可以使用他们熟悉的前端技术就可以在该平台上进行移动开发。相比之下,我们android/ios必须要去学习java,oc/swift等等。若此时一个从事多年web开发的人员想做一个app。他再也不用去做这些知识储备了。直接利用phonegap进行开发。简直是web前端人员的福音啊!

      PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台。官方说有低成本,低开发周期,轻量化等优点,这些咱 暂时也没法证明,略过不表。但是有一条跨平台,却是很明显的优势。因为它采用HTML5+JavaScript的模式来开发应用 .PhoneGap后来被Adobe收购,然后又贡献给了开源社区,现在由Apache管理,改名cordova。

       说了这么多,还不如亲自实践一番。下面我们就来尝试如何在winxp/win7使用phonegap搭建一个跨平台的app应用。

        (注:win8和win10没有尝试过,有兴趣的可以自行查询资料)

一、环境准备

     1.1、安装node.js 

      下载链接:

            这是因为安装cordova时要用到node.js的npm ,下载连接:http://nodejs.org/

           下载安装成功之后,打开cmd,进入D盘,创建cordova的工作空间: cordovaspace

      成功标志:

           测试安装结果命令: node -v    

        wps4EA7.tmp.png

1.2、安装git(主要是为了下载一些需要使用的插件)

  1. 下载链接:

          用于后面有些插件可能需要用git来下载, 连接:http://git-scm.com/

  1. 指导链接:

          http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html

  1. 成功标志:

        安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功

      wpsBE6B.tmp.png

    

1.3、安装ant(注:如果不安装的话后台的操作会报找不到ant; )

  1. 下载连接:

        http://apache.dataguru.cn//ant/binaries/apache-ant-1.9.4-bin.zip

  1. 指导链接:

        http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html
        下载好之后,解压出来,我这里解压到D:\Delp_Tool\ant-1.8.2下,
        然后在
环境变量中配置变量ANT_HOME,值:D:\Delp_Tool\ant-1.8.2,
        在PATH中追加%ANT_HOME%\bin;

  1. 成功标志:

        测试安装效果命令: ant -v

    wpsBE7C.tmp.png

二、安装cordova CLI

2.1、安装命令:npm install -g cordova

如果出现如下错误(如未发生此错误请自动忽略):

   wpsBE8C.tmp.png

   原因: 代理问题.(如果你在公司一般要设置公司外网地址)  

    设置代理:

    npm config set proxy=http://192.168.99.100:80   (这是公司的代理)

    当需要制定安装版本时,请加版本号。

    npm install -g cordova@xxx

    xxx:对应的版本号

    因为不同的cordova 对应不同的android的sdk版本 ! 因为不同的cordova 对应不同的android的sdk版本!因为不同的cordova 对应不同的android 的sdk版本! 重要的话说三遍!!! 我在这里栽倒过很多次....

    2.2、测试安装结果命令:cordova -v

    wpsBEAD.tmp.png

三、创建app
     这里创建一个命名为firstApp,id为com.cycle.first的app,放在first文件夹下:
     创建命令:cordova  -d create first com.cycle.firstApp firstApp

    wpsBEAE.tmp.png

    创建过程需要下载一些cordova的库,所以得等一下,上面命令中的-d是展示创建过程中的一些细节命令执行完后会得到这么一个目录结构的appwpsBEBF.tmp.png









 

./first
./first/config.xml
./first/hooks
./first/hooks/README.md
./first/platforms
./first/plugin
./first/www
./first/www/css
./first/www/img
./first/www/js

./first/www/index.html

注:这个目录结构感兴趣的可以自行研究各自代表什么意思.


四、添加平台(注:添加平台前必须得先安装该平台的sdk)
这一步没做好,可能导致不能打包
4.1、安装sdk

注意:上面说到cordova版本要和sdk一致.那么安卓sdk和cordavo版本之间有这么个关系大致我测试的结果是:
        3.0需要的是android-17(Android 4.2.2)
        3.1和3.2需要android-18(Android 4.3)
        3.3、3.4、3.5需要android-19(Android 4.4.2)(同时
ant1.8+)

下载安装好adt后,还需要在环境变量中配置变量ANDROID_HOME,值得为sdk所有的目录,
比如我的就安装D:\androidWorkspace\adt\sdk,那就将ANDROID_HOME指向这个目录,并在PATH中
追加%ANDROID_HOME%\
tools;%ANDROID_HOME%\platform-tools;

注:修改了PATH后需要重启cmd才可以生效。

4.2、添加平台

添加平台命令:

接下来的命令都需要在app的次级目录下执行,
进入first : cd first
添加安卓: cordova platform add android

wpsBED0.tmp.png

添加其他的平台:

cordova platform add ios
cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos

创建完之后可以用下面这条命令来查看已添加以及可支持添加的平台:
cordova platforms ls

wps4433.tmp.png 


如果想删除某个平台的话,可以这样:
cordova platform rm amazon-fireos
cordova platform remove android
添加之后会./first/platforms下的目录,增加一个相应平台的目录,而删除平台的话,也会将这个目录删除。

删除卸载cordova。

npm uninstall cordova  -g
npm uninstall phonegap -g
最后去c盘(默认安装)搜索cordova 的文件夹 找到相关的干掉 就可以了

xp中文件夹位于:

wpsBEE1.tmp.png

win7文件夹位于:

wpsBEE2.tmp.png 


五、编译运行 app


cordova build
这条命令将编译./firstApp/platforms下所有的平台,如果只想单独编译其中的平台的话,只需要在build上增加该平台名即可。
cordova build android

貌似头一回编译时都比较慢。。。
编译的过程中,会输出一堆东西。。最后如果看到build successful,就可以了。
实际上,build命令是prepare 以及compile两条命令的缩写。上面这条命令相当于:
cordova prepare android
cordova compile android

这里给一个链接: http://jingyan.baidu.com/article/86fae346d09d093c49121a05.html


六、总结

        本文只是初略的讲了一下如何简单实用phonegap.,但其实还有很多东西由于笔者自身知识的局限性没有提及.像添加插件.自定义插件等等.

本人能力有限,觉得自己讲不清楚.但网上有一些资料.如果你想了解更多.可以看看网上大神的教程.顺便提一下,现在比较流行的跨平台开发框架有很多,比如像ionic+angular.js+phonegap.有兴趣的也可以好好的去研究一下啦!毕竟知道的越多,以后去面试也能装装逼!!!

附上官网链接:http://phonegap.com/getstarted/ 看官网介绍貌似现在可以下载客户端不需要通过命令行的方式来创建phonegap项目了.

附上本人笔记地址:http://note.youdao.com/yws/public/redirect/share?id=2b989375cf4802bddaaa4330d4568f37&type=false

附上:

        插件http://plugins.cordova.io/


        文档http://t.cn/RLcANQd


        SDK:http://t.cn/RLcAj1o


        调试教程http://t.cn/RLcq8rW


    以上,就是笔者对phonegap的一些研究.可能并不是那么的全面.甚至可能有错误的理解.还望大家积极交流指正!


                                                                                                                          葉十二


评分

参与人数 3学币 +18 收起 理由
边玲玲 + 5 好样儿的!继续加油
Joe + 5 好贴,好图,好排版~楼主流弊!膜拜~.
seemygo + 8 够干~值得研究学习~

查看全部评分

回复 使用道具
举报
昨夜一厕狼

发表于 2017-02-10 00:30 显示全部楼层

回复 支持 反对 使用道具
举报
TigerCY

发表于 2017-02-09 05:36 显示全部楼层

跟你讲个故事:六一那天我玩lol,我进游戏就打了一句61快乐,有3个人说了谢谢,我赶紧退出,我果断退出游戏。

回复 支持 反对 使用道具
举报
青果杰杰

发表于 2017-02-09 05:33 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
寻找皮卡丘

发表于 2017-02-09 05:19 显示全部楼层

回复 支持 反对 使用道具
举报
周牧

发表于 2017-02-09 04:59 显示全部楼层

回复 支持 反对 使用道具
举报
踮脚怪

发表于 2017-02-09 02:01 显示全部楼层

回复 支持 反对 使用道具
举报
凉月流沐

发表于 2017-02-08 22:15 显示全部楼层

回复 支持 反对 使用道具
举报
oygza

发表于 2017-02-08 22:12 显示全部楼层

回复 支持 反对 使用道具
举报
宁静致远

发表于 2017-02-08 14:48 显示全部楼层

祝愿小码哥越来越红火!!红红火火恍恍惚惚!

回复 支持 反对 使用道具
举报
12345下一页

发表新文章
葉、⑩②

小码哥骨干成员

0

学分

1218

学币

2138

积分

小码哥骨干成员

Rank: 6Rank: 6

积分
2138

小码哥一周年勋章活动达人勋章前100注册用户勋章意见领袖勋章论坛荣誉内测勋章小码哥Android学员勋章真土豪勋章勋章签到周冠军勋章签到月冠军勋章关注小码哥教育公众号关注新浪微博小码哥周年庆杯子小码哥周年庆T恤

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育