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. ASP.NET MSSQL 依赖缓存设置方法

    更多的时候,我们的服务器性能损耗还是在查询数据库的时候,所以对数据库的缓存还是显得特别重要,上面几种方式都可以实现部分数据缓存功能.但问题是我们的数据有时候是在变化的,这样用户可能在缓存期间查询的数据 ...

  2. 使用 HTML5 Shiv 让 IE 支持 HTML5

    HTML5 Shiv 使用 html5.js 必须在页面head元素内调用(因为 IE 必须在元素解析前知道这个元素,所以这个 JS 文件不能在页面底部调用.) 作者已经把js文件放在Google c ...

  3. 1.scala语法

    对象的apply方法 (1)对象调用apply()方法,可省略成() (2)string对象的apply方法返回第n个字符 "hello"(4) //'o' if语句的返回值 ja ...

  4. 将List<Map>中的datas转换为json格式写入文件

    private static boolean writeToTextFileByJson(List<Map<String, Object>> datas, String tit ...

  5. DBA_Oracle海量数据处理分析（方法论）

    2014-12-18 Created By BaoXinjian

  6. PLSQL_Database Link的基本概念和用法（概念）

    2014-06-08 Created By BaoXinjian

  7. STM32中断控制及优先级设置

    M3用8bits而STM32用高四位来表示抢占和子优先级:bit=1表示抢占:bit=0表示非抢占即子优先级:所以共有5中方案分组: 分组 Bit7 Bit6 Bit5 Bit4 说明: 第0组   ...

  8. db2删除数据库

    1.断开所有连接  db2 stop application all   force 2.停止数据库    db2stop 3.删除数据库(系统管理员权限下)db2 drop  数据库name

  9. C++ 多继承和虚继承的内存布局（转）

    转自:http://www.oschina.net/translate/cpp-virtual-inheritance 警告. 本文有点技术难度,需要读者了解C++和一些汇编语言知识. 在本文中,我们 ...

  10. java左移右移运算符

    http://blog.csdn.net/dandanteng/article/details/7433531 首先要明白一点,这里面所有的操作都是针对存储在计算机中中二进制的操作,那么就要知道,正数 ...