Communication between app and webview through JsBridge (Vue version)
1. Problems
Now many apps are hybrid apps with nested h5 pages. The way to achieve this is to add a webview to the app, and add the project address of h5 to the webview. Then sometimes we need to obtain device id, location and other information, which cannot be obtained by h5. , At this time, it is necessary for the app to establish a communication with h5 to realize information transmission. We can use JsBridge to realize this requirement.
Two, JsBridge
Through JsBridge, the Web side can call the Java interface of the Native side, and the Native side can also call the JavaScript interface of the Web side through JsBridge to realize mutual calls.
Learn about JsBridge - https://github.com/lzyzsd/JsBridge
3. Android combined with JsBridge
1. Create app project
Select a blank template
Select the Java environment
Note: Synchronizing the project and the Gradle file here may require over-the-wall to speed up.
2. Modify the build.gradle file in the root directory
Add to
maven {
url "https://jitpack.io" }
Note: Remember to synchronize the project and Gradle files after modification here (Sync Project with Gradle Files)
3. Modify the build.gradle file in the app directory
Add to
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
4. Modify the AndroidManifest.xml file
Network access permission, when the mobile phone needs to access the network, you need to add this permission in the configuration file.
<uses-permission android:name="android.permission.INTERNET" />
usesCleartextTraffic
true: whether to use clear text transmission, that is, you can use http
false: android 9.0 uses https by default
android:usesCleartextTraffic="true"
5. Modify the activity_main.xml file
File path: app/src/main/res/layout/activity_main.xml
Add page layout and webview loading components
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/activity_jsbridge_textViewtest"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#FFBB86FC"
android:text="app通过JsBridge调用js（点击）"
android:textColor="#FFFFFF"
android:layout_margin="20dp"
android:gravity="center"/>
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/activity_jsbridge_bridgewebview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.github.lzyzsd.jsbridge.BridgeWebView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
6. Modify the MainActivity.java file
File path: app/src/main/java/com.example/MainActivity.java
Add event
Note: set the h5 project address in bridgeWebView.loadUrl
package com.example.vuejsbridge;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.BridgeWebViewClient;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import android.webkit.SslErrorHandler;
import android.webkit.WebView;
import android.net.http.SslError;
public class MainActivity extends AppCompatActivity {
private TextView textViewTest;
private BridgeWebView bridgeWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
/**
* 初始化各种View
*/
private void initView() {
textViewTest=findViewById(R.id.activity_jsbridge_textViewtest);
bridgeWebView=findViewById(R.id.activity_jsbridge_bridgewebview);
bridgeWebView.setWebViewClient(new BridgeWebViewClient(bridgeWebView) {
// 修复 页面还没加载完成，注册代码还没初始完成，就调用了callHandle
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed(); // 接受所有网站的证书
}
});
bridgeWebView.getSettings().setBuiltInZoomControls(true); //显示放大缩小 controler
bridgeWebView.getSettings().setSupportZoom(true); //可以缩放
bridgeWebView.getSettings().setDomStorageEnabled(true);//开启DOM
bridgeWebView.loadUrl("https://xxxxxxxxxxxxx/");//h5地址
//Android 通过 JSBridge 调用 JS
textViewTest.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bridgeWebView.callHandler("monitorTestData", "h5你好，这是我Android主动发送数据给你，请你接收一下！！！（监听monitorTestData）", new CallBackFunction() {
@Override
public void onCallBack(String data) {
Toast.makeText(MainActivity.this, data, Toast.LENGTH_LONG).show();
}
});
}
});
//JS 通过 JSBridge 调用 Android
bridgeWebView.registerHandler("getAppData", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
//JS传递给Android
Toast.makeText(MainActivity.this, data, Toast.LENGTH_LONG).show();
//Android返回给JS的消息
function.onCallBack("h5你好，这是你调用我Android的方法，现在我回调给你哟（回调getAppData）");
}
});
}
}
7. Run it on the real machine
4. Combining with Vue to achieve the effect
Communication between app and webview through JsBridge (Vue version) The interface JS
running out calls Android through JSBridge Android calls JS through JSBridge
