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. Linux从逻辑地址到物理地址

    转自:http://blog.chinaunix.net/uid-24774106-id-3427836.html 我们都知道,动态共享库里面的函数的共享的,这也是动态库的优势所在,就是节省内存.C ...

  2. 在eclipse中设计BPMN 2.0工作流定义的根本步骤

    原文地址:http://www.myexception.cn/eclipse/1863140.html 在eclipse中设计BPMN 2.0工作流定义的基本步骤 1. Activiti问我们提供了A ...

  3. 黄聪：Discuz!的SEO优化策略一：如何设置标题 & 如何去掉Powered by Discuz!尾巴

    1.如何设置标题 进入 管理中心 -- 全局 -- SEO设置 -- 论坛 -- 标题 ,设置你的网站标题和描述. PS:有人问keywords要不要设置,其实现在keywords对SEO的影响已经微 ...

  4. @RequesParam注解源码解析

  5. XML封装与验证消息

    Document document = DocumentHelper.createDocument(); document.setXMLEncoding(ChARSET_UTF_8); Element ...

  6. Shell 重定向 &>file,2>&1,1>&2 的区别

    Shell上:0表示标准输入1表示标准输出2表示标准错误输出> 默认为标准输出重定向,与1>相同2>&1 意思是 把标准错误输出重定向到标准输出1>&2 意思是 ...

  7. Linux命令（20）查看当前网速

    Linux查看网络即时网速 sar -n DEV 1 100 1代表一秒统计并显示一次 100代表统计一百次 还可以使用ntop工具

  8. java多线程之计算数量

    package Thread.Abort; import java.util.ArrayList; import java.util.List; import java.util.Random; im ...

  9. 97、进入ScrollView根布局页面，直接跳到页面底部，不能显示顶部内容

    API使用:http://www.cnblogs.com/over140/archive/2011/01/27/1945964.html 以ScrollView为根的部局,不能从顶部显示其包含的页面内 ...

  10. [ActionScript 3.0] AS3实现图像径向转旋效果

    原图    效果     import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Blen ...