Xcode7.3 配置PhoneGap 和Cordova app 开发HTML5的APP

提醒:

最近有朋友反馈说PhoneGap 打不开,这个是有新的API更新了,比以前更NB了,所以我也没做这一块,没怎么关注:
最新的Cordova App 教程请先参考官网哦,目前工作任务有点紧张,暂时先不怎么更新了,需要的朋友请点击我哦


本来进入公司想着只是负责一些维护更新呢,我是做iOS的,公司缺少移动端开发人员,没办法就负责iOS、安卓端的平台了,但是好景不长,有点累人,公司决定APP往H5发展,因为有很多不同的APP,对于我这个懒人,不知道怎么去面对了,不顾我一向是向上的,开始决定花费一天时间稍作研究,具体的等日后再说,好了,开始具体来说环境配置


H5测试demo下载地址:PhoneGap iOS测试demo下载地址

(一)、 环境所需要的东西,我们来做一些整理

最新的Cordova App 安装教程官网

进入到下载地址后是这个界面
在这里我选择了2.9.1版本下载

  1. 下面我们先安装一下node.js 下载好的一个.pkg 文件,双击安装,和正常Mac 安装应用程序一样,
    安装完成之后我暂时不管位置了,处理接下来的操作
  2. 下面是解压我们下载好的PhoneGap 2.9.1 ,解压好之后我们可以看到如下的几个文件,看到了吧,需要那个平台就在对应的平台的Lib添加一下就好
这个是解压之后的文件

3.我们要用到一下结构的bin下的目录,箭头勾选的那个是Lib下的实例工程,可以双击打开,运行,我们先不做介绍,介绍bin下的主要操作,
打开我们的的终端控制器:

我的是在下载里面

有些不使用终端的也可以找到对应的bin 目录直接拖进来就行了,前提是前面要先输入一下cd+空格+文件路径

  • 接下来我们进入到bin 目录下进行如下操作
    继续输入./create /Users/plee/Desktop/Demo001 com.shunx.test HelloWorld
    • 其中Demo001 是我们创建的文件夹名字
    • HelloWorld 是我们使用创建的工程名字,回车后就会出现一个文件夹,在桌面可以看到
创建之后可看到

终端的话我们继续输入cd
回到我们之前的界面
接下来使用命令cd /Users/plee/Desktop/Demo001/cordova
按下我们的键盘的Enter
接着输入 ./build
然后回车即可
等待10秒左右即可看到一个提示** BUILD SUCCEDD **的字样
接下来就可以使用我们的Xcode直接打开HelloWorld.xcodeproj文件
打开后的目录如下多了一个WWW,的文件

打开的工程目录如图

运行结果可以选择真机,也可以使用模拟器

模拟器运行结果

以上就是我们常说的用HTML5 开发APP的配置环境

  • 那么接下来我们还要看什么呢?
    工程中的www这个文件夹不可不看
    我们知道HTML加载页面要包含以下几个东西:
    HTML + CSS+JavaScript
    CSS: 代表样式,其实就是我们看到的一些基础配置,颜色,字体之类的显示效果,这下简单多了吧
    HTML: 一种标签语言,可以和JS进行交互使用

重要的一部需要我们来完成

- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
{
    CGRect screenBounds = [[UIScreen mainScreen] bounds];

#if __has_feature(objc_arc)
        self.window = [[UIWindow alloc] initWithFrame:screenBounds];
#else
        self.window = [[[UIWindow alloc] initWithFrame:screenBounds] autorelease];
#endif
    self.window.autoresizesSubviews = YES;

#if __has_feature(objc_arc)
        self.viewController = [[MainViewController alloc] init];
#else
        self.viewController = [[[MainViewController alloc] init] autorelease];
#endif
    self.viewController.useSplashScreen = YES;

    // Set your app's start page by setting the <content src='foo.html' /> tag in config.xml.
    // If necessary, uncomment the line below to override it.
这个地方换成我们需要加载的页面就可以了,
    self.viewController.startPage = @"reg.html";

    // NOTE: To customize the view's frame size (which defaults to full screen), override
//针对加载页面的大小可以自己手动设置页面大小,具体的还需要APP细致调节以下
    // [self.viewController viewWillAppear:] in your view controller.

    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];

    return YES;
}


以上就是我们对于一个PhoneGap 开发iOS APP的环境配置,具体的一些使用会在后面继续加入,如有高手见解,可以留言,本人也是第一次尝试,不代表任何观点,只是给需要的程序员提供一个入口

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容