JsBridge & Android WebView

JsBridge & Android WebView JsBridge, Android , WebView, js, app, ios, Scheme URL

JsBridge & Android WebView

2. webview
3. loadUrl
4. addJavascriptInterface
5. .setJavaScriptEnabled(true);
6. findViewById
7. 注解 @JavascriptInterface

​

new

 class JsObject {
@JavascriptInterface
public String toString() { return "injectedObject"; }
 }
webview.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsObject(), "injectedObject");
webView.loadData("", "text/html", null);
webView.loadUrl("javascript:alert(injectedObject.toString())");

​

old

​​webSettings.setJavaScriptEnabled(true);​​

​​​​

demos

​

Android WebView 与 js 交互 JsBridge

Android

​

public class MainActivity extends AppCompatActivity{
private WebView webView;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWidgets(savedInstanceState);
    }
private void initWidgets(Bundle savedInstanceState) {
webView = findViewById(R.id.webview);
textView = findViewById(R.id.textview);

// WebView 开启对 js 加载的支持
webView.getSettings().setJavaScriptEnabled(true);
    }
}

2. webview

public class MainActivity extends AppCompatActivity{
private WebView webView;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWidgets(savedInstanceState);
    }
private void initWidgets(Bundle savedInstanceState) {
webView = findViewById(R.id.webview);
textView = findViewById(R.id.textview);

// WebView 开启对 js 加载的支持
webView.getSettings().setJavaScriptEnabled(true);

// WebView 上添加 js 方法的接口实现类
webView.addJavascriptInterface(new jsMethodsObjectInterface(), "jsMethodsObjectName"n)
    }
}

3. js interface

public class JsMethodsObjectInterface{
private static final String TAG = "JsMethodsObjectInterface";

@JavascriptInterface
public void setInputValue(String value){
Log.d(TAG, msg: "input value =" + value);
    }
}

JSbridge 通信原理

jsbridge android

​

refs

JsBridge

原生开发可以访问平台所有功能，而混合开发中，H5 代码是运行在 WebView 中，

而 WebView 实质上就是一个浏览器内核，其 JavaScript 依然运行在一个权限受限的沙箱中，

所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。

所以，对于 H5 不能实现的功能，都需要原生去做。

而混合框架一般都会在原生代码中预先实现一些访问系统能力的 API， 然后暴露给 WebView 以供 JavaScript调用;

这样一来，WebView 就成为了 JavaScript与原生 API之间通信的桥梁，主要负责 JavaScript与原生之间传递调用消息;

而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，我们把依赖于 WebView 的用于在 JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为 WebView JavaScript Bridge, 简称 JsBridge，它也是混合开发框架的核心。

WebView Scheme / URL Scheme