*/
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// JSContext:给JavaScript提供运行的上下文环境
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"JSBridge"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"IOS异常信息:%@", exceptionValue);
};
那IOS怎么调用前端能力的呢?对客户端来说很简单,一行代码的事情。
JSValue *getMsgFromIOS = self.jsContext[@"getMsgFromIOS"];
// args 传递给前端函数的参数列表,这里可以是多个,现在就写了一个
[getMsgFromIOS callWithArguments:@[args]];
至于剩下的客户端代码,就是画一些客户端交互UI,以及说一些数据转换的方法,没啥好讲的。
简单看下前端代码,也很简单,大家都看得懂。
这里简单说下,客户端往前端的window上注入了一个JSBridge对象,这个是我起的命名,你也可以随便命名,只要这个名字是客户端注入的名字就行了。
<body>
<div>
<span>接受来自客户端的信息:</span>
<span id="iosMsgWrapper"></span>
</div>
<div><input type="button" value="向IOS发数据" onclick="sendMsgToIOS()" /></div>
<script>
/** 提供给客户端调用的方法,用于更改前端页面数据 */
function getMsgFromIOS(info) {
try {
const { eventName = '', params = {} } = info || {};
if (eventName === 'change_fe_text') {
const { desc = '' } = params || {};
const iosMsgWrapperNode = document.getElementById('iosMsgWrapper');
iosMsgWrapperNode.innerHTML = desc;
} catch {
alert(error, info);
};
/** 前端向客户端发送数据,客户端用于更新客户端页面 */
function sendMsgToIOS() {
const sendData = {
eventName: 'post_data_to_ios',
params: {
desc: '来自前端的数据',
};
const sendDataStr = JSON.stringify(sendData);
window.JSBridge.getMsgFromFS(sendDataStr);
</script>
</body>
</html>
三.拦截式
这个在我的项目中,今晚就没实现,很简单,有时