之前整理过一篇关于混合开发调试的文章《iOS混合开发调试秘籍》,虽然在一定程度上解决了混合开发过程中的调试问题,但是操作比较麻烦,无法直观的进行调试。为了方便混合开发的时候进行直观的调试,我这边引入了vconsole.min.js
这个文件,同时呢,在我需要测试的页面引入该文件,具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iOS and Js</title>
<style type="text/css">
body,
html {
height: 500px;
line-height: 1;
font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial,
sans-serif, 'Droid Sans Fallback';
-webkit-text-size-adjust: 100% !important;
-webkit-tap-highlight-color: transparent;
}
#__vconsole .vc-switch{
top:0;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="./vconsole.min.js"></script>
<script>
new VConsole();
</script>
<script>
</script>
</head>
<body>
<div style="margin-top: 100px">
<h1 style="color: red;">教你如何用H5与OC进行交互,并且把H5输入的内容显示到当前的控制器上</h1><br/>
<div><input type="button" value="sendInfoToNative" onclick="sendInfoToNative()"></div>
<br/>
<div><input type="button" value="getInfoFromNative" onclick="getInfoFromNative()"></div>
<br/>
<div><input type="button" value="newGInfoFromNative" onclick="newGetInfoFromNative()"></div>
<br/>
<div><input type="button" value="cleanAllCallBacks" onclick="cleanAllCallBacks()"></div>
<br/>
<div><input type="button" value="点击触发JS方法(callJsConfirm)" onclick="callJsConfirm()"></div><br/>
</div>
<br/>
<div>
<div><input type="button" value="点击触发JS输入方法(callJsInput) " onclick="callJsInput()"></div><br/>
</div>
<script type="text/javascript">
function sendInfoToNative() {
console.log('sendInfoToNative 调用');
var params ={'Phone':'13566668888'};
JKEventHandler.callNativeFunction('sendInfoToNative',params,null,null);
}
function getInfoFromNative(){
console.log('getInfoFromNative 调用');
var params = {'Phone':'13933333333'};
JKEventHandler.callNativeFunction('getInfoFromNative',params,'getInfoFromNativekkk',function(data){
console.log(data); alert(data);
});
}
function newGetInfoFromNative(){
var params = {'name':'我是jack!!!'};
JKEventHandler.newCallNativeFunction('newGetInfoFromNative',params,'newGetInfoFromNativeFunction',function(data){
alert(data);
},
function(data){
alert(data);
});
}
function callJsConfirm() {
if (confirm('confirm', 'Objective-C call js to show confirm')) {
document.getElementById('jsParamFuncSpan').innerHTML
= 'true';
} else {
document.getElementById('jsParamFuncSpan').innerHTML
= 'false';
}
}
function callJsInput() {
var response = prompt('Hello', '请输入你的名字:');
document.getElementById('jsParamFuncSpan').innerHTML = response;
alert (response);
}
function cleanAllCallBacks(){
JKEventHandler.removeAllCallBacks();
}
</script>
</body>
</html>
大家可以看到在两个js方法中,我进行了将某些内容输出到控制台的操作,具体代码入下:
function getInfoFromNative(){
console.log('getInfoFromNative 调用');
function sendInfoToNative() {
console.log('sendInfoToNative 调用');
这样在交互的时候,我就可以清楚的知道函数的执行状态。
演示如下:
大家可以看到,我调用时,相关的js相关的log信息都输出出来了。可以非常方便的进行调试。
demo下载地址如下:https://github.com/xindizhiyin2014/JKWKWebViewHandler
更多优质文章,可以微信扫码关注: