iOS开发-Cordova配置-Cordova交互-Cordova插件开发iOS项目接入Cordova-Cordova跳转外部网页

最新推荐文章于 2024-09-10 19:19:16 发布

置顶

伪随机的张三

最新推荐文章于 2024-09-10 19:19:16 发布

阅读量3.8k

点赞数 8

分类专栏： iOS技术点开发 iOS项目开发 HTML 张三的iOS开发技术归档文章标签： iOS的cordova开发 iOScordova插件开发 iOS平台cordova跳转外部链接 iOS配置cordova iOS开发cordova插件

本文链接：https://blog.csdn.net/werctzzz/article/details/83040866

版权

本文详细介绍了如何在iOS项目中配置和使用Cordova，包括Cordova的简介、配置步骤、项目接入、插件开发以及与网页的交互。通过实例展示了最简单的插件开发和交互返回，帮助开发者理解如何利用Cordova实现原生App与H5的高效交互。

摘要由CSDN通过智能技术生成

本期内容：

Cordova 详细配置
Cordova 接入iOS项目
Cordova 访问外部网页
Cordova iOS交互插件开发

Cordova简介

Cordova是一个开源的移动开发框架，它允许你使用WEB开发技术(HTML5、CSS3、JavaScript)进行跨平台开发，可以在每个平台的封装器中执行，并且依赖规范的API对设备进行高效的访问，比如传感器、数据、网络状态等等。Cordova可以让JS与原生代码互相通信的一个库，并且提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。这些API插件类都是基于JS与Objective-C可以互相通信的基础的。

Cordova支持iOS, Android等系统。

常见的使用场景：

网页中按钮事件交互、参数获取、方法调用
根据返回值修改原生界面的title、视图大小、添加视图、添加按钮、颜色等
使用webViewEngine的loadRequest方法跳转到Safari调起第二个App

前段时间在公司项目中使用了Cordova来配合EF同事做H5的交互，用起来比网络请求的交互方便很多，今天来简单的分享一下使用方式。

Cordova配置

首先说明一下，因为在做Cordova的时候会有坑，已经踩过，会在下文继续写出来。

1.下载Node.js并安装（点击红框位置的资源下载）
在这里插入图片描述

2.安装好Node.js之后，我们就能使用npm命令来安装Cordova了
打开终端，输入以下命令：

sudo npm install -g cordova

过程中会有提示你输入密码，和输入yes，直接按照过程通过就行。

3.安装完成之后，开始创建
3.1使用命令行工具创建一个空白的Cordova项目，cd到创建项目的目录，输入以下代码：

sudo cordova create YourApp

如果有不确定和不知道的情况，可以使用以下代码进行查看：

cordova help create

3.2切换到YourApp目录，并修改指定平台，代码如下：

cd YourApp
sudo cordova platform add ios

3.3让这个配置好的demo项目跑起来：

cordova run ios

当以上步骤都完成了，我们就使用Find打开YourApp的文件夹，查看内部文件，大概样子如下：
图片，文件夹结构

然后我们打开platforms文件夹里面ios文件夹，就会看到Cordova的demo项目，如图：
在这里插入图片描述

Cordova配置到这里就结束啦，如果有兴趣可以直接打开看一下文件结构以及方法调用等信息。

项目简单接入Cordova

现在我们开始在项目中接入Cordova，先打开Xcode创建一个名为test的空项目。然后看上面的图片可以看到demo文件夹中的文件，我们需要直接拿到我们的项目中，具体的文件如图：
在这里插入图片描述

当文件都拷贝到我们的项目（这里使用test项目）中，test项目文件目录如下：

打开工程从目录中移除文件夹cordova、CordovaLib（不是移除到废纸篓，只是删除目录），然后导入CordovaLib文件夹中的CordovaLib.xcodeproj，然后test项目结构就成了如图所示：
在这里插入图片描述

接下来我们继续配置，在target里面选中test，进入到Build Phases中，添加文件，如图：
在这里插入图片描述
并在这里创建一个新的项 New Run Script Phases，名为copy www directory，然后在配置项里面复制粘贴如下代码：

NODEJS_PATH=/usr/local/bin; NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find /usr/local/n/versions/node/* -maxdepth 0 -type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select --print-path`/usr/share/xcs/Node/bin; PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH && node cordova/lib/copy-www-build-step.js

配置如图：
在这里插入图片描述
在工程的 Build Settings中找到 Linking，包含项Other Linker Flags中添加-ObjC、-all_load，如图：

这样Cordova就接入好我们的test项目了，接下来就是让它跑起来，打开test项目的ViewController.h文件，导入CD头文件，把ViewController 继承自CDVViewController，如图所示：
在这里插入图片描述
然后就 cmd + r 运行项目，效果如图：

运行的程序看到的网页信息，是就工程中wwww文件目录下的index.html文件。如果公司是本地网页，那我们可以对index.html文件进行定制，以及拓展，直接成为webApp，不过一般需求，都是远端网页和原生交互&#x