安卓与Vue交互—————WebView加载Vue App返回键的控制

相信很多安卓小伙伴都做过安卓调用JavaScript方法，或者JavaScript调用安卓方法，但是这一套如果搬到Vue-cli里面该怎么实现呢？今天主要用重写安卓返回键来控制Vue app路由这个例子来讲解。

首先为了让安卓能调用到JS的方法，我们需要把要被调用的方法挂载到window节点上面去，让安卓/IOS的webview能够找到这个方法：

首先创建一个JS文件：



然后再将这个JS文件挂载到Vue上去，找到main.js,将nativeJsBridge挂载上去：



然后就可以开始编写提供给移动端使用的JS方法了，在NativeJSBridge.js中编写：

window.back=function(){
history.go(-1)
}

下面在就是安卓干的事情了，附上安卓完整代码，其实就是重写返回键（onBackPress） java：

import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

private WebView wv;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wv = (WebView) findViewById(R.id.wv);
WebSettings webSettings = wv.getSettings();
webSettings.setJavaScriptEnabled(true);
// "file:///android_asset/index.html"
wv.addJavascriptInterface(new JavaScriptInterface(), "android");
wv.loadUrl("http://192.168.1.179:8080");

}

private void androidJSBridge(String methodName) {
// Android版本变量
final int version = Build.VERSION.SDK_INT;
// 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
String url = "javascript:window." + methodName + "()";
if (version < 18) {

wv.loadUrl(url);
} else {

wv.evaluateJavascript(url, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
}

@Override
public void onBackPressed() {
// super.onBackPressed();
androidJSBridge("back");
}

public class JavaScriptInterface {

@JavascriptInterface
public void finish(String ssss) {
MainActivity.this.finish();
}
}
}
xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF">

<WebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>

</RelativeLayout>
然后你发现返回键没法关闭APP了对不对。。。下回再讲。