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

第一步： 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

constandroid =window.android
export {android }

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

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

import {android}from'../app'try {android.callAndroid('调用成功，耶！！！')}catch (e) {console.log('出现错误, 如果在非android环境下访问, 出现该警告是正常的.')}

更多相关文章

随机推荐