/*
注意:源生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 };

jsbridge的js封装的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 使用NW.js封装微信公众号菜单编辑器为桌面应用

    开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...

  3. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  4. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  5. 使用原生JS封装Ajax

    使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

  6. js封装的方法

    1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...

  7. JS封装cookie操作函数实例(设置、读取、删除)

    本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  8. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  9. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  2. Python中的 __name__有什么作用?最详细解读

    案例说明: Python中的模块(.py文件)在创建之初会自动加载一些内建变量,__name__就是其中之一.Python模块中通常会定义很多变量和函数,这些变量和函数相当于模块中的一个功能,模块被导 ...

  3. MySQL设置global变量和session变量

    1.在MySQL中要修改全局(global)变量,有两种方法: 方法一,修改my.ini配置文件,如果要设置全局变量最简单的方式是在my.ini文件中直接写入变量配置,如下图所示.重启数据库服务就可以 ...

  4. mysql安装完启动问题解决

    一.初始化报错问题: 1./usr/local/mysql/bin/mysqld --user=mysql --basedir=/usr/local/mysql --datadir=/usr/loca ...

  5. Spring+MVC Controller层接收App端请求的中文参数乱码问题。

    在正文之前,说明下Filter的作用: 过滤器顾名思义就是进行过滤的,可以实现代码的定向执行和预处理.通俗点说法filter相当于加油站,request是条路,response是条路,目的地是serv ...

  6. web安全系列4:google语法

    这是web安全的第四篇,欢迎翻看前面几篇. 前面我们介绍了一些和HTTP有关知识,那么一个疑问就是黑客要做的第一件是什么?其实很简单,确定一个目标,然后搜集信息. 这很容易理解,我们无论做什么都得先有 ...

  7. (PMP)第5章-----项目范围管理

    产品范围:所具有的特征和功能 项目范围:必须完成的工作. 5.1 规划范围管理 输入 工具与技术 输出 1.项目章程 2.项目管理计划 (质量管理计划, 项目生命周期描述, 开发方法) 3.事业环境因 ...

  8. Spring核心

    方法区与常量池 BeanFactoryPostProcessor与BeanPostProcessor使用 创建pc过程 https://www.liangzl.com/get-article-deta ...

  9. Python3--Numpy

    数组的形状是它有多少行和列,上面的数组有5行和5列,所以它的形状是(5,5). itemsize属性是每个项占用的字节数.这个数组的数据类型是int 64,一个int 64中有64位,一个字节中有8位 ...

  10. maven + eclipse + tomcat热部署 引自:http://jingpin.jikexueyuan.com/article/23068.html

    方案二: 1.修改tomcat的server.xml配置文件,在host结点下添加如下代码 Xml代码   <Context docBase="F:\eclipse_workspace ...