WKWebView使用WebViewJavascriptBridge与Vue交互实现

1.在项目中引入WebViewJavascriptBridge库

2.创建WKWebView

    if (_bridge) { return; }
    self.webView = [[NSClassFromString(@"WKWebView") alloc] initWithFrame:self.view.bounds];
    self.webView.navigationDelegate = self;
    [self.view addSubview:self.webView];
    [WebViewJavascriptBridge enableLogging];
    _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
    [_bridge setWebViewDelegate:self];
    //OC 注册testMethod方法供JS端调用（此方法与vue定义方法保持一致）
    [_bridge registerHandler:@"testMethod" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"Response from testObjcCallback");
    }];
    [self renderButtons:self.webView];
    [self loadExamplePage:self.webView];

3.加载vue打包的html文件

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"dist"];
NSURL *pathURL = [NSURL fileURLWithPath:filePath]; [webView loadRequest:[NSURLRequest requestWithURL:pathURL]];

如果需要使用路由的方式加载html中的二级页面那么需要使用如下的方式进行加载

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"dist"];
NSString *fileString =[NSString stringWithFormat:@"file://%@",[filePath stringByAppendingString:@"#/Sencond"]];
NSURL *pathURL = [NSURL URLWithString:fileString];
[webView loadRequest:[NSURLRequest requestWithURL:pathURL]];

4.在vue项目中定义一个bridge.js文件用来处理原生与js的交互

屏幕快照 2020-07-22 下午4.48.39.png

bridge文件中对应代码如下:

function setupWebViewJavascriptBridge (callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.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__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(() => {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}

export default {
  callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  registerhandler (name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

5.在main.js文件中引入bridge.js文件

import Bridge from './config/bridge.js'
Vue.prototype.$bridge = Bridge

6.js主动调用原生方法

let data = '给原生传值'
  //调用原生方法  给原生传data值  然后接收原生回传回来的值
（fromNativeData 是原生回调返回给js的值）
 this.$bridge.callhandler('testMethod', data, (fromNativeData) => {
     // 处理返回数据
    this.operatorId = fromNativeData;
  })

7.js注册方法供原生调用

data是原生返回的值
 //注册js方法供OC调用
init(){
 this.$bridge.registerhandler('showAlert', (data, responseCallback) => {
    this.operatorId = data;//接收原生回传过来的值
    responseCallback("https://www.baidu.com")//把值返回给原生
  })
}
此方法需要在mounted方法中挂载，OC才能访问到
 mounted() {
    //客户端方法的组件中
    this.init()

  }

对应OC中代码如下

    id data = @"给js传的值";
    //OC调用js 并且返回数据
    [_bridge callHandler:@"showAlert" data:data responseCallback:^(id response) {
        //NSLog(@"testJavascriptHandler responded: %@", response);
    }];

8.总结下混合开发中的小知识点
8.1需求中有需求需要用到vue页面缓存，解决办法如此文章
【https://www.jianshu.com/p/f343c093f370】
8.2 开发中webView需要绕过信任证书访问https网络
具体实现如下：创建一个NSURLRequest 的分类NSURLRequest+NSURLRequest_IgnoreSSL.h
实现

@implementation NSURLRequest (NSURLRequest_IgnoreSSL)
//负责处理webView证书验证，但是没有有效证书
+(BOOL)allowsAnyHTTPSCertificateForHost:(NSString*)host {
    return YES;
}
@end
 [NSURLRequest allowsAnyHTTPSCertificateForHost:fileString];

8.3在 vue打包的时候需要做如下修改，否则移动端加载页面会出错

{2A0831FD-A594-4004-AA3F-24C38406B3C7}.png

8.4 关于css px单位换算rem适配移动端苹果与安卓
安装工具postcss-pxtorem

2.设置规则 .postcssrc.js文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

8.5 vue中样式穿透问题
为了避免局部样式穿透，影响到其他页面，需要使用src的引入方式引入css.，并且加上scope

image.png

8.6