Xcode7.3 配置PhoneGap 和Cordova app 開發(fā)HTML5的APP

提醒:

最近有朋友反饋說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)境所需要的東西,我們來做一些整理

最新的Cordova App 安裝教程官網(wǎng)

進(jìn)入到下載地址后是這個(gè)界面
在這里我選擇了2.9.1版本下載
  • 在介紹一個(gè)使用性比較好的文檔就是PhoneGap生成APP的DOC文檔
    • 接下來我們需要安裝的一個(gè)是npm 也就是H5的要用到的NODE.js下載地址 各自對(duì)應(yīng)自己平臺(tái)的就行,我這里用的Mac OSX

  1. 下面我們先安裝一下node.js 下載好的一個(gè).pkg 文件,雙擊安裝,和正常Mac 安裝應(yīng)用程序一樣,
    安裝完成之后我暫時(shí)不管位置了,處理接下來的操作
  2. 下面是解壓我們下載好的PhoneGap 2.9.1 ,解壓好之后我們可以看到如下的幾個(gè)文件,看到了吧,需要那個(gè)平臺(tái)就在對(duì)應(yīng)的平臺(tái)的Lib添加一下就好
這個(gè)是解壓之后的文件

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è)文件夾,在桌面可以看到
創(chuàng)建之后可看到

終端的話我們繼續(xù)輸入cd
回到我們之前的界面
接下來使用命令cd /Users/plee/Desktop/Demo001/cordova
按下我們的鍵盤的Enter
接著輸入 ./build
然后回車即可
等待10秒左右即可看到一個(gè)提示** BUILD SUCCEDD **的字樣
接下來就可以使用我們的Xcode直接打開HelloWorld.xcodeproj文件
打開后的目錄如下多了一個(gè)WWW,的文件

打開的工程目錄如圖

運(yùn)行結(jié)果可以選擇真機(jī),也可以使用模擬器

模擬器運(yùn)行結(jié)果

以上就是我們常說的用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;
}


以上就是我們對(duì)于一個(gè)PhoneGap 開發(fā)iOS APP的環(huán)境配置,具體的一些使用會(huì)在后面繼續(xù)加入,如有高手見解,可以留言,本人也是第一次嘗試,不代表任何觀點(diǎn),只是給需要的程序員提供一個(gè)入口

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,702評(píng)論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,615評(píng)論 3 419
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,606評(píng)論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,044評(píng)論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,826評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,227評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,307評(píng)論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,447評(píng)論 0 289
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,992評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,807評(píng)論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,001評(píng)論 1 370
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,550評(píng)論 5 361
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,243評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,667評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,930評(píng)論 1 287
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,709評(píng)論 3 393
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,996評(píng)論 2 374

推薦閱讀更多精彩內(nèi)容