iOS混合开发调试秘籍(升级版)

   之前整理过一篇关于混合开发调试的文章《iOS混合开发调试秘籍》,虽然在一定程度上解决了混合开发过程中的调试问题,但是操作比较麻烦,无法直观的进行调试。为了方便混合开发的时候进行直观的调试,我这边引入了vconsole.min.js这个文件,同时呢,在我需要测试的页面引入该文件,具体代码如下:


<html>
    <head>
        <meta charset="utf-8" />
        <title>iOS and Jstitle>
        <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,技能)