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

安装Cordova CLI


dsadaskjhfkjsadhfkljsadhsdlkj
node.js
node.js

![](


{96D32B4A-B807-48DD-82B8-B3811D03552E}.png
1. cordova的安装:
  • 1.1 安装cordova需要先安装node.js
  • 1.2 如果你没有安装git client,需要下载并安装一个git客户端。
  • 1.3 使用node.js的依赖包管理工具npm来进行cordova安装。
    打开终端输入如下命令:
 sudo npm install -g cordova
*显示上面的内容说明cordova环境安装成功了*

<br >

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

<br >

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>

运行结果:

<br >

  • 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,使用开发调试查看运行结果:


<br >

3.3 Plugin APIs

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运行结果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容