三步搞定：Vue.js调用Android原生方法

谁践踏了优雅 2022-05-30 00:27 264阅读 0赞

第一步： Android对Js的接口，新建AndroidInterfaceForJs.js

import android.content.Context;
    import android.os.Build;
    import android.os.Handler;
    import android.os.Looper;
    import android.support.annotation.RequiresApi;
    import android.util.Log;
    import android.webkit.JavascriptInterface;
    import android.webkit.ValueCallback;
    import android.widget.Toast;
    
    import com.just.agentweb.AgentWeb;
    import com.yidumedical.ui.activity.PAWebActivity;
    
    /** * Created by shiby on 2018/1/24. */ public class AndroidInterfaceForJS {
    
    
        private Handler deliver = new Handler(Looper.getMainLooper());
        private AgentWeb agent;
        private Context context;
    
        public AndroidInterfaceForJS(AgentWeb agent, Context context) {
            this.agent = agent;
            this.context = context;
        }
    
    
    
        @JavascriptInterface
        public void callAndroid(final String msg) {
            deliver.post(new Runnable() {
                @Override
                public void run() {
                    Log.i("Info", "main Thread:" + Thread.currentThread());
                    Toast.makeText(context.getApplicationContext(), "" + msg, Toast.LENGTH_LONG).show();
                }
            });
            Log.i("Info", "Thread:" + Thread.currentThread());
    
        }
    
    }

第二步： 给WebView中的window注入对象（例子使用的是AgentWeb）

private void init(){
        mAgentWeb = AgentWeb
                .with(this)//传入Activity or Fragment
                .setAgentWebParent(mLinearLayout, new LinearLayout.LayoutParams(-1, -1))//传入AgentWeb 的父控件 ，如果父控件为 RelativeLayout ， 那么第二参数需要传入 RelativeLayout.LayoutParams ,第一个参数和第二个参数应该对应。
                .useDefaultIndicator()// 使用默认进度条
                .defaultProgressBarColor() // 使用默认进度条颜色
                .createAgentWeb()//
                .ready()
                .go(baseURL);
        //注入对象
        mAgentWeb.getJsInterfaceHolder().addJavaObject("android",new AndroidInterfaceForJS(mAgentWeb,this.getApplicationContext()));
        AgentWebSettings agentWebSettings = mAgentWeb.getAgentWebSettings();
        agentWebSettings.getWebSettings().setDomStorageEnabled(true);
    }

注入对象：

//注入对象
        mAgentWeb.getJsInterfaceHolder().addJavaObject("android",new AndroidInterfaceForJS(mAgentWeb,this.getApplicationContext()));

第三步：在Vue里面直接调用方法（简单粗暴法）：

window. android. callAndroid( '调用成功，耶！！！')

考虑到项目的可维护性，一般不这样写。

优雅法：

新建app.js

const android = window. android

export \{ android \}

将 window.android存在该模块，方便更改

然后在需要的.js或者.vue文件中，导入app模块，然后使用

import \{ android\} from '../app'