iOS与JavaScript交互总结

最近跟同事联调一个iOS与JS交互想接口,折腾了整整一天,被迫重新研究了一下iOS与JS交互的原理,才发现原来项目中用的方案已经是很老很老的方式了,
效率不高,学习成本倒不低,但总归之前用了很久都没出现过什么问题,所以还是简单的总结下吧,然后就准备把这套东西淘汰掉用新的方式了。

OC调用JS

OC调用JS的方法很简单,就是UIWebView的stringByEvaluatingJavaScriptFromString方法,或者
WKWebView的- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;方法。

JS调用OC

其实现在项目中用的方案原理很简单,就是拦截请求,然后获取参数执行OC的方法;
不过为了跟安卓统一,并且方便复用,做了一层封装,给JS注入方法。
考虑到js有很多的全局函数,所以直接给js添加方法是不太合适的,可能会导致命名冲突,比较理想的做法是模块化,就是给js注入个对象,给这个对象再添加方法。

具体来说就是:
客户端这里有一个bridge类,里面有跟js端协商好的方法;
当网页加载结束后(webViewDidFinishLoading),iOS这端会执行一个方法,取到bridge里面所有方法列表(用runtime方法获取),
然后拼装成对应的js方法,用evaluateJavaScript方法注入给js,
js需要做的就是在需要的时候调用对应方法即可。
注意,js端除了判断方法存在不存在和调用方法,其他什么都没做,对象和所有的方法都是客户端注入的。
所以这个方案的关键是拼接注入给js的方法,
这里用了一个巧妙的方法,即利用js可以执行字符串中的JavaScript代码的eval()方法。
iOS端将bridge里获取的方法列表拼接成字符串,跟js代码的字符串拼在一起,拼成一段JavaScript字符串,
然后用webView的evaluateJavaScript方法调用就可以了
而注入给js的方法,就是让js去加载一个指定格式的自定义的URL,然后iOS端拦截这个请求,判断如果是自定义的URL,则去执行自己的方法,
这里一般是提前一定好一个scheme,然后根据后面的字段来区别不同的方法,
这个方案js传递参数给OC也是很简单,直接拼在URL后面即可。

理论上OC传递参数给js也是很简单的,只需js端定义一个带返回值的函数,然后iOS端要拼接这个函数的调用的字符串,然后直接用webView的evaluateJavaScript方法调用它就行了;
但是这跟上面“所有方法都是让js去load一个自定义格式的URL”的设计是冲突的,
因为上面的设计是,所有方法都是iOS端注入的,注入的方法内容是让js去load一个自定义URL,而这个传参的js方法不是去load一个自定义的URL,而是去取一个OC执行的js的结果,然后再进行其他操作;
如何解决这个问题呢?
我自己想到的方法是,在注入方法的时候,将注入的方法分为两类,一类就是去load自定义URL的方法;另外一种是专门传递参数给js的方法,也就是直接执行拼接好的js函数的方法。
我感觉这个方法是可行的,如果是一些简单的传值的方法的话,所不定还挺高效,但貌似有一个问题,执行结果貌似是同步传回给js的,如果OC端执行的方法比较耗时,那可能会卡住js端的进程。
前辈们在项目中使用了个更高级的办法,就是调用js方法时,如果需要返回值的话,传一个回调函数到OC。回调函数固定以一个json字符串作为输入参数。
为什么说这个方法高级呢,一是统一了注入给js的方法格式,而是统一了js注入方法的返回值的格式,三是统一了用异步回调。
需要注意的是:OC最终调用的方法只有一个参数,这个参数是一个js传过来的参数数组,具体参数数组里面都是什么内容,要在定义注入函数的时候就跟js端商量好!
(这里还有一个小细节,如果没有参数,OC端的selector是没有“:”的,如果有参数,一定记得要拼接“:”,否则OC端会识别成不同的函数名)

回调函数还有一个需要注意的地方,因为OC回调的是js函数,所以js端要在某个地方有保存这个函数,直接在调用注入方法时实现这个函数貌似是不行的,必须要建立其调用js注入函数与callback函数之间的对应关系才行,否则oc调用js回调是不知道对应的回调函数是谁的。。。。。这个比较绕
我又看了下js端同学些的代码,js端是在传入callback的同时,将callback函数保存到一个数组里面,然后传数组名称和callback的index给OC,所以OC端实际调用的是,拿到数组里保存的函数然后传参数调用。
也就是说,如果是需要OC传递参数给JS的方法,实际上不完全是OC这边注入的,还是需要JS端同学配合下的。
这样看来,跟直接让JS端同学实现几个专门的传参数方法代价也差不多。。。

这个方案是UIWebView和WKWebView都可以使用的。
新的方式也就是iOS7之后的推出的JavaScriptCore,这个下一篇再写。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,710评论 4 376
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,839评论 2 308
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,295评论 0 255
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,776评论 0 223
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,198评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,074评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,200评论 2 322
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,986评论 0 214
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,733评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,877评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,348评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,675评论 3 265
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,393评论 3 246
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,209评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,996评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,212评论 2 287
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 36,003评论 2 280

推荐阅读更多精彩内容