JsBridge & Android WebView

JsBridge & Android WebView

1. webview

2. loadUrl

3. addJavascriptInterface

4. .setJavaScriptEnabled(true);

5. findViewById

6. 注解 @JavascriptInterface

https://developer.android.com/reference/android/webkit/WebView.html

getSettings

https://developer.android.com/reference/android/webkit/WebView.html#getSettings

https://developer.android.com/reference/android/webkit/WebSettings

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())");

https://developer.chrome.com/multidevice/webview/overview

https://developer.chrome.com/multidevice/webview/gettingstarted

old

webSettings.setJavaScriptEnabled(true);

https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object, java.lang.String)

demos

https://www.journaldev.com/9333/android-webview-example-tutorial

Android WebView 与 js 交互 JsBridge

Android

http://www.imooc.com/learn/983

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);
    }
}

1. 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)
    }
}

1. 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

https://github.com/lzyzsd/JsBridge

https://juejin.im/entry/5c5c40cb518825790c5aecd8

http://wacao.cn/jsbridge.html

https://www.codeproject.com/Tips/1063403/WebView-JS-Bridge-Android

https://www.jianshu.com/p/2ec3f06d6087

https://juejin.im/post/5ac044a8518825557459d603

https://zhuanlan.zhihu.com/p/38046261

refs

JsBridge

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

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

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

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

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

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

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

WebView Scheme / URL Scheme

https://book.flutterchina.club/chapter1/mobile_development_intro.html

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---