使用Cordova进行iOS开发 (环境配置及基本用法)

最新推荐文章于 2023-03-07 16:36:36 发布

脱缰的呆马

最新推荐文章于 2023-03-07 16:36:36 发布

阅读量3.1k

点赞数

分类专栏： iOS

iOS 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

安装Cordova CLI1. cordova的安装:

1.1 安装cordova需要先安装node.js。
1.2 如果你没有安装git client，需要下载并安装一个git客户端。
1.3 使用node.js的依赖包管理工具npm来进行cordova安装。
打开终端输入如下命令：
```
sudo npm install -g cordova
```
显示上面的内容说明cordova环境安装成功了

2.创建cordova的项目

2.1 新建一个cordova的项目
打开终端输入如下命令，该命令可能需要一些时间来完成：
```
cordova create hello com.example.hello HelloWorld [--template templatePath]
```

Parameter	Description	Notes
hello`参数是必填`	将为你的项目生成一个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 添加平台
所有后续命令需要在项目的目录中运行，其范围内或任何子目录：
```
cd hello
```
在构建项目之前,您需要指定一组目标平台。你能够运行这些命令取决于您的机器是否支持每一个SDK,和你是否已经安装SDK。从Mac运行这些：
```
cordova platform add ios
```
显示上面的内容就完成一个项目的创建操作
迭代项目在hello目录中运行下面的命令来构建项目：
```
cordova build
```
或指定生成iOS平台的代码项目:
```
cordova platform add ios
```

3. cordova项目开发

3.1 cordova默认使用的 index.html 文件说明
打开路径中Xcode工程：
```
/Users/iwevon/Cordova/hello/platforms/ios/HelloWorld.xcodeproj
```
为了避免混淆，移除(Remove References) 两个文件/文件夹的引用

上图文件是cordova默认使用的 indecx.html 文件

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
```
  显示上面的内容说明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>
```
  运行结果：
  
  Safari+Xcode+Simulator运行结果
  以上如果有错，试试下边的
  
  1、安装nodejs(自动包含npm)
  
  2、在命令行中通过npm语句npm install -g cordova 安装cordova(如果提示网络连接失败，需要设置网络代理，搭理网址：npm config --global set registry http://registry.cnpmjs.org)
  
  3、在命令行里通过安装成功的cordova,创建一个混合项目，创建语句：
  
  cordova create CordovaDemo com.first.helloworld HelloWorld
  
  CordovaDemo:项目文件夹名
  
  com.first.helloworld:项目包名
  
  Helloworld:项目名
  
  4、通过cd CordovaDemo 命令进入到文件夹内，通过以下命令cordova platform add android
  
  为你的创建的项目添加安卓运行平台(ios平台添加也一样）
  
  5、运行平台添加成功以后，还需要添加调用手机底层控件
  
  cordova plugin add cordova-plugin-device
  
  cordova-plugin-device 基本设备信息
  cordova-plugin-network-information 网络连接信息
  cordova-plugin-battery-status 电池状态信息
  cordova-plugin-device-motion 加速度信息
  cordova-plugin-device-orientation 指南针信息
  cordova-plugin-geolocation 定位数据
  cordova-plugin-camera 相机
  cordova-plugin-media-capture 媒体捕获
  cordova-plugin-media 媒体播放器
  cordova-plugin-file 访问文件
  cordova-plugin-file-transfer 文件传递
  cordova-plugin-dialogs 消息提示对话框
  cordova-plugin-vibration 振动提醒
  cordova-plugin-contacts 联系人
  cordova-plugin-globalization 全球化
  cordova-plugin-splashscreen 闪屏(启动画面)
  cordova-plugin-inappbrower 浏览器
  cordova-plugin-console 控制台
  cordova-plugin-statusbar 状态栏
  
  添加插件，有选择性的安装，没必要都安装...
  
  6、项目创建成功，用开发工具导入你创建的项目。如果用的是Eclipse开发工具，导入项目以后需要注意调整你的sdk版本为5.1以上，并且，把你同时导入的jar包和项目关联起来
  
  7、此时项目可以正常运行。项目结构中，需要注意的是assets文件夹，这个文件夹包含了以后项目开发需要维护、修改的全部文件。
  
  8、在assets中的index.html页面是项目启动以后的首页。项目开发要从他开始。
  
  9、想要实现OnsenUI和AngularJs协作的混合项目，还需要进行以下的简单配置。因为项目是单页面项目（SPA），所以项目运行期间用到的CSS和js文件，需要全部声明在index.html页面。
  
  （1）引用必须要引入的两个css文件：
  
    onsenui.css （组件）和 onsen-css-components-blue-basic-theme.css(主题)
  
  (2)引入几个必须引入的js文件，
  
     angular.js
  
  onsenui.js
  
  cordova_plugins.js
  
  cordova.js
  
  和自定义的app_model.js,
  
  注意：cordova.js和cordova_plugins.js只用在调用手机底层功能的时候才有用。所以在浏览器运行项目的时候，需要屏蔽这两个js文件，另外，app_modal.js里的内容只写一句即可：
  
     var app = angular.module('app',['onsen']);
  
  10、在index.html页面的html标签里引用在app_modal里声明的模块。
  
      <html lang="en" ng-app="app" ng-csp>
  
  11、这时候，创建的项目可以正确的运行onsenui前端框架提供的任何组件。但是需要注意的是：onsenui里的组件需要放在<ons-page>标签里面，而且不要直接在<ons-page>标签内书写纯文本信息。
  
  12、在index.html页面中，需要注意的是，<ons-page>标签推荐写在<ons-navigator>标签里，以方便页面的跳转。
  
  13、然后就可以在index的<ons-page>标签内对onsenui提供的各种组件进行显示效果的测试了。
  
  14、等熟悉了onsenui提供的各种组件的显示效果之后，就可以通过angularjs的配合实现数据的填充。
```
 
```

脱缰的呆马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Cordova进行iOS开发 (环境配置及基本用法)

安装Cordova CLI1. cordova的安装:1.1 安装cordova需要先安装node.js。1.2 如果你没有安装git client，需要下载并安装一个git客户端。1.3 使用node.js的依赖包管理工具npm来进行cordova安装。打开终端输入如下命令：sudo npm install -g cordova
复制链接

扫一扫