三步快速集成WebViewJavascriptBridge

此文章适合快速开发不用明白原理的小白,大佬可一目十行自行跳过。

图片发自简书App


    首先,针对这个WebViewJavascriptBridge,之前做电商时候有接触过这个桥接文件。发扬着搬砖精神,不知其所以然。一直是用的高兴,大家开心就行。然而现在面临着开始做新项目的架构,不得不对其进行新一轮研究。话不多说,进入正题!

    普及一波菜鸟知识:WebViewJavascriptBridge:是一个Objective-C与JavaScript进行消息互通的三方库,主要负责OC环境的消息处理,并且把OC环境的消息发送给Javascript环境(PS,码原理累,可耻的拷贝了一波网络文字)。用砸门菜鸟的话来讲,就是美国大哥(OC)需要日本小弟(H5)的帮助,语言不通,这个Bridge就是一翻译器。还有疑问,请自行Google!

    写这个文章前找了不少资料,发现网络大神写的很High,很暴力,菜鸟根本不知所云。所以我简单粗暴归纳了三步接入流程:

    1、不管其它先显示H5。拉入WebViewJavascriptBridge文件后者pod导入——>初始化WebView,加载HTML。暴力贴图如下:

    2、实现H5调用Native

          初始化桥接文件——>添加你与H5小哥约定方法的实现——>传参给H5  图如下:这里只写了一个方法,多个方法请自行与H5小哥商定,原理一样,第三步亦如此。

      到这一步 总结下,H5已经能自由调用你的功能了。

3、实现native调用H5 ,这里其实就是几个方法的使用了 直接贴图:

        总结:WebViewJavascriptBridge接入其实非常容易,难的是对于它的原理理解。这里插入些废话:之前苹果老爸上线iOS9的时候,更新了WebViewJavascriptBridge桥接文件的格式,如果你与H5文件有任何字符串方面的约定,记得一定要规范、规范再规范,切记!

        三步集成,快速开发,这篇文章献给初识H5与Native交互的小伙伴。如有时间,希望大家多深入了解其原理。

        我们项目后期会用WKWebview(这应该对于以后是主流),但webview在使用步骤,集成方法其实大同小异,再一个就是他们的优劣势,不过这篇文章的重心不在这,遂不做过多介绍。

      创作不易,如有不足和错误之处,跪谢指正!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容