在看这篇文章之前,请你保证你的电脑上面已经安装的cordova,本文主要讲解iOS的入门cordova,使用cordova怎么创建iOS项目。你需要的条件有:
1、mac 上安装cordova
2、mac 安装xcode (一般做iOS开发的知道,都是必备的)
如果你没有安装cordova,请移步Mac下最详细的cordova安装流程问题总结,如果你已经看完并安装完成,请各位看官往下看。
一、基本使用
1、打开终端,cd 到你希望保存的项目的路径下面,创建项目
cordova create testApp org.apache.cordova.testApp testApp
这将为您的cordova应用程序创建所需的目录结构。默认情况下,cordova create脚本生成一个骨架的基于Web的应用程序,其主页是项目的www/index.html文件。
参数解析:
testApp: 将为你的项目生成一个testApp目录
org.apache.cordova.testApp : 你创建项目的AppId,就是项目的bundleID
testApp : 创建的应用程序的项目名
2、cd 到刚才项目创建的目录,之后所有后续命令需要在项目目录或任何子目录中运行
cd testApp (路径)
3、增加你想增加平台,我们这里采用ios,并且默认会配置、保存config.xml和package.json
cordova platform add ios
cordova platform add android (小编没有用)
增加好之后,你也可以检查你的平台
cordova platform ls
如果你想一下构建支持所有平台的cordova,可以使用命令
cordova build
您可以选择将每个构建的范围限制在特定的平台上 - 'ios'在这种情况下:
cordova build android
更多命令可以参考cordova命令文档
二、扩展使用-增加插件
插件通常托管在npm,注意不是所有的插件都是全部平台都可以使用,所以使用插件的时候注意平台是否支持
搜索插件
cordova plugin search camera
增加插件
cordova plugin add cordova-plugin-camera
查看插件
cordova plugin ls
更多插件命令请参考cordova插件命令大全
同时插件也可以使用目录或git repo添加,也支持自定义插件,相关文档请参考自定义插件开发指南
三、项目结构讲解
按照上面的步骤,你应该创建好一个工程项目
打开项目,首先移除两个重复文件
1、Config.xml是一个全局配置文件,用于控制cordova应用程序行为。
根元素<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 用程序的反向域标识符
version 版本
ios 还应该增加ios-CFBundleVersion="1.0.0"
最重要-最重要-最重要的是找到设置启动页
<widget ...>
<content src="index.html"></content>
</widget>
默认值为index.html,它通常显示在项目的顶级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提供的各种事件由应用程序使用。应用程序代码可以添加这些事件的侦听器Events。
详细信息可以参考cordova的Events介绍
本文例子采用deviceready(设备准备好为例子)
在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">
<!-- 增加监听者 -->
function onLoad(){
document.addEventListener("deviceready", didiDeviceReady, false);
}
<!-- 监听到后调用方法 -->
function didiDeviceReady() {
// Now safe to use device APIs
alert("Device already go");
}
function didClickPause(){
alert("点我有惊喜");
}
</script>
</head>
<body onLoad="onLoad()">
<!-- 防止中文乱码问题 -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<div class="app">
<h3 align="center">启动cordova成功</h1>
<h2 align="center" >设备准备好</h>
<h1 align="center"> hello world 搞起走 </h1>
<button type="button" align="center" onclick="didClickPause()" >点我有惊喜</button>
</div>
</body> </html>
运行方式就是我们xocde的正常运行方式
更多资料:cordova开发资料
最后赠言###
如果觉得文章对您有帮助,不要忘记star哦!😝,star 是对程序猿最大的鼓励!