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 };
jsbridge的js封装的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 使用原生JS封装Ajax
使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...
- js封装的方法
1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...
- 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 ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- Maven 基本用法
1. 新建一个项目目录 2. 在项目目录中新建并编写 pom.xml 文件, 3. 在项目目录中新建主代码目录 src/main/java 4. 在项目目录中新建测试代码目录 src/test/jav ...
- GUI学习之八——QToolButton的学习总结
QToolButton提供一个快速的访问按钮,通常在工具栏内使用,一般不显示文本标签而显示图标. 一.按钮的样式风格设置 可以按照下面的风格对按钮进行样式设置 从左到右依次是仅显示图标.仅显示文字.图 ...
- 主要的Ajax框架都有什么?
* Dojo(dojotoolkit.org):* Prototype和Scriptaculous (www.prototypejs.org和script.aculo.us):* Direct We ...
- java之路 把1到100之间的数的偶数相加
/** *把1到100之间的数的偶数相加 */ class Demo{ public static void main(String[] args){ int i =1; int sum = 0; d ...
- PHP配置文件详解php.ini
[PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而php.ini的设置更改可以反映出相当的变化, ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;;;;; ...
- truncate和delete命令的优缺点和原理解析,适用场合
1.相同点:truncate和delete只删除数据不删除表的结构2.不同点:truncate.drop是数据库定义语言,操作立即生效,元数据不会放到rollback segement中,不能回滚,操 ...
- c# 将object尝试转为指定对象
主方法: /// <summary> /// 将object尝试转为指定对象 /// </summary> /// <param name="data" ...
- css样式表的知识点总结
css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...
- NotePad++ 添加HEX-Editor插件
步骤: 一.下载插件 https://github.com/chcg/NPP_HexEdit/releases 二.选择插件版本 Notepad 官网客服提示:32bit Notepad++可以使用常 ...
- java 幂等性(转)
(转自)http://www.cnblogs.com/weidagang2046/archive/2011/06/04/idempotence.html 理解HTTP幂等性 基于HTTP协议的Web ...