提醒:
最近有朋友反饋說PhoneGap 打不開,這個(gè)是有新的API更新了,比以前更NB了,所以我也沒做這一塊,沒怎么關(guān)注:
最新的Cordova App 教程請(qǐng)先參考官網(wǎng)哦,目前工作任務(wù)有點(diǎn)緊張,暫時(shí)先不怎么更新了,需要的朋友請(qǐng)點(diǎn)擊我哦
本來進(jìn)入公司想著只是負(fù)責(zé)一些維護(hù)更新呢,我是做iOS的,公司缺少移動(dòng)端開發(fā)人員,沒辦法就負(fù)責(zé)iOS、安卓端的平臺(tái)了,但是好景不長(zhǎng),有點(diǎn)累人,公司決定APP往H5發(fā)展,因?yàn)橛泻芏嗖煌腁PP,對(duì)于我這個(gè)懶人,不知道怎么去面對(duì)了,不顧我一向是向上的,開始決定花費(fèi)一天時(shí)間稍作研究,具體的等日后再說,好了,開始具體來說環(huán)境配置
H5測(cè)試demo下載地址:PhoneGap iOS測(cè)試demo下載地址
(一)、 環(huán)境所需要的東西,我們來做一些整理
- 我們可以直接進(jìn)入PhoneGap官網(wǎng)下載PhoneGap-2.9.1 目前更新了 ,替換不用了,如果詳細(xì)安裝教程請(qǐng)參考下面的鏈接 進(jìn)入到官網(wǎng)
由于時(shí)間緊促:我暫時(shí)給你們提供一個(gè)另外一個(gè)教程:
Create your first Cordova app
這個(gè)教程值最直接明了的,我們來個(gè)圖片最直接哦
- 在介紹一個(gè)使用性比較好的文檔就是PhoneGap生成APP的DOC文檔
- 接下來我們需要安裝的一個(gè)是npm 也就是H5的要用到的NODE.js下載地址 各自對(duì)應(yīng)自己平臺(tái)的就行,我這里用的Mac OSX
- 下面我們先安裝一下node.js 下載好的一個(gè).pkg 文件,雙擊安裝,和正常Mac 安裝應(yīng)用程序一樣,
安裝完成之后我暫時(shí)不管位置了,處理接下來的操作 - 下面是解壓我們下載好的PhoneGap 2.9.1 ,解壓好之后我們可以看到如下的幾個(gè)文件,看到了吧,需要那個(gè)平臺(tái)就在對(duì)應(yīng)的平臺(tái)的Lib添加一下就好
3.我們要用到一下結(jié)構(gòu)的bin下的目錄,箭頭勾選的那個(gè)是Lib下的實(shí)例工程,可以雙擊打開,運(yùn)行,我們先不做介紹,介紹bin下的主要操作,
打開我們的的終端控制器:
有些不使用終端的也可以找到對(duì)應(yīng)的bin 目錄直接拖進(jìn)來就行了,前提是前面要先輸入一下cd+空格+文件路徑
- 接下來我們進(jìn)入到bin 目錄下進(jìn)行如下操作
繼續(xù)輸入./create /Users/plee/Desktop/Demo001 com.shunx.test HelloWorld
- 其中Demo001 是我們創(chuàng)建的文件夾名字
- HelloWorld 是我們使用創(chuàng)建的工程名字,回車后就會(huì)出現(xiàn)一個(gè)文件夾,在桌面可以看到
終端的話我們繼續(xù)輸入cd
回到我們之前的界面
接下來使用命令cd /Users/plee/Desktop/Demo001/cordova
按下我們的鍵盤的Enter
接著輸入 ./build
然后回車即可
等待10秒左右即可看到一個(gè)提示** BUILD SUCCEDD **
的字樣
接下來就可以使用我們的Xcode直接打開HelloWorld.xcodeproj
文件
打開后的目錄如下多了一個(gè)WWW,的文件
運(yùn)行結(jié)果可以選擇真機(jī),也可以使用模擬器
以上就是我們常說的用HTML5 開發(fā)APP的配置環(huán)境
- 那么接下來我們還要看什么呢?
工程中的www這個(gè)文件夾不可不看
我們知道HTML加載頁面要包含以下幾個(gè)東西:
HTML
+CSS
+JavaScript
CSS:
代表樣式,其實(shí)就是我們看到的一些基礎(chǔ)配置,顏色,字體之類的顯示效果,這下簡(jiǎn)單多了吧
HTML:
一種標(biāo)簽語言,可以和JS進(jìn)行交互使用
重要的一部需要我們來完成
- (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.
這個(gè)地方換成我們需要加載的頁面就可以了,
self.viewController.startPage = @"reg.html";
// NOTE: To customize the view's frame size (which defaults to full screen), override
//針對(duì)加載頁面的大小可以自己手動(dòng)設(shè)置頁面大小,具體的還需要APP細(xì)致調(diào)節(jié)以下
// [self.viewController viewWillAppear:] in your view controller.
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
return YES;
}