关于ios中oc和JavaScript的交互,包含vue

由于人力成本和时间成本,还有更新成本,现在移动端嵌H5的方式越来越多,这里面就牵扯到一些js和原生交互的问题。

先说我常用的JavaScriptCore

首先需要获取上下文


获取上下文

然后通过jscontext这个类的对象来进行一些操作


比如主动调用js的方法进行传值

比如让js来主动调用我们的原生方法


关于ios中oc和JavaScript的交互,包含vue_第1张图片
context里面的goback必须和前端方法命名一致


但是前端写的方法是写在vue的作用域里面,因为vue中的方法都封装在某一个作用域下的,也就是从逻辑上讲,我需要先拿到vue作用域的上下文,才有可能进行调用,但是找了一下资料并没有找到相应的资料。


关于ios中oc和JavaScript的交互,包含vue_第2张图片
前端代码如上,showAppAlertMsg能够调用。app里面的方法却不行。

那么这种情况下,iOS原生如何调用到vue里面的方法并且给里面的属性赋值,或者取值呢?

首先需要前端把vue的方法部分暴露出来赋值给window(必须的操作)。

然后直接通过webview的stringByEvaluatingJavaScriptFromString方法来进行调用

比如前端的这个方法:

关于ios中oc和JavaScript的交互,包含vue_第3张图片

可以通过这种方式进行调用

因为前端暴露出来后document也就变成了canvasdom,这个就代表了方法是在vue里面的,然后通过字符串点出方法就行了。括号里面的两个单引号里面可以带进需要传给前端的参数。



关于ios中oc和JavaScript的交互,包含vue_第4张图片
前端代码,vue里面定义的变量

比如需要给anotherpicurl变量赋值:


关于ios中oc和JavaScript的交互,包含vue_第5张图片
直接=就行了

如果需要取值,比如 canvasstatus的值。


打印出来就是等待数据加载完成

以上vue和iOS交互方式只能oc单方面调用js,不能js主动调用oc,需要的话,用JavaScriptCore框架.

你可能感兴趣的:(关于ios中oc和JavaScript的交互,包含vue)