之前已经实现了基本的H5和原生(iOS和Android的)互相调用了:
【已解决】ReactJS的JS的H5中如何回调原生的iOS和Android的app
但是iOS是使用的旧的webview
性能比较低,页面点击起来不流畅,有点卡顿的感觉。而且各种web控件感觉兼容性也有问题
比如点击保存后,页面时不时的没有消失掉
现在希望换用性能比较好的WKWebView
参考:
WebViewJavascriptBridge详细使用 – 姜晓延 – 博客园
去写ReactJS的JS代码
去尝试写代码:
export default class Header extends Component { 。。。 constructor(props) { this.setupWebViewJavascriptBridge = this.setupWebViewJavascriptBridge.bind(this); } componentWillMount() { this.setupWebViewJavascriptBridge( (bridge) => { alert(“setupWebViewJavascriptBridge”); bridge.registerHandler(‘scanDeviceCodeCallbackiOS’, (data, responseCallback) => { alert(‘iOS called scanDeviceCodeCallbackiOS with’, data); let responseData = { ‘Javascript Says’:’Right back atcha!’ }; alert(‘JS responding with’, responseData); responseCallback(responseData); }); bridge.callHandler(‘scanDeviceCodeiOS’, {‘paramKey’: ‘paramValue’}, (response) => { alert(‘JS got response’, response); }); }); } setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; let WVJBIframe = document.createElement(‘iframe’); WVJBIframe.style.display = ‘none’; WVJBIframe.src = ‘https://__bridge_loaded__’; // WVJBIframe.src = ‘wvjbscheme://__BRIDGE_LOADED__’; document.documentElement.appendChild(WVJBIframe); setTimeout(() => { document.documentElement.removeChild(WVJBIframe);}, 0); } } |
结果提示:
[eslint] ‘WebViewJavascriptBridge’ is not defined. (no-undef)
搜:
WebViewJavascriptBridge is not defined
【求助】JS问题Uncaught ReferenceError:XXXX is not defined – CNode技术社区
继续参考:
WebViewJavascriptBridge js
看到了:
WebViewJavascriptBridge 原理解析 – iOS – 掘金
说是:
function setupWebViewJavascriptBridge(callback) { //第一次调用这个方法的时候,为false if (window.WebViewJavascriptBridge) { var result = callback(WebViewJavascriptBridge); return result; } //第一次调用的时候,也是false if (window.WVJBCallbacks) { var result = window.WVJBCallbacks.push(callback); return result; } //把callback对象赋值给对象。 window.WVJBCallbacks = [callback]; //这段代码的意思就是执行加载WebViewJavascriptBridge_JS.js中代码的作用 var WVJBIframe = document.createElement(‘iframe’); WVJBIframe.style.display = ‘none’; WVJBIframe.src = ‘https://__bridge_loaded__’; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0); } |
所以感觉是:
此处setupWebViewJavascriptBridge的代码就是应该写成:
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } |
而不是自己猜测的:
if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge); } |
所以还是改回:
Android 和 IOS 使用 WebViewJavascriptBridge 进行交互方法 – 简书
现在写代码去调试,折腾了半天,貌似是:
(1)WKWebView中,JS中的alert不起效果?
【已解决】iOS的APP中WKWebView中alert弹框不显示
【总结】
最终是基本跑通了互相调用
ReactJS中H5的JS代码 和 iOS的代码,详见:
【已解决】ReactJS的JS的H5中如何回调原生的iOS和Android的app
和:
【整理Book】移动端APP开发总结
转载请注明:在路上 » 【记录】ReactJS的H5利用WebViewJavascriptBridge和iOS的app互相调用