All Projects → Easy-Martin → JSBridge

Easy-Martin / JSBridge

Licence: other
JSBridge与Native通信,对Web端调用进行封装

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to JSBridge

animaris
Documentation and Mock for JSBridge base on ThinkJS & MongoDB & React & Antd.
Stars: ✭ 28 (+47.37%)
Mutual labels:  jsbridge
ZJsBridge
一套完整的native-bridge-web协议与实现,清晰规范的开发Hybrid App
Stars: ✭ 21 (+10.53%)
Mutual labels:  jsbridge
autojs-webView
autojs的webView实现,支持初始化脚本注入、jsBridge两端互调
Stars: ✭ 38 (+100%)
Mutual labels:  jsbridge
QuickWebKit
A great & strong plugin based WebViewController. 一款基于插件的 WebView 视图控制器,您可以基于它设计您的浏览器插件,然后像积木一样来组装它们。
Stars: ✭ 29 (+52.63%)
Mutual labels:  jsbridge
AppHostExample
a web-based project embeded AppHost
Stars: ✭ 16 (-15.79%)
Mutual labels:  jsbridge
SwiftJSBridge
SwiftJSBridge is a handy JavaScript Bridge, written in Swift, support WKWebView and UIWebView
Stars: ✭ 29 (+52.63%)
Mutual labels:  jsbridge
WKBridge
Bridge for WKWebView and JavaScript
Stars: ✭ 70 (+268.42%)
Mutual labels:  jsbridge
vue-js-bridge
vue-js-bridge for Vue.js
Stars: ✭ 41 (+115.79%)
Mutual labels:  jsbridge
FMWebViewJavascriptBridge
FMWebViewJavascriptBridge inspired by WebViewJavascripBridge and react native
Stars: ✭ 29 (+52.63%)
Mutual labels:  jsbridge
JsBridge-WebViewJavascriptBridge-Sample
iOS JsBridge Solution by WebViewJavascriptBridge
Stars: ✭ 16 (-15.79%)
Mutual labels:  jsbridge
Vue-JsBridge
JsBridge for Vue
Stars: ✭ 15 (-21.05%)
Mutual labels:  jsbridge
Jspatch
JSPatch bridge Objective-C and Javascript using the Objective-C runtime. You can call any Objective-C class and method in JavaScript by just including a small engine. JSPatch is generally used to hotfix iOS App.
Stars: ✭ 11,337 (+59568.42%)
Mutual labels:  jsbridge
Dsbridge Ios
🌏 A modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native.
Stars: ✭ 1,673 (+8705.26%)
Mutual labels:  jsbridge
Dsbridge Android
🌎 A modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native.
Stars: ✭ 3,239 (+16947.37%)
Mutual labels:  jsbridge

JSBridge

JSBridge交接与Native通信是Web端调用进行封装,之前一直做移动web开发,项目需要webview+native的混合模式所以需要一些web和native的交互,由于JSBridge Native端作者提供web调用方式太奇怪,也跟web开发代码不耦合,所以我对web调用方式进行封装,针对IOS和Android做了兼容,方便在web开发时进行调用。

方法添加示例

JSBridge.prototype.getUserInfo = function(data, callback) {
        this._init(function(bridge) {
            this.__init__(bridge);
            bridge.callHandler('getUserInfo', data, function(response) {
                if(typeof response === 'object'){
                    callback(response)
                }else{
                    callback(JSON.parse(response));
                }
            })
        }.bind(this))
    };

这是在JSBridge.js中写的一个方法,当添加新方法的时候只需要在JSBridge.js中提示的位置复制上面代码, 修改JSBridge.prototype.getUserInfo为 JSBridge.prototype.yourMethod(例如JSBridge.prototype.setTitle等等) 修改bridge.callHandler的第一个参数(与Native端定义的方法名称)当然也可以把callHandler改成registerHandler具体可以根据自己的业务需求,不过一般用callHandler(有web工程师主动调用Native方法)

注意事项

如果需要修改Native定义的路径,可以在JSBridge.js中JSBridge.prototype._init下

WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';

JSBridge.prototype._init是初始化方法

JSBridge.prototype._init_ 这个安卓下必须调用,应该也是初始化的一部分(不懂原生的东西)

你也可以在Vue等框架下调用

import JSBridge from './JSBridge';
var JSBridge = require('./JSBridge')

Vue我比较熟悉,可以单独写个插件利用Vue.use挂载到实例上这样在任何组件都能调用,我就是这么干的

参考链接

Android JSBridge
IOS JSBridge

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].