oc 与h5交互实例

H5调用oc中的方法

1)新建三个文件分别为

File.html 主体内容,包含各个按钮及其方法的实现。

File.js 可以将方法写在这里并调用,然而为了大家方便查看方法,我没有使用这个文件,我把内容都放在File.html中了。

File.css 设置html的样式等。

2)新建一个继承于NSObject的CustomJSObject对象,导入<JavaScriptCore/JavaScriptCore.h>头文件,并定义一个CustomJSProtocol,这个协议同时遵循JSExport协议。

JSExport:协议作用,将oc 中的 类,实例方法,类方法,属性 导入到java script

3)进行Html的编码。


在CustomJSProtocol中新添加方法helloWQL。然后在CustomJSObject中实现helloWQL方法,并写好相关回调




在ViewController中编码,加载本地的Html。



以上例子中的context[@"native"],因为h5文件中使用的native

总结:导入JavaScriptCore.h文件,在oc文件中定义一个遵守JSExport协议的协议CustomJSProtocol,协议中申明和H5中名字一致的方法,遵守CustomJSProtocol的对象实现该方法。

在控制器中wkwebview加载完成方法注入H5点击的方法addCustomAction,在addCustomAction方法中,获取JSContext对象,

然后将实现CustomJSProtocol协议的对象赋给JSContext对象

h5传值给oc

大体步骤和上面步骤一致,,只是在传入两个值时,第二个参数需要大写



oc直接调取H5中的方法


关键点是将H5中的方法名指定给JSContext对象,然后和上面例子一样将遵从了JSExport协议的协议的对象指定给JSContext对象,实现注入

联合使用

点击h5按钮,oc再传值给H5

H5文件中关键代码:

    


oc中




github:https://github.com/qicaitiankong/PatientApp

相关文件名:H5TestViewController

感谢参考作者:https://www.jianshu.com/p/b0c847dcea9c

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容