/*
注意:源生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. 使用svn进行文件和文件夹的忽略

    使用svn进行文件和文件夹的忽略 黑泥卡 关注  0.3 2016.08.16 22:42* 字数 786 阅读 20554评论 7喜欢 15 如何使用svn忽略文件和文件夹如果你之前尝试过git,你 ...

  2. Idea增加Idiff merger工具

    File -- setting --- tolls -- diff & merge 选择使用外部diff工具和外部merge工具,选择winmerge工具目录. 就可以再version con ...

  3. java的多态性

    class test1{    int a=3;    public test1(int a)    {        this.a=a;    }    public void aa()    {  ...

  4. 详解js跨域

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 对于端口和协议的不同,只能通过后台来解决.URL 说明 是否允许通信 http://www.a.com/a.js http ...

  5. 学习java之路 简单日历查询代码

    /** * 31天的 1, 3, 5, 7, 8, 10 ,12 30天的 4, 6,9,11 28天(平年) 2 29天(闰年) 2 */ class Demo{ public static voi ...

  6. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  7. SAS 创建新变量

    SAS  创建新变量 在对SAS数据集进行处理时,经常需要根据原有变量或变量值生成新变量.根据要实现功能的不同,SAS提供了多种方法,例如通过数据集选项RENAME=(RENAME语句).赋值语句.求 ...

  8. Codeforces 884 简要题解

    文章目录 A题 B题 C题 D题 E题 F题 传送门 A题 传送门 题意简述: 一个人要完成一件事总共需要ttt秒,现在有nnn天,每天有aia_iai​不能做事,问他可以在第几天做完. 思路:按照题 ...

  9. 深入理解java虚拟机(一)-----java内存区域以及内存溢出异常

    概述 Java语言的一个非常重要的特点就是与平台的无关性.而使用Java虚拟机是实现这一特点的关键.一般的高级语言如果要在不同的平台上运行,至少需要编译成不同的目标代码.而引入Java语言虚拟机后,J ...

  10. JAVA 8 主要新特性 ----------------(六)集合Stream API

    一.简介Stream Java8中有两大最为重要的改变.第一个是 Lambda 表达式:另外一 个则是 Stream API(java.util.stream.*).Stream 是 Java8 中处 ...