使用Cordova进行iOS开发 (环境配置及基本用法)
来源:互联网 发布:mac os shimo 破解版 编辑:程序博客网 时间:2024/05/16 14:56
安装Cordova CLI1. cordova的安装:
- 1.1 安装cordova需要先安装node.js。
- 1.2 如果你没有安装git client,需要下载并安装一个git客户端。
- 1.3 使用node.js的依赖包管理工具npm来进行cordova安装。
打开终端输入如下命令:sudo npm install -g cordova
2.创建cordova的项目
- 2.1 新建一个cordova的项目
打开终端输入如下命令,该命令可能需要一些时间来完成:cordova create hello com.example.hello HelloWorld [--template templatePath]
参数是必填
将为你的项目生成一个hello目录www子目录是应用程序的主页,以及各种资源(css,js,img),遵循共同的web开发文件命名规范。这些资源将存储在设备上的本地文件系统,而不是远程服务。config.xml文件包含重要的需要生成和分发应用程序的元数据。com.example.hello 参数可选
App ID如果不填写这个参数,第三个参数就要省略,默认值是 io.cordova.hellocordova,但建议你填写一个适当的值。HelloWorld参数可选
应用程序的项目名这个参数的默认值是 HelloCordova,但建议你填写一个适当的值。[--template templatePath] 参数可选,一般不填写
使用模板创建一个项目。所有文件和文件夹的模板将被复制到新的项目。平台和插件可能包含在一个模板。这个参数是可选的。模板的路径可以是一个本地路径,NPM模块或Git URL。- 2.2 添加平台
所有后续命令需要在项目的目录中运行,其范围内或任何子目录:
在构建项目之前,您需要指定一组目标平台。你能够运行这些命令取决于您的机器是否支持每一个SDK,和你是否已经安装SDK。从Mac运行这些:cd hello
cordova platform add ios
- 迭代项目 在hello目录中运行下面的命令来构建项目:
或 指定生成iOS平台的代码项目:cordova build
cordova platform add ios
3. cordova项目开发
3.1 cordova默认使用的 index.html 文件说明
打开路径中Xcode工程:/Users/iwevon/Cordova/hello/platforms/ios/HelloWorld.xcodeproj
3.2 Events
Cordova生命周期事件
deviceready 当Cordova加载完成会触发
将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">// Wait for device API libraries to load//function onLoad() { document.addEventListener("deviceready", onDeviceReady, false);}// device APIs are available//function onDeviceReady() { // Now safe to use device APIs alert(“onDeviceReady");}</script></head><body onload="onLoad()"></body></html>
运行结果:
pause 当应用程序进入到后台会触发
resumes 应用程序从后台进入到前台会触发
将index.html中的文本替换成如下文本:<!DOCTYPE html><html><head><title>Pause Example</title><script type="text/javascript" charset="utf-8" src="cordova.js"></script><script type="text/javascript" charset="utf-8">// Wait for device API libraries to load//function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("resume", onResume, false);}// device APIs are available//function onDeviceReady() { document.addEventListener("pause", onPause, false);}// Handle the pause event//function onPause() { console.log("onPause");}// Handle the resume event//function onResume() { console.log("onResume");}</script></head><body onload="onLoad()"></body></html>
打开Safari,使用开发调试查看运行结果:
3.3 Plugin APIs
- cordova-plugin-console
Cordova Console Plugin
- 1> 安装
cordova plugin add cordova-plugin-console
- 2>示例
将index.html中的文本替换成如下文本:
运行结果:<!DOCTYPE html><html><head> <title>Hello World</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); function consoleLog(){ console.log("console.log works well"); } function consoleError(){ console.error("console.error works well"); } function consoleException(){ console.exception("console.exception works well"); } function consoleWarn(){ console.warn("console.warn works well"); } function consoleInfo(){ console.info("console.info works well"); } function consoleDebug(){ console.debug("console.debug works well");} function consoleAssert(){ console.assert("console.assert works well");} function consoleDir(){ console.dir("console.dir works well"); } function consoleDirxml(){ console.dirxml("console.dirxml works well"); } function consoleTime(){ console.time("console.time works well"); }function consoleTimeEnd(){ console.timeEnd("console.timeEnd works well"); } function consoleTable(){ console.table("console.table works well");} </script> <style type="text/css"> button { width: 200px;height:26px;font-size: 20px;padding: 1px;margin-left: 100px; } </style></head><body> <div ><br/><br/> <br/><button onclick="consoleLog()">consoleLog</button><br/> <br/><button onclick="consoleError()">consoleError</button><br/> <br/><button onclick="consoleException()">consoleException</button><br/> <br/><button onclick="consoleWarn()">consoleWarn</button><br/> <br/><button onclick="consoleInfo()">consoleInfo</button><br/> <br/> <button onclick="consoleDebug()">consoleDebug</button><br/> <br/><button onclick="consoleAssert()">consoleAssert</button><br/> <br/> <button onclick="consoleDir()">consoleDir</button><br/> <br/> <button onclick="consoleDirxml()">consoleDirxml</button><br/> <br/><button onclick="consoleTime()">consoleTime</button><br/> <br/><button onclick="consoleTimeEnd()">consoleTimeEnd</button><br/> <br/><button onclick="consoleTable()">consoleTable</button><br/> </div> </div></body></html>
- 1> 安装
0 0
- 使用Cordova进行iOS开发 (环境配置及基本用法)
- cordova开发环境配置
- Cordova 10 VS2013配置cordova开发环境
- 使用Cordova搭建Andoid和iOS开发环境
- Cordova 环境搭建及使用
- Apache Cordova for ios环境配置
- Cordova的环境配置及创建项目
- Cordova配置(混合开发环境)
- 使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)
- picasso-基本使用及环境配置
- 使用cordova+Ionic+AngularJs进行Hybird App开发的环境搭建手册
- Cordova 环境搭建及使用(上篇)
- Cordova 环境搭建及使用(下篇)
- NDK开发环境配置及HelloJni基本开发步骤
- 安装配置PhoneGap开发环境(二)——使用Cordova代替PhoneGap创建项目
- 基本开发环境配置
- Android应用开发环境配置-使用eclipse进行开发
- Cordova 环境配置
- STM32 Bootloader与启动分析
- 将博客搬至CSDN
- 求取两个整数的最大公约数算法
- JavaWeb前端知识-HTML
- 如何在Linux下快速安装MapTiler
- 使用Cordova进行iOS开发 (环境配置及基本用法)
- 表达式求值
- 文件上传(图片)
- Netty系列之Netty百万级推送服务设计要点
- CURL大全
- 求取一组整数的最小公倍数算法
- ACM输入输出技术总结
- centos 安装 gridengine
- VMware虚拟机克隆linux系统设置网络