native_bridge

Description:

native bridge

NativeBridge #

NativeBridge is a plugin based on webview_flutter that realizes JS intermodulation capability between App and H5.
Language: English | 简体中文
Advantages of NativeBridge #

Support the H5 to call the JSBridge method on the App, and can directly get the return value.
Support App call H5 JSBridge method, and can directly get the return value.
It is simple to use and extend the NativeBridgeController class after integration to support the JavaScript calling ability of App.

NativeBridge dependency #
Add dependencies in pubspec.yaml:
dependencies：
native_bridge: ^latest_version
copied to clipboard
Use of NativeBridge #

extend NativeBridgeController

class AppBridgeController extends NativeBridgeController {
AppBridgeController(WebViewController controller) : super(controller);

/// Define the JSChannel name
@override
get name => "nativeBridge";

@override
Map<String, Function?> get callMethodMap => <String, Function?>{
// Version number
"getVersionCode": (data) async {
return await AppUtil.getVersion();
},
...
};
}
copied to clipboard

Init AppBridgeController.

// Init WebViewController
_controller = WebViewController()
..enableZoom(true)
..loadFlutterAsset('assets/test/index.html');
// Init AppBridgeController
_appBridgeController = AppBridgeController(_controller);
copied to clipboard

Add the receiveMessage method to H5.

function receiveMessage(jsonStr) {
if(jsonStr != undefined && jsonStr != "") {
let data = JSON.parse(JSON.stringify(jsonStr));
window.jsBridgeHelper.receiveMessage(data);
}
}
copied to clipboard
一、H5 get the value of the App

Define method names and Function calls in the App's callMethodMap, for example, to get the App version number:

// 版本号
"getVersionCode": (data) async {
return await AppUtil.getVersion();
}
copied to clipboard

Call the corresponding method in H5:

async function getVersionName() {
// 获取 App 的值
let appVersionName = await window.jsBridgeHelper.sendMessage("getVersionName", null);
}
copied to clipboard
二、App gets the value of H5
There are two ways for the App to get the value of H5:


AppBridgeController's sendMessage method.
// is home page
bool? isHome = await _appBridgeController.sendMessage(Message(api: 'isHome'));
copied to clipboard


Call AppBridgeController runJavaScriptReturningResult method.
// get UserAgent
var userAgent = await _appBridgeController.runJavaScriptReturningResult('getUserAgent()');
copied to clipboard


The difference is the first sends a message to H5 the WebViewController's runJavaScript and waits for H5 to reply to the message. The last user WebViewController runJavaScriptReturningResult method directly to obtain the return value.
The first is more applicable and supports a variety of business scenarios, the last is more suitable for obtaining Window-related properties.
Related article #

Series 1：NativeBridge：基于webivew_flutter的JSBridge插件
Series 2：NativeBridge：实现原理解析
Series 3：App实现JSBridge的最佳方案
Series 4：NativeBridge：我在Pub上发布的第一个插件