安卓与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() {
        @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:

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