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>

App交互demo的更多相关文章

  1. --@angularJS--指令与指令之间的交互demo

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

  2. APP交互

    交互设计基本功!5个值得学习的APP交互方式http://www.uisdc.com/5-interactive-design-worth-learning 移动App交互设计10大趋势–你用到了吗? ...

  3. Android - 和其他APP交互 - 获得activity的返回值

    启用另一个activity不一定是单向的.也可以启用另一个activity并且获得返回值.要获得返回值的话,调用startActivityForResult()(而不是startActivity()) ...

  4. Android - 和其他APP交互 - 把用户带到其他app

    Android的重要功能之一就是app可以根据要执行的操作让用户启动另外一个app.例如,app有一个商业地址然后想要在地图上显示,并不需要在app中加一个显示地图的activity,可以直接用Int ...

  5. 如何用Axure快速制作APP交互原型

    对于产品经理来说,熟练使用一些常用软件是一项十分必要的技能.其中,作为一个专业的快速原型设计工具,Axure RP无疑在产品人心中拥有一个难以撼动的地位.但就要PS一样,虽然足够专业,但同样也会存在使 ...

  6. h5 与原生 app 交互的原理

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...

  7. 客户端相关知识学习（二）之h5与原生app交互的原理

    前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...

  8. h5与app交互

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...

  9. --@angularJS--指令与控制器之间的交互demo

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

随机推荐

  1. C#如何判断我的程序已经有一个实例正在运行

    static class Program { private static Mutex mutex; /// <summary> /// 应用程序的主入口点. /// </summa ...

  2. (C#) 引用工程中发现有黄色叹号

    一个Project 引用 另外 一个Project 显示黄色叹号,后来发现 后一本Project的build设定为.Net4.5, 前一个为4.0, 将版本改为一致后,问题解决.

  3. 内存修改mfc

    vc++6.0,内涵图

  4. CentOs of Tomcat commands

    1.启动tomcat 进入tomcat目录的bin目录下 执行 [root@iZ253lxv4i0Z bin]# ./startup.sh Using CATALINA_BASE: /usr/loca ...

  5. cf666 C. Codeword 组合数学 离线分块思想

                      time limit per test 6 seconds memory limit per test 256 megabytes input standard i ...

  6. py继续

    这个正则里面有引号,我外面在一个引号就出问题了,应该怎么处理 用双引号

  7. 移动设备wap手机网页html5通过特殊链接：打电话，发短信，发邮件详细教程

    如果需要在移动浏览器中实现拨打电话,调用sms发短信,发送email等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url href链接的方式,实现在Safa ...

  8. 解决docker不能下载镜像

    试了很多办法.用ss,vpn,都不行. 修改 /etc/default/docker的方式貌似在 1.12不好使了.最后找到和这个办法 http://blog.csdn.net/gsying1474/ ...

  9. Java中-XMX -xmn 是什么的缩写

    这个应该是 eclipse 的配置文件 eclipse.ini 中的配置语句.在配置文件中直接传递给 java vm 的参数并不多,调用形式是这样的: 1 eclipse [normal argume ...

  10. Lua 架构 The Lua Architecture

    转载自:http://magicpanda.net/2010/10/lua%E6%9E%B6%E6%9E%84%E6%96%87%E6%A1%A3/ Lua架构文档(翻译) 十 102010 前段时间 ...