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

  • 时间:2018-06-28 22:31 作者:每周IT 来源:每周IT 阅读:276
  • 扫一扫,手机访问
摘要: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)
最新发布的资讯信息
【系统环境|】什么是HTML5前端开发?HTML5前端要学哪些技术?(2019-07-21 11:47)
【系统环境|】2019年web前端开发技术框架有哪些(2019-07-20 12:06)
【系统环境|】什么是Web?零基础能不能学Web前端开发?(2019-07-19 07:04)
【网页前端|HTML】为什么学Web前端?选择Web前端理由(2019-07-17 20:28)
【网页前端|JS】Java面经-百度新入职老哥整理近半年学习经验,面试刷题路线!(2019-07-16 22:16)
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
手机二维码手机访问领取大礼包
返回顶部