基于Cordova平台实现JS与OC互相调使用——总结

  • 时间:2018-06-28 22:31 作者:每周IT 来源:每周IT 阅读:236
  • 扫一扫,手机访问
摘要:Cordova相关历史大家能百度一下哦,本文主要实现原生工程中嵌套Cordova,让JS与OC互相调使用,更加方便,同时更好的html5的开发。1.新建工程,增加Cordova 关键类我这里使用Xcode 8 新建了一个工程,叫 JS_OC_Cordova,而后将Cordova关键类增加进工程。 有

Cordova相关历史大家能百度一下哦,本文主要实现原生工程中嵌套Cordova,让JS与OC互相调使用,更加方便,同时更好的html5的开发。

基于Cordova平台实现JS与OC互相调使用——总结

1.新建工程,增加Cordova 关键类

我这里使用Xcode 8 新建了一个工程,叫 JS_OC_Cordova,而后将Cordova关键类增加进工程。

有哪些关键类呢?

这里增加config.xml 、Private 和 Public 两个文件夹里的所有文件。工程目录结构如下:

基于Cordova平台实现JS与OC互相调使用——总结

而后运行工程, ,你会发现报了一堆的错误:

基于Cordova平台实现JS与OC互相调使用——总结

为什么有会这么多报错呢?

起因是Cordova 部分类中,并没有#import ,但是它们却用了这个库里的NSArray、NSString 等类型。

为什么使用在终端里使用命令行创立的工程就正常呢?

那是由于使用命令行创立的工程里已经包含了pch 文件,并且已经import 了 Foundation框架。截图为证:

基于Cordova平台实现JS与OC互相调使用——总结

其实这里有两种处理方案:1、在报错的类里增加上 #import ;2、增加一个pch 文件,在pch文件里加上 #import

我选择第二种方案:

基于Cordova平台实现JS与OC互相调使用——总结

再次编译、运行,仍然报错。 What the fuck !!!

不使用急,这里报错是由于Cordova的类引使用错误,在命令行创立的工程里Cordova 是以子工程的形式加入到目标工程中,两个工程的命名空间不同,所以import 是使用 相似这样的方式#import ,但是我们现在是直接在目标工程里增加Cordova,所以要把#import 改为 #import "CDV.h"。其余的文件引使用报错同理。

当然,假如想偷懒,也能从后面我给的示例工程里拷贝,我修改过的Cordova库。

2.设置网页控制器,增加网页

首先将 ViewController 的父类改为 CDVViewController。如下图所示:

基于Cordova平台实现JS与OC互相调使用——总结

这里分两种情况,加载本地HTML 和远程HTML 地址。

** 加载本地HTML **

加载本地HTML,为了方便起见,首先新建一个叫www的文件夹,而后在文件夹里放入要加载的HTML和cordova.js。

这里把www增加进工程时,需要注意勾选的是create foler references,创立的是蓝色文件夹。

基于Cordova平台实现JS与OC互相调使用——总结

最终的目录结构如下:

基于Cordova平台实现JS与OC互相调使用——总结

** 加载远程HTML **

项目里一般都是这种情况,接口返回H5地址,而后使用网页加载H5地址。

只要要设置下 self.startPage就好了。

这里有几个需要注意的地方:

  1. self.startPage的赋值,必需在[super viewDidLoad]之前,否则self.startPage 会被默认赋值为index.html。
  2. 需要在config.xml中修改一下配置,否则加载远程H5时,会自动打开浏览器加载。
  3. 需要增加的配置是:
pre class="brush:js;toolbar:false">
  1. 远程H5中也要引使用cordova.js文件。
  2. 在 info.plist 中增加 App Transport Security Setting的设置。

运行效果图:

基于Cordova平台实现JS与OC互相调使用——总结

2、Native 调使用 JS 方法

这个非常简单,假如是在控制器中,那么只要要像如下这样既可:

pre class="brush:js;toolbar:false">- (void)testClick{ // 方式一: NSString *jsStr = @"asyncAlert('哈哈啊哈')"; [self.commandDelegate evalJs:jsStr]; }

这里的evalJs内部调使用的其实是 UIWebView 的 stringByEvaluatingJavaScriptFromString 方法。

3、JS 调使用Native 功可以

终于到重点了,JS想要调使用原生代码,如何操作呢?我使用本地HTML 来演示。

首先,HTML中需要加载 cordova.js,需要注意该js 文件的路径,由于我的cordova.js与HTML放在同一个文件夹,所以src 是这样写:

pre class="brush:js;toolbar:false">

而后,在HTML中创立几个按钮,以及实现按钮的点击事件,示例代码如下:

pre class="brush:js;toolbar:false">

点击事件对应的关键的JS代码示例:

pre class="brush:js;toolbar:false">function scanClick() { cordova.exec(null,null,"HaleyPlugin","scan",[]);}function shareClick() { cordova.exec(null,null,"HaleyPlugin","share",['测试分享的标题','测试分享的内容','http://m.rblcmall.com/share/openShare.htm?share_uuid=shdfxdfdsfsdfs&share_url=http://m.rblcmall.com/store_index_32787.htm&imagePath=http://c.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec78e256df60d0f703908fc12e.jpg']);}function locationClick() { cordova.exec(setLocation,locationError,"HaleyPlugin","location",[]);}function locationError(error) { asyncAlert(error); document.getElementById("returnValue").value = error;}function setLocation(location) { asyncAlert(location); document.getElementById("returnValue").value = location;}

JS 要调使用原生,执行的是:

pre class="brush:js;toolbar:false">// successCallback : 成功的回调方法// failCallback : 失败的回调方法// server : 所要请求的服务名字,就是插件类的名字// action : 所要请求的服务具体操作,其实就是Native 的方法名,字符串。// actionArgs : 请求操作所带的参数,这是个数组。cordova.exec(successCallback, failCallback, service, action, actionArgs);
基于Cordova平台实现JS与OC互相调使用——总结

简书著作权归作者所有,任何形式的转载都请联络作者取得受权并注明出处。

  • 全部评论(0)
最新发布的资讯信息
【网页前端|】从BAT大数据工程师那里总结的大数据学习方法(2019-05-23 11:46)
【系统环境|Linux】值得了解的十大数据发展趋势(2019-05-22 11:33)
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
手机二维码手机访问领取大礼包
返回顶部