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"> ...
随机推荐
- 洛谷 P1338 末日的传说
题目链接:https://www.luogu.org/problemnew/show/P1338 题目描述 只要是参加jsoi活动的同学一定都听说过Hanoi塔的传说:三根柱子上的金片每天被移动一次, ...
- C# 互通操作 (二)基础知识1
[DllImport("user32.dll", EntryPoint = "MessageBox")] public static extern int De ...
- NOVO SOP (SOP简介及历史)
SOP(Standard Operation Procedure),标准作业程序. 一.什么是SOP(标准作业程序) 所谓SOP,是 Standard Operation Procedure三个单词中 ...
- ajax 与jsp servlet
jQuery的Ajax实现异步传输List.Map_GOOD 分类: JAVA WEB前端2013-08-29 18:35 6296人阅读 评论(0) 收藏 举报 javajquerylistjson ...
- 如何在线更新visual studio installer2017
更新最后100M文件需要开启全局代理才能成功,不然需要等2个小时才能成功!墙太深了..
- Runtime常用的几个场景
1.给分类动态添加属性 在FDFullscreenPopGesture中给UIViewController的分类里有这么一个属性: @property (nonatomic, copy) _FDVie ...
- #实验三 敏捷开发与XP实践---实验报告
一.实验三 敏捷开发与XP实践-1 1.实验要求 -实验三 敏捷开发与XP实践 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse的内容替换成I ...
- 学习Acegi应用到实际项目中(11)- 切换用户
在某些应用场合中,可能需要用到切换用户的功能,从而以另一用户的身份进行相关操作.这一点类似于在Linux系统中,用su命令切换到另一用户进行相关操作. 既然实际应用中有这种场合,那么我们就有必要对其进 ...
- VS2017离线安装入门与出家
重做系统,并且VS2017也发布有一段时间了,可以试试了. 于是网上搜了下,离线安装要下载他的安装工具. https://www.visualstudio.com/zh-hans/downloads/ ...
- go 切片的创建方式
切片的创建方式现知道的有下面几种方式,切片为指针类型,从数组中得到的切片修改元素值时,原数组也会发生变化(数组为非指针类型) package main import "fmt" f ...