jsBridge H5和原生交互

最新推荐文章于 2021-05-30 10:13:08 发布

置顶

前端抠脚

最新推荐文章于 2021-05-30 10:13:08 发布

阅读量1.1k

点赞数

分类专栏： js jsBridge

本文链接：https://blog.csdn.net/weixin_40404336/article/details/103575203

版权

jsBridge

方式1：

js调用原生约定方法名encyclopedia 注意需要判断设备类型 然后调用方法如下

ios：window.webkit.messageHandlers.encyclopedia.postMessage({});

android：window.android.encyclopedia();

原生调用js 方法 window.testBridge = function() {
    //do something
}

方式2：

采用jsBridge技术和原生APP通信
android 传送门和ios 传送门，因为两个平台初始化方式不同，因此在开发过程中，需针对每个平台做对应操作。具体做法

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>Title</title>
    <script src="../js/hybrid-bridge.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="../js/is.min.js"></script>
</head>
<body>

<h1>测试摇一摇</h1>
<p>当前次数：<span class="count"></span></p>
<button class="switch">开始</button>
<script>
    $(function(){
        var count = $('.count');
        var timer = null;

        var getPhoneSystem = function() {
            var browserType = is.ios() ? "ios" : is.android() ? "android" : "other";
            console.log(browserType);
            return browserType;
        };

        //初始化js桥
        initHybridBridge.init(getPhoneSystem());

        //获取摇一摇次数
        var myGetYaoNum = function(){
            BRIDGE.callHandler('getYaoNum',{},function (responseData) {
                count.text(responseData);
                timer = setTimeout(myGetYaoNum,10000);
            });
        };

       $('.switch').click(function(){
           var txt = $(this).text();

           if(txt === "开始"){
               $(this).text("结束");
               BRIDGE.callHandler('startYao',{milliseconds:200},function (responseData) {});
               timer = setTimeout(myGetYaoNum,10000);
           }else{
               $(this).text("开始");
               BRIDGE.callHandler('stopYao',{},function (responseData) {});
               clearTimeout(timer);
           }
       });
    });
</script>
</body>
</html>

is.min.js 参考工具类地址http://is.js.org/

/*!
 * is.js 0.9.0
 * Author: Aras Atasaygin
 */
(function(n,t){if(typeof define==="function"&&define.amd){define(function(){return n.is=t()})}else if(typeof exports==="object"){module.exports=t()}else{n.is=t()}})(this,function(){var n={};n.VERSION="0.8.0";n.not={};n.all={};n.any={};var t=Object.prototype.toString;var e=Array.prototype.slice;var r=Object.prototype.hasOwnProperty;function a(n){return function(){return!n.apply(null,e.call(arguments))}}function u(n){return function(){var t=c(arguments);var e=t.length;for(var r=0;r<e;r++){if(!n.call(null,t[r])){return false}}return true}}function o(n){return function(){var t=c(arguments);var e=t.length;for(var r=0;r<e;r++){if(n.call(null,t[r])){return true}}return false}}var i={"<":function(n,t){return n<t},"<=":function(n,t){return n<=t},">":function(n,t){return n>t},">=":function(n,t){return n>=t}};function f(n,t){var e=t+"";var r=+(e.match(/\d+/)||NaN);var a=e.match(/^[<>]=?|/)[0];return i[a]?i[a](n,r):n==r||r!==r}function c(t){var r=e.call(t);var a=r.length;if(a===1&&n.array(r[0])){r=r[0]}return r}n.arguments=function(n){return t.call(n)==="[object Arguments]"||n!=null&&typeof n==="object"&&"callee"in n};n.array=Array.isArray||function(n){return t.call(n)==="[object Array]"};n.boolean=function(n){return n===true||n===false||t.call(n)==="[object Boolean]"};n.char=function(t){return n.string(t)&&t.length===1};n.date=function(n){return t.call(n)==="[object Date]"};n.domNode=function(t){return n.object(t)&&t.nodeType>0};n.error=function(n){return t.call(n)==="[object Error]"};n["function"]=function(n){return t.call(n)==="[object Function]"||typeof n==="function"};n.json=function(n){return t.call(n)==="[object Object]"};n.nan=function(n){return n!==n};n["null"]=fu

最低0.47元/天解锁文章

前端抠脚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jsBridge H5和原生交互

jsBridge方式1：js调用原生约定方法名encyclopedia 注意需要判断设备类型然后调用方法如下ios：window.webkit.messageHandlers.encyclopedia.postMessage({});android：window.android.encyclopedia();原生调用js 方法 window.testBridge = fun...
复制链接

扫一扫