提醒:
最近有朋友反馈说PhoneGap 打不开,这个是有新的API更新了,比以前更NB了,所以我也没做这一块,没怎么关注:
最新的Cordova App 教程请先参考官网哦,目前工作任务有点紧张,暂时先不怎么更新了,需要的朋友请点击我哦
本来进入公司想着只是负责一些维护更新呢,我是做iOS的,公司缺少移动端开发人员,没办法就负责iOS、安卓端的平台了,但是好景不长,有点累人,公司决定APP往H5发展,因为有很多不同的APP,对于我这个懒人,不知道怎么去面对了,不顾我一向是向上的,开始决定花费一天时间稍作研究,具体的等日后再说,好了,开始具体来说环境配置
H5测试demo下载地址:PhoneGap iOS测试demo下载地址
(一)、 环境所需要的东西,我们来做一些整理
- 我们可以直接进入PhoneGap官网下载PhoneGap-2.9.1 目前更新了 ,替换不用了,如果详细安装教程请参考下面的链接 进入到官网
由于时间紧促:我暂时给你们提供一个另外一个教程:
Create your first Cordova app
这个教程值最直接明了的,我们来个图片最直接哦
最新的Cordova App 安装教程官网
进入到下载地址后是这个界面
在这里我选择了2.9.1版本下载
- 在介绍一个使用性比较好的文档就是PhoneGap生成APP的DOC文档
- 接下来我们需要安装的一个是npm 也就是H5的要用到的NODE.js下载地址 各自对应自己平台的就行,我这里用的Mac OSX
- 下面我们先安装一下node.js 下载好的一个.pkg 文件,双击安装,和正常Mac 安装应用程序一样,
安装完成之后我暂时不管位置了,处理接下来的操作 - 下面是解压我们下载好的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;
}