在看這篇文章之前,請(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)各位看官往下看灾前。
一、基本使用
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
如果你想一下構(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
更多插件命令請(qǐng)參考cordova插件命令大全
同時(shí)插件也可以使用目錄或git repo添加赫舒,也支持自定義插件,相關(guān)文檔請(qǐng)參考自定義插件開發(fā)指南
三闽瓢、項(xiàng)目結(jié)構(gòu)講解
按照上面的步驟,你應(yīng)該創(chuàng)建好一個(gè)工程項(xiàng)目
打開項(xiàng)目心赶,首先移除兩個(gè)重復(fù)文件
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销钝。
詳細(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開發(fā)資料
最后贈(zèng)言###
如果覺得文章對(duì)您有幫助,不要忘記star哦!??琐簇,star 是對(duì)程序猿最大的鼓勵(lì)蒸健!