关于android和vue.js交互

本文使用webview框架AgentWeb
使用的Vue版本为vue3
使用的android sdk版本为33
从android 11 开始想要访问sd卡下的数据需要权限

android.permission.MANAGE_EXTERNAL_STORAGE

权限请求方法为

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R && !Environment.isExternalStorageManager()) {
      val requestPermission = Intent()
      requestPermission.action = Settings.ACTION_MANAGE_ALL_FILES_ACCESS_PERMISSION
      startActivity(requestPermission)
 } else {
      //todo 已有权限，正常操作
}

Vue调用Android

使用以下方法注册接口

//vue调用android方法使用window.关键字.方法名(参数)
//注册方法中，第一个参数为关键字，后一个参数为接口类实现，接口类时间见下方
agentWeb.jsInterfaceHolder.addJavaObject("关键字", AndroidJSInterface(agentWeb))

/**
*	接口类实现必须加 @JavascriptInterface 注解否则无法生效
* 	如果vue调用android方法有回调目前测得返回String可以正常接收，返回实体会出现undefined情况
* 	vue中直接使用 let 返回值 = window.关键字.方法名(参数)接收返回值
*/
@JavascriptInterface
public String toast(String msg) {
	//todo 需要的操作
    return "";
}

Android调用Vue

根据Android与Vue的交互的方法示例这篇文章最后中提到的互调的坑中得知因为Vue的问题Android调用Vue方法需要在window中暴露方法名，所以我这边的设置如下：

/**
* 在mounted中暴露出需要被调用的方法名
*/
mounted(){
   window['需要被Android调用的方法名'] = (方法参数)=>{
      如果不需要返回则这边直接调用vue中自己的方法
      如果存在返回值则在这边直接return 返回值，目前来看返回值类型使用String比较稳妥
   }
},

android这边调用方式如下：

agentWeb.getJsAccessEntrace().callJs("javascript:方法名(参数)", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String s) {
                //vue执行方法之后的返回值
                //如果没有则可以不实现
            }
        });

以上就是目前能正常使用的Android与Vue的交互方式，Vue和Android WebView的版本变化可能导致本文方式无效。