/*

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

php通过jsbridge,jsbridge的js封装相关推荐

  1. python处理svg 平移 旋转_d3.js封装文本实现自动换行和旋转平移等功能

    我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMulti ...

  2. 小程序promise封装post请求_微信小程序 es6-promise.js封装请求与处理异步进程

    微信小程序 es6-promise.js封装请求与处理异步进程 下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定 ...

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

    2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...

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

    实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定 取消按钮可选 调用方法: 1 P ...

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

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

  6. 纯js封装一个多功能弹出框

    不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...

  7. BootStrap Table的JS封装

    目前很多项目前台都使用bootstrap技术,初次接触时看了点网上的视频教程,深深地被它的样式所吸引,因为它是一个响应式的框架,可以根据浏览器的宽高自适应显示. 作为一名后台开发人员,bootstra ...

  8. itwangyang - 再次继续卷起来-20 个 JS 封装工具函数

    itwangyang - 再次继续卷起来-20 个 JS 封装工具函数 前言 日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率. ...

  9. H5移动端原生JS封装附件上传服务器

    本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求 封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...

  10. 原生js封装table组件

    使用原生js封装自己的table组件. 思路是通过设置参数,生成对应的表格dom; 源码如下:(初步实现) var XUi = {// table组件tableDom:{common:function ...

最新文章

  1. js表单验证,如果不为空时自动改变提交按钮的背景色
  2. Linux如何编译安装源码包软件
  3. 聊聊jdk http的HeaderFilter
  4. 线性系统的基本理论与运算
  5. mysql 批量删除之大坑
  6. Happy Programming Contest
  7. Semantic Analysis
  8. tp3.2 BIND_MODULE与DEFAULT_MODULE
  9. tftp服务器默认ip怎么修改,tftp服务器的ip地址
  10. 低版本浏览器如何兼容html5,解决Vue兼容低版本浏览器的简单方法
  11. mac下使用python3_mac 下使用python3运行ride
  12. MySQL优化系列3-Linux查看CPU、内存、磁盘、网络信息
  13. 三代测序的简介和原理
  14. 自适应滤波(LMS,RLS)
  15. 如何在Outlook中检查电子邮件的可访问性
  16. 金茂服务通过聆讯:9个月营收超10亿 中化与平安人寿是股东
  17. 计算机网络--数据链路层[微课堂]
  18. 任正非:为什么华为选择与西工大合作,腾讯T4架构师
  19. 12.linux系统中的软件管理
  20. C++11、14、17避免错误

热门文章

  1. Java IO流 - FileInputStream
  2. python网络爬虫--爬取淘宝联盟
  3. LSP分两种:一种是IFS LSP,一种是non IFS LSP.
  4. atan和atan2
  5. Linux的视频分割软件,在Linux系统下编译安装Video Splitter分割视频工具
  6. php estr,eStar斩获世冠总冠军,猫神获FMVP,渡劫虽败但表现惊人
  7. 学校计算机教室张贴些,适合微机室张贴的名言警句
  8. MATLAB实现连带勒让德多项式的绘制
  9. 为什么你的生产效率始终那么低?生产计划排程是关键!
  10. Nmap学习——目标主机、端口、操作系统和服务探测以及输出格式