夜下客

繁体版 简体版
夜下客 > JS修炼法则 > 第20章 浅尝一下IOS JSB

第20章 浅尝一下IOS JSB

*/

- (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>

三.拦截式

这个在我的项目中,今晚就没实现,很简单,有时

『加入书签,方便阅读』