zoukankan      html  css  js  c++  java
  • App交互demo

    Android

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>方法实现</title>
    <meta name="author" content="m.gome.com.cn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" src="js/zepto.js"></script>
    </head>
    <body>
    <h1>JS_Android交互测试</h1>
    <script type="text/javascript">
    
    function test(){
    var _log = document.createElement('p');
    document.body.appendChild(_log);
    _log.innerHTML = 'JS handler [test] was called';
    }
    
    //打印错误日志
    window.onerror = function(err) {
    var errlog = document.createElement('p');
    document.body.appendChild(errlog);
    errlog.innerHTML = err;
    }
    Zepto(function(){
    bridge.send('Enemy spotted');
    })
    
    window.onload = function(){
    var uniqueId = 1;
    
    //日志记录 
    function log(message, data) { 
    var log = document.getElementById('log'),
    el = document.createElement('div');
    el.className = 'logLine';
    el.innerHTML = uniqueId++ + '. ' + message + (data ? ': ' + JSON.stringify(data) : '');
    if (log.children.length) {
    log.insertBefore(el, log.children[0]);
    } 
    else {
    log.appendChild(el);
    } 
    }
    
    log('window onload Ready');
    
    /* 功能1
    * 页面加载完成后给Native传值
    * Native随时给js传值
    * 应用场景: H5页面传值给Native,动态生成顶栏标题。
    * 测试用例: 页面加载完成后,js给Native传值,Native拿到后传值给js,页面打印日志
    */
    
    
    /* 功能2
    * Native调用js方法,执行完后回调
    * 应用场景: Native返回按钮调用H5返回功能
    * 测试用例: 项目js和wap公用js(不影响现有wap站js库,且调用灵活)
    */
    // bridge.delayJsCallBack(0, 'call back haha', function (msg) {
    // bridge.alert(msg);
    // });
    //bridge.registerHandler('test', wapJs());
    //test();
    
    /* 功能3
    * js调用Native方法,执行完后回调
    * 应用场景: H5分享按钮调用Native分享功能
    * 测试用例: alert
    */
    var Btn = document.getElementById('btn');
    Btn.ontouchstart = function(e){
    e.preventDefault();
    log("Calling Native handler testOC");
    bridge.callHandler('testOC',{'id': '123'}, function(response) {
    log('Got response from testOC callBack', response)
    })
    } 
    }
    </script>
    <button id='btn'>js call Native</button>
    <div id='log'></div>
    </body>
    </html>

    IOS:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>方法实现</title>
    <meta name="author" content="m.gome.com.cn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.effect.js"></script>
    </head>
    <body>
    <h1>JS_OC交互测试</h1>
    <script type="text/javascript">
        
        window.onerror = function(err) {
            log(err);
        }
    
        //给WebViewJavascriptBridgeReady事件注册一个Listener  
        document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false)  
        //事件的响应处理  
        function onBridgeReady(event) {  
            var bridge = event.bridge,
                uniqueId = 1;
            
            //日志记录  
            function log(message, data) {  
                var log = document.getElementById('log'),
                    el = document.createElement('div');
                el.className = 'logLine';
                el.innerHTML = uniqueId++ + '. ' + message + (data ? ': ' + JSON.stringify(data) : '');
                if (log.children.length) {
                    log.insertBefore(el, log.children[0]);
                }  
                else {
                    log.appendChild(el);
                }  
            }
            
            log('WebView2Javascript Bridge Ready');
            
            /* 功能1
             * 页面加载完成后给Native传值
             * Native随时给js传值
             * 应用场景: H5页面传值给Native,动态生成顶栏标题。
             * 测试用例: 页面加载完成后,js给Native传值,Native拿到后传值给js,页面打印日志
            */
            bridge.send('Enemy spotted');
            //初始化操作,并定义默认的消息处理逻辑
            bridge.init(function(message) {
                log('Roger that, 3Q js!', message);
            })
            
            /* 功能2
             * Native调用js方法,执行完后回调
             * 应用场景: Native返回按钮调用H5返回功能
             * 测试用例: 项目js和wap公用js(不影响现有wap站js库,且调用灵活)
             */
            bridge.registerHandler('test', function(data, response) {
                log('JS handler [test] was called', data);
                response.respondWith({ 'Javascript':'Roger!' }); 
            })
            //bridge.registerHandler('test', wapJs());
            
            /* 功能3
             * js调用Native方法,执行完后回调
             * 应用场景: H5分享按钮调用Native分享功能
             * 测试用例: alert
             */
            var Btn = document.getElementById('btn');
            Btn.ontouchstart = function(e){
                e.preventDefault();
                log("Calling Native handler testOC");
                bridge.callHandler('testOC',{'id': '123'}, function(response) {
                    log('Got response from testOC callBack', response)
                })
            }  
        }
    </script>
        <button id='btn'>js call Native</button>
        <div id='log'></div>
    </body>
    </html>
  • 相关阅读:
    cad是什么意思?教你快速把cad转换成pdf格式
    为什么街上的商贩更喜欢用微信支付,而不是支付宝,看完长知识了
    音乐剪辑软件怎么用?教你一个快速编辑音频的方法
    电脑如何录制视频?安利两种电脑录屏的方法
    被称为逆天改命的5大中国工程,曾轰动世界,你知道几个?
    如何使用音乐格式转换器?快速编辑音频文件的方法
    PPT结尾只会说“谢谢”?学会这些PPT结尾,观众主动为你鼓掌
    经典PHP面试题(冒泡排序),当场就被打脸,卧槽什么冒泡?为啥还排序?
    千万不要再搞混了,函数empty( var );输出的判断值是false : true
    PHP删除数组中空数组
  • 原文地址:https://www.cnblogs.com/xuxu-dragon/p/4933809.html
Copyright © 2011-2022 走看看