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. 从IT匹配业务如何走向IT引领业务

    http://mp.weixin.qq.com/s?__biz=MjM5Njk2Mzg0MQ==&mid=200105892&idx=1&sn=cd9c155d09e8b975 ...

  2. JavaScript 设置、读取Cookie

    1.设置Cookie //设置cookie function setCookie(cookieName, cookieValue, cookieExpires, cookiePath) { cooki ...

  3. 黄聪：C#超级延时方法，延迟系统时间但系统又能同时能执行其它任务

    private void Delay(int Millisecond) //延迟系统时间,但系统又能同时能执行其它任务: { DateTime current = DateTime.Now; whil ...

  4. CLR via C#笔记

    第一部分 CLR基础 CLR和JIT “运行时”如何解析类型引用 第二部分 设计类型 使用C#的is和as操作符来转型 运行时的相互联系 基元类型.引用类型和值类型 值类型的装箱和拆箱 哈希码 dyn ...

  5. 转-安卓中实现两端对齐，中间fill_parent的方法

    安卓中实现两端对齐,中间fill_parent的方法 Java代码:   <?xml version="1.0″ encoding="utf-8″?> <Line ...

  6. Apache2 CGI demo

    1. 修改 httpd.conf  配置 <IfModule alias_module> ScriptAlias /cgi-bin/ "/usr/local/apache2/cg ...

  7. 开发工具及服务年度大奖评选 I Bugtags 荣获最具成长潜力奖

    作为全球最大中文 IT 社区和服务平台.中国最大技术管理者平台的 CSDN 在中国北京总部举办了一场 2015 年开发工具及服务年度大奖评选活动,此次活动目的在于推动开发服务及工具质量的提升,提高行业 ...

  8. C#多字符分割

    string demo = "0 1 2 3";string[] result = demo.Split(" ,,".ToCharArray());试试,中间的 ...

  9. android Studio 快捷键（转载）

    http://www.cnblogs.com/ut2016-progam/p/5627142.html http://blog.csdn.net/shulianghan/article/details ...

  10. 安装程序无法复制文件 convlog.exe的解决方法

    在安装的时候出现一个错误提示“安装程序无法复制文件CONVLOG.EX_”,上网找了很多资料,都说是因为版本问题,考虑到自己的服务器安装的是2003 SP1,后来打了补丁到SP2的,也就认为是版本问题 ...