混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?

在看这篇文章之前,请你保证你的电脑上面已经安装的cordova,本文主要讲解iOS的入门cordova,使用cordova怎么创建iOS项目。你需要的条件有:

1、mac 上安装cordova
2、mac 安装xcode (一般做iOS开发的知道,都是必备的)

如果你没有安装cordova,请移步Mac下最详细的cordova安装流程问题总结,如果你已经看完并安装完成,请各位看官往下看。

混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?_第1张图片
开始装逼了.jpg

一、基本使用

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的iOS入门篇-你还记得那个hello word吗?_第2张图片
Snip20170907_14.png

如果你想一下构建支持所有平台的cordova,可以使用命令

cordova build

您可以选择将每个构建的范围限制在特定的平台上 - 'ios'在这种情况下:

cordova build android

更多命令可以参考cordova命令文档

二、扩展使用-增加插件

插件通常托管在npm,注意不是所有的插件都是全部平台都可以使用,所以使用插件的时候注意平台是否支持

搜索插件

cordova plugin search camera

增加插件

cordova plugin add cordova-plugin-camera

查看插件

cordova plugin ls

混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?_第3张图片
Snip20170907_15.png

更多插件命令请参考cordova插件命令大全
同时插件也可以使用目录或git repo添加,也支持自定义插件,相关文档请参考自定义插件开发指南

三、项目结构讲解

按照上面的步骤,你应该创建好一个工程项目

混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?_第4张图片
Snip20170907_16.png

打开项目,首先移除两个重复文件

混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?_第5张图片
Snip20170907_18.png

1、Config.xml是一个全局配置文件,用于控制cordova应用程序行为。

根元素
ID 用程序的反向域标识符
version 版本
ios 还应该增加ios-CFBundleVersion="1.0.0"

最重要-最重要-最重要的是找到设置启动页




默认值为index.html,它通常显示在项目的顶级www目录中

支持URL打开类型






2、index.html写代码
由cordova提供的各种事件由应用程序使用。应用程序代码可以添加这些事件的侦听器Events。

混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?_第6张图片
Snip20170907_22.png

详细信息可以参考cordova的Events介绍
本文例子采用deviceready(设备准备好为例子)

在index.html中增加代码

  

    
    Device Ready Example
    
    



    
    

    

启动cordova成功

设备准备好

hello world 搞起走

运行方式就是我们xocde的正常运行方式

混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?_第7张图片
cordova-helloWord.gif

更多资料:cordova开发资料

混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?_第8张图片
准备下班.jpg

最后赠言###

如果觉得文章对您有帮助,不要忘记star哦!,star 是对程序猿最大的鼓励!

你可能感兴趣的:(混合开发-基于cordova的iOS入门篇-你还记得那个hello word吗?)