iOS WKWebView JS 与 原生交互小结

JavaScript010

iOS WKWebView JS 与 原生交互小结,第1张

目前iOS项目中 Webview 几乎都会用到,iOS 8 之前使用UIWebView,iOS 8 之后 Apple 就不推荐使用了,目前已经放弃了,如果项目中存在就无法上架了,需要转为WKWebView了,说实话 UIWebView 是有性能上的缺陷,内存优化不够友好等,但是不得不说这是老的iOS开发人员用的最熟练熟悉的了,用起来得心应手。非迫不得已还真不愿转到WKWebView。好吧,既然已经这样了,又何必苦苦单恋一支花呢?

看了网上教程很多,自己使用小结一下,简单易用,本文适用于菜鸟级开发,废话不说了,

最主要的方法:发送消息

注意:对象名和方法名jumpUserProtocol名字的一致,参数可以是常用的NSArray,NSDictionary等类型,先说下在这个Demo中其实没用上,用的方法名判断的。

注意: addScriptMessageHandler

name为方法名 ,和JS 中的保持一致,添加脚本,相当于给Webview添加一个监听,有这个功能来处理JS。

在WKScriptMessageHandler代理方法中处理回调,实现自己的逻辑。

上面就是JS调用OC原生实现。

这个其实很简单,就一个方法:

       鉴于最近项目中需要用到原生与JS交互,以前做过交互,但是没有总结一个demo,这次做的时候都忘记了,所以这次做了一个swift 和 OC 的demo。方便以后需要用交互功能的时候查看。

由于也没有难的点,所以这里就不做技术上的讲解了。直接上的地址:   iOS webKit (swift + oc) 原生交互Demo .  demo里包含了Swift 版和 OC版  ,由于UIWebView的性能相比webkit而言,相差甚远,在加上现在的项目基本都支持8.0以上的系统,所以基本可以放弃UIWebview了。

首先来进行一个最基本的定义,由于我们需要数据绑定功能,我们将从一开始就require ngModel:

.directive('timePicker',function(){ var today = new Date(new Date().toString())return { require: '?ngModel', link: function($scope,$element,$attrs,ngModel){ } }})

注意到我们需要涉及元素的实际实例,因此我们所有的代码基本上都位于linking函数中,我们在此完全不需要担心编译过程。我们同事也实例化了一个today变量来保存一个Date对象,以此在午夜十分更新。创建这个变量作为factory函数的一部分允许我们在多个实例之间分享一个today变量。注意,尽管这允许我们将内存的使用最小化,它也意味着如果我们的应用在半夜还依然再运行,我们的指令会开始提供不准确的结果。如果你打算将这个指令用于一个实时应用中,你最好创建另一个函数在第二天来临时更新这个值。现在,我们急需要看我们的controller函数:

link: function($scope.$element,$attrs,ngModel){ ngModel = ngModel || { "$setViewValue" : angular.noop }}

你以前可能也注意过这种模式。