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. JS URL 使用base64加密与解密

    JS编码方式: <script type="text/javascript"> document.write(encodeURI("http://www.w3 ...

  2. ARM地址映射

    转自:http://blog.csdn.net/a3163504123/article/details/10958229 重映射之后,一般原来的地址依然有效.也就是说,可能两个地址,对应一个存储单元. ...

  3. 尽量使用条件属性（Conditional Attribute）而不是#if/#endif预处理

    http://www.cnblogs.com/JiangSoney/archive/2009/08/10/1543197.html .net框架提供了一个特性:属性(Attribute),注意:此属性 ...

  4. 开发高峰时的CPU使用率

  5. Google glog 使用

    Google glog 使用 1        简介 Googleglog 库实现了应用级的日志记录,提供了C++ 风格的流操作和各种助手宏. 代码示例: #include <glog/logg ...

  6. mysqli 操作数据库

    从php5.0开始增加mysql(i)支持 , 新加的功能都以对象的形式添加 i表示改进的意思 功能多.效率高.稳定 编译时参数: ./configure --with-mysql=/usr/bin/ ...

  7. 转--Android实用的代码片段 常用代码总结

    这篇文章主要介绍了Android实用的代码片段 常用代码总结,需要的朋友可以参考下     1:查看是否有存储卡插入 复制代码 代码如下: String status=Environment.getE ...

  8. php判断用户客户端是否是微信内置客户端

    微信内置浏览器的渲染方式在某些方面和其他浏览器不同,所以有时候需要做一些兼容性处理,那么就需要判断是否是微信内置浏览器.最好的判断方式就是通过 User Agent 来判断. 工具/原料   php ...

  9. SAR命令

    前面已经介绍了 vmstat和top命令的解析及使用,下面我们来学习一个更重要的命令sarsar命令可以通过参数单独查看系统某个局部的使用情况 sar 命令行的常用格式: sar [options] ...

  10. git 空提交和重置提交者（转载）

    From:http://www.xiukun.me/git%E4%BD%BF%E7%94%A8-allow-empty-%E8%BF%9B%E8%A1%8C%E7%A9%BA%E7%99%BD%E6% ...