iOS混合开发调试秘籍（升级版）

之前整理过一篇关于混合开发调试的文章《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

更多优质文章，可以微信扫码关注：
这里写图片描述

iOS混合开发调试秘籍（升级版）

猜你喜欢