其他一丢丢webviewH5&iOS

通过JavascriptBridge处理iOS原生界面与webV

2016-03-16  本文已影响1606人  南城_

去年写健康管理卫士的时候遇到了这个需求,在我们的模块中,有一处地方需要调起相机扫描二维码,并把结果显示在网页中相应的位置。
  查了一些资料以后,发现使用WebViewJavascriptBridge可以非常方便的解决iOS原生与网页的交互问题。
最近抽空写了一个小Demo,希望可以帮到有需要的人。

下面是简单的流程:
首先用pod导入WebViewJavascriptBridge,手动导入二维码库,然后用storyboard简单搭建一个页面。为了方便操作,我从我们的网页上截了一段代码过来,弄了个本地页面放在项目中。

1.首先加载本地页面:

NSString *filePath = [[NSBundle mainBundle]pathForResource:@"WebViewJavascriptBridge" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlString baseURL:nil];

2.按照WebViewJavascriptBridge中的说明,加上一下代码。

// 初始化WebViewJavascriptBridge,进行桥接
_bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];

3.最关键的一步注册Handler

// registerHandler 要注册的事件名称,这个事件要和后台商定好名字一样
[self.bridge registerHandler:@"openCamera" handler:^(id data, WVJBResponseCallback responseCallback) {
        //收到调起指令后要执行的方法(这里是我调起相机扫描二维码的方法)
        [self showQRReader:nil];
}];

注意registerHandler名字要和后台商定好,和下面写在html代码的js中的callHandler名称一致。

function() {
           //调起OC原生handler
           bridge.callHandler('openCamera', function responseCallback(responseData) {
                   console.log("JS received response:", responseData)
                      })
      }

4.这个是我发送过去,让html代码来执行相应的动作。同样的要和后台商定相同的名称。其实仔细看跟上面的是一模一样的,只不过两者相反。

//因为我这里是扫二维码后,将二维码中的内容赋给网页中的文本框。所以我将这个方法写在扫码后的回调中。
//callHandler 商定的事件名称,用来调用网页里面相应的事件实现,data id类型,传回去的参数。
[self.bridge callHandler:@"paste_text" data:result];

下面是js的代码:

 bridge.registerHandler('paste_text', function(data, responseCallback) {
        //给输入框赋值
         document.getElementById('promotion_code').value = data;
   })

5.按照官方说明,在html的js中加入以下代码:

   function setupWebViewJavascriptBridge(callback) {
     if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
     if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
          window.WVJBCallbacks = [callback];
          var WVJBIframe = document.createElement('iframe');
          WVJBIframe.style.display = 'none';
          WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
          document.documentElement.appendChild(WVJBIframe);
           setTimeout(function() {       
                document.documentElement.removeChild(WVJBIframe) 
          }, 0)
   }
            
       setupWebViewJavascriptBridge(function(bridge) {
                    //点击按钮后执行方法
                    document.getElementById('btn_camera').onclick = function() {
                            //调起OC原生handler
                            bridge.callHandler('openCamera', function responseCallback(responseData) {
                                    console.log("JS received response:", responseData)
                                })
                        }
                   //收到callback
                    bridge.registerHandler('paste_text', function(data, responseCallback) {
                        //给输入框赋值
                        document.getElementById('promotion_code').value = data;
                    })
                })

下面就大功告成了,现在可以点击页面中的扫码,开始扫码,然后将二维码中的内容赋给网页中的文本框了。
效果如下:

演示.gif

Demo地址:/(ㄒoㄒ)/~~ Demo要用真机调试,不要用模拟器。
https://github.com/SouthCity/iOSBlogDemo
WebViewJavascriptBridge地址:
https://github.com/marcuswestin/WebViewJavascriptBridge
所用二维码库QRCScanner 地址:
https://github.com/zhangfeidev/QRCScanner

努力进阶中/(ㄒoㄒ)/~~,写的不对的欢迎指出。

上一篇 下一篇

猜你喜欢

热点阅读