混合開發(fā)-基于cordova的iOS入門篇-你還記得那個(gè)hello word嗎菠发?

在看這篇文章之前,請(qǐng)你保證你的電腦上面已經(jīng)安裝的cordova,本文主要講解iOS的入門cordova腿准,使用cordova怎么創(chuàng)建iOS項(xiàng)目际起。你需要的條件有:

1、mac 上安裝cordova
2吐葱、mac 安裝xcode (一般做iOS開發(fā)的知道街望,都是必備的)

如果你沒有安裝cordova,請(qǐng)移步Mac下最詳細(xì)的cordova安裝流程問題總結(jié),如果你已經(jīng)看完并安裝完成弟跑,請(qǐng)各位看官往下看灾前。

開始裝逼了.jpg

一、基本使用

1孟辑、打開終端哎甲,cd 到你希望保存的項(xiàng)目的路徑下面,創(chuàng)建項(xiàng)目

cordova create testApp org.apache.cordova.testApp testApp

這將為您的cordova應(yīng)用程序創(chuàng)建所需的目錄結(jié)構(gòu)饲嗽。默認(rèn)情況下炭玫,cordova create腳本生成一個(gè)骨架的基于Web的應(yīng)用程序,其主頁(yè)是項(xiàng)目的www/index.html文件貌虾。

參數(shù)解析:
testApp: 將為你的項(xiàng)目生成一個(gè)testApp目錄
org.apache.cordova.testApp : 你創(chuàng)建項(xiàng)目的AppId吞加,就是項(xiàng)目的bundleID
testApp : 創(chuàng)建的應(yīng)用程序的項(xiàng)目名

2、cd 到剛才項(xiàng)目創(chuàng)建的目錄,之后所有后續(xù)命令需要在項(xiàng)目目錄或任何子目錄中運(yùn)行

cd testApp (路徑)

3衔憨、增加你想增加平臺(tái)叶圃,我們這里采用ios,并且默認(rèn)會(huì)配置、保存config.xml和package.json

cordova platform add ios
cordova platform add android (小編沒有用)

增加好之后践图,你也可以檢查你的平臺(tái)

cordova platform ls

Snip20170907_14.png

如果你想一下構(gòu)建支持所有平臺(tái)的cordova,可以使用命令

cordova build

您可以選擇將每個(gè)構(gòu)建的范圍限制在特定的平臺(tái)上 - 'ios'在這種情況下:

cordova build android

更多命令可以參考cordova命令文檔

二掺冠、擴(kuò)展使用-增加插件

插件通常托管在npm,注意不是所有的插件都是全部平臺(tái)都可以使用码党,所以使用插件的時(shí)候注意平臺(tái)是否支持

搜索插件

cordova plugin search camera

增加插件

cordova plugin add cordova-plugin-camera

查看插件

cordova plugin ls

Snip20170907_15.png

更多插件命令請(qǐng)參考cordova插件命令大全
同時(shí)插件也可以使用目錄或git repo添加赫舒,也支持自定義插件,相關(guān)文檔請(qǐng)參考自定義插件開發(fā)指南

三闽瓢、項(xiàng)目結(jié)構(gòu)講解

按照上面的步驟,你應(yīng)該創(chuàng)建好一個(gè)工程項(xiàng)目

Snip20170907_16.png

打開項(xiàng)目心赶,首先移除兩個(gè)重復(fù)文件

Snip20170907_18.png

1扣讼、Config.xml是一個(gè)全局配置文件,用于控制cordova應(yīng)用程序行為缨叫。

根元素<widget id="org.apache.cordova.testApp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0""></widget>
ID 用程序的反向域標(biāo)識(shí)符
version 版本
ios 還應(yīng)該增加ios-CFBundleVersion="1.0.0"

最重要-最重要-最重要的是找到設(shè)置啟動(dòng)頁(yè)

<widget ...>
<content src="index.html"></content>
</widget>
默認(rèn)值為index.html椭符,它通常顯示在項(xiàng)目的頂級(jí)www目錄中

支持URL打開類型

<allow-intent href="https:///" />
<allow-intent href="tel:" />
<allow-intent href="sms:
" />
<allow-intent href="mailto:" />
<allow-intent href="geo:
" />
<allow-intent href="itms:*" />

2、index.html寫代碼
由cordova提供的各種事件由應(yīng)用程序使用耻姥。應(yīng)用程序代碼可以添加這些事件的偵聽器Events销钝。

Snip20170907_22.png

詳細(xì)信息可以參考cordova的Events介紹
本文例子采用deviceready(設(shè)備準(zhǔn)備好為例子)

在index.html中增加代碼

  <!DOCTYPE html>
<html>
    <head>
    <title>Device Ready Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
   <!--  增加監(jiān)聽者 -->
   function onLoad(){
       document.addEventListener("deviceready", didiDeviceReady, false);  
   }
   <!--  監(jiān)聽到后調(diào)用方法 -->
    function didiDeviceReady() {
        // Now safe to use device APIs
        alert("Device already go");
    }
    
    function didClickPause(){
      alert("點(diǎn)我有驚喜");
    }
    </script>

</head>
<body onLoad="onLoad()">
    <!--  防止中文亂碼問題 -->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <div class="app">
        <h3 align="center">啟動(dòng)cordova成功</h1>
        <h2 align="center" >設(shè)備準(zhǔn)備好</h>
        <h1 align="center">  hello world 搞起走 </h1>
        <button type="button" align="center" onclick="didClickPause()" >點(diǎn)我有驚喜</button>
    </div>
    
  </body> </html>

運(yùn)行方式就是我們xocde的正常運(yùn)行方式

cordova-helloWord.gif

更多資料:cordova開發(fā)資料

準(zhǔn)備下班.jpg

最后贈(zèng)言###

如果覺得文章對(duì)您有幫助,不要忘記star哦!??琐簇,star 是對(duì)程序猿最大的鼓勵(lì)蒸健!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市婉商,隨后出現(xiàn)的幾起案子似忧,更是在濱河造成了極大的恐慌,老刑警劉巖丈秩,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盯捌,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蘑秽,警方通過(guò)查閱死者的電腦和手機(jī)饺著,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)肠牲,“玉大人幼衰,你說(shuō)我怎么就攤上這事」〔模” “怎么了塑顺?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我严拒,道長(zhǎng)扬绪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任裤唠,我火速辦了婚禮挤牛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘种蘸。我一直安慰自己墓赴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布航瞭。 她就那樣靜靜地躺著诫硕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪刊侯。 梳的紋絲不亂的頭發(fā)上章办,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音滨彻,去河邊找鬼藕届。 笑死,一個(gè)胖子當(dāng)著我的面吹牛亭饵,可吹牛的內(nèi)容都是我干的休偶。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼辜羊,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼踏兜!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起八秃,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤庇麦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后喜德,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體山橄,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年舍悯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了航棱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡萌衬,死狀恐怖饮醇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秕豫,我是刑警寧澤朴艰,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布观蓄,位于F島的核電站,受9級(jí)特大地震影響祠墅,放射性物質(zhì)發(fā)生泄漏侮穿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一毁嗦、第九天 我趴在偏房一處隱蔽的房頂上張望亲茅。 院中可真熱鬧,春花似錦狗准、人聲如沸克锣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)袭祟。三九已至,卻和暖如春捞附,著一層夾襖步出監(jiān)牢的瞬間榕酒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工故俐, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人紊婉。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓药版,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親喻犁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子槽片,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

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