zoukankan      html  css  js  c++  java
  • jsbridge的js封装


    /*
    注意:源生app需要配置jsbridge的环境,而在前端页面中需要下方封装代码,既可以达到调用app方法的功能和注册供app调用的方法
    1、注册方法:注册后,供app调用,注册时,同名函数,下一个会覆盖上一个
    2、调用函数,可以调用多次
    3、使用时,只需要导入即可 如:import {setbridge, getbridge} from 'jsbridge'
    4、使用方式:
    调用app方法: getbridge(functionName,data,callback) 第一个参数是app的函数名字;
    第2个参数是要传递给app方法的数据,数据类型不限(具体要看app接收什么类型的数据,如:json,string,number等)
    第3个参数是一个函数,函数内隐含回调数据data,调用例子如下:

    getbridge('closePage','关闭页面',(data) => {
    // 'app返回过来的数据:'+data
    })
    注册方法,供app使用:
    setbridge(functionName,data,callback) 调用方式类似于上方说明
    第一个参数:函数名字,可以自定义
    第2个参数,app调用该方法是,需要给app传递的数据
    第3个参数,回调函数,默认函数有一个数据data参数,得到的是app返回给前台js的数据

    */

    function setupWebViewJavascriptBridge(callback) {
    if (/android/.test(navigator.userAgent.toLowerCase())) {
    if (window.WebViewJavascriptBridge) {
    callback(window.WebViewJavascriptBridge);
    } else {
    document.addEventListener(
    'WebViewJavascriptBridgeReady',
    function() {
    callback(window.WebViewJavascriptBridge);
    },
    false
    );
    }
    } else if (/ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())) {
    if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() {
    document.documentElement.removeChild(WVJBIframe);
    }, 100);
    }
    }
    setupWebViewJavascriptBridge(function(bridge) {
    if (/android/.test(navigator.userAgent.toLowerCase())) {
    bridge.init(function(message, responseCallback) {
    // 'JS got a message', message
    var data = {
    'Javascript Responds': '测试中文!'
    };

    if (responseCallback) {
    // 'JS responding with', data
    responseCallback(data);
    }
    });
    }
    });
    // 初始化jsbridge
    function setbridge(funName, dataJson, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
    bridge.registerHandler(funName, function(data, responseCallback) {
    // '注册函数,从app拿到的数据', data
    callback && callback(data);
    var responseData = dataJson;
    // 'js返回给app的数据', responseData
    responseCallback(responseData);
    });
    });
    }
    function getbridge(funName, dataJson, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
    bridge.callHandler(funName, dataJson, function(response) {
    callback && callback(response);
    });
    });
    }

    export { setbridge, getbridge };
  • 相关阅读:
    VMware Workstation 中安装Redhat linux 9.0
    暑假的总结
    [转载]控制理论 VS 股票
    一些股票术语
    28、linux shell常用的几个函数,split
    35、linux shell常用函数,ps
    shell命令wc,md5sum,basename
    linux shell,tr命令
    36、linux shell常用函数,pgrep
    37、linux shell常用函数,top
  • 原文地址:https://www.cnblogs.com/zhangycun/p/10775087.html
Copyright © 2011-2022 走看看