WebViewJavascriptBridge

iOS 端代码 初始化 1. 首先用 pod 进第三方库 WebViewJavascriptBridge 2. 在初始化 webView 或者wkWebView的页面初始化 WebViewJavascriptBridge //1.打开log日志 WebViewJavascriptBridge.enableLogging() // 2.给webview建立JS与OjbC的沟通桥梁 self.bridge = WebViewJavascriptBridge.init(self.wkWebView) // 设置代理，如果不需要实现，可以不设置 self.bridge.setWebViewDelegate(self) 3. 如果要监听 js 调用 iOS 方法 其中 getUserIdFromObjC 和 getBlogNameFromSwift 都是和前端协商好的协议名称 ，前端 用 这个名称来调用 iOS ， iOS 监听这个协议名称，从而实现 js一对一调用iOS方法 在调用的时候还可以给前端反馈数据 //这里是 前端调用iOS， iOS监听 协议名"getBlogNameFromSwift" 获取前端传回的数据，并且可以给前端反馈数据 self.bridge.registerHandler("getBlogNameFromSwift") { (data,

首先获取当前环境是ios还是Android var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端 对ios和Android 不同环境下做处理 modal.setupWebViewJavascriptBridge = function (callback) { if (isAndroid) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady', function (event) { if (window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge); callback

需求: 在原生App里打开webview, 嵌入H5. 在H5中点击某个元素, 触发与native app交互, 又跳回到app中. 同理, 在app中完成某项操作后, 获得某个参数, 根据这个状态刷新页面. 框架: Vue. JavaScript原生的写法已经调通了, 并且与native端的已经联调通过. 所以这里是把它们迁移到Vue框架的写法. 这里要区分iOS系统和Android系统. iOS系统 在这里与iOS开发的同事协商后, 决定使用 WebViewJavascriptBridge 来开发. 前端不需要放入任何js插件. 只需要准备一下这段内容. bridge.js function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge) } if (window.WVJBCallbacks) { returnwindow.WVJBCallbacks.push(callback) } window.WVJBCallbacks = [callback] let WVJBIframe = document.createElement('iframe') WVJBIframe

目前自己组建的一个团队正在写一份面试图谱，将会在七月中旬开源。内容十分丰富，第一版会开源前端方面知识和程序员必备知识，后期会逐步写入后端方面知识。因为工程所涉及内容太多（目前已经写了一个半月），并且还需翻译成英文，所以所需时间较长。有兴趣的同学可以 Follow 我的 Github 得到最快的更新消息。 JS 相关 深入理解javascript原型和闭包 Event Loop 必知必会（六道题） 网络现状：性能提升指南 【网络协议】Web协议未来优化指南 不要混淆nodejs和浏览器中的event loop JavaScript ES7 Function Bind Syntax 前端回忆录 promise规范实现 Babel 手册 JavaScript练习网站收集 WebViewJavascriptBridge原理解析 一道让我懵逼的Promise执行顺序的题目 字面量创建对象和 new Object 创建对象性能差别 CSS 30 Seconds of CSS 怎么画一条0.5px的边 CSS 属性相关 CSS 自定义属性 — 基础篇 CSS 自定义属性 ：使用篇 CSS 自定义属性：API 化 React React源码解析(一):组件的实现与挂载 React源码解析(二):组件的类型与生命周期 React源码解析(三):详解事务与更新队列 React源码解析(四):事件系统

 随着H5功能愈发的强大，没进行过混合开发的小伙们都不好意思说自己能够独立进行 iOS 的app开发，在iOS7 操作系统 下，常用的native，js交互框架有easy-js,WebViewJavascriptBridge,以及结合javaScriptCore的框架。easy-js 很早的一个框架了，已经好几年没有人维护了，里面有很多隐藏很深的坑，新人如果没有用过的话，建议不要再用了。主要是js新建一个隐藏的iframe，通过拦截url的形式进行交互。WebViewJavascriptBridge是网上很火的一个交互库，使用的人较多，但是对于js基础较弱的小伙伴来说，底层不是太好理解。底层和easy-js一样都是通过创新一个隐藏的iframe通过截取url来进行交互。缺点这里就暂时不说了，用的不多，体会不够深刻。嘿嘿。javaScriptCore中JSExport进行交互，这种方式比较简单易懂，也是我个人比较推崇 的一种方式。如果app最低版本操作系统是iOS7的小伙伴，建议自己搜一下相关知识点哦。但是WKWebView不能够利用javaScriptCore交互，是不是很坑爹哦，呜呜。    由于自己去年的强力推动，今年我们的一系列app最低操作系统都是从iOS8开始，所以今天重点和大家分享一下我是如何实现WKWebView与js交互的。 js发送消息给native的代理方法是：