android和Vue交互

最近开发一个项目，原本是用的RN开发，后来打算三端统一，后来决定用VUE开发，所以涉及到一些Vue和原生交互的地方，做一下笔记~~

 

先直接上Vue代码

这是一个个人中心完整VUE界面的代码，包括样式，点击事件，重点看这里就行

vue和原生交互的原理和Html里面js和原生交互一样，都是通过js代码来实现，都需要把原生方法挂载到window上面

所以这里,这里的params是需要传递给原生的数据，JSON.stringify(params)的作用是，必须把数据转为json格式，原生才能收到，否则接收不到，其中callAndroid()是原生的方法，window后面的android是原生代码里面申明的一个标志

原生代码如下

public class JsBridgeForMain {
    private static final String TAG = "JsBridgeForMain";
    private Handler deliver = new Handler(Looper.getMainLooper());
    private AgentWeb agent;
    private Context context;

    private OnNativeDataGetInterface mOnNativeDataGetInterface;

    public JsBridgeForMain(AgentWeb agent, Context context) {
        this.agent = agent;
        this.context = context;
    }

    public JsBridgeForMain(AgentWeb agent, Context context, OnNativeDataGetInterface onNativeDataGetInterface) {
        this.agent = agent;
        this.context = context;
        mOnNativeDataGetInterface = onNativeDataGetInterface;
    }

    @JavascriptInterface
    public void showMsg(final String obj) {
        Log.e(TAG, "showMsg: " + obj);
    }

    @JavascriptInterface
    public void jumpAndroid(final String obj) {
        Log.e(TAG, "jumpAndroid: " + obj);
        final Map params = AppUtils.getMap(obj);
        assert params != null;
        context.startActivity(new Intent(context, OcrCallbackActivity.class)
                .putExtra(PrefKeys.EXTRA_URL, params.get("href").toString()));
    }

    @JavascriptInterface
    public void callAndroid(final String obj) {
        deliver.post(new Runnable() {
            @Override
            public void run() {
                final Map params = AppUtils.getMap(obj);
                assert params != null;
                Log.e(TAG, "name: " + params);
                if ("OCR".equals(params.get("name"))) {
                    Gson gson = new Gson();
                    String jsonString = gson.toJson(params.get("data")).replace("\\", "");
                    jsonString = jsonString.substring(1, jsonString.length() - 1);
                    OcrEntity ocrEntity = gson.fromJson(jsonString, OcrEntity.class);
                    OcrCallbackActivity.msgId = params.get("msgId").toString();
                    if (mOnNativeDataGetInterface != null)
                        mOnNativeDataGetInterface.onDataGot(ocrEntity);
                    Log.e(TAG, "ocrEntity: " + params);
                }
                if ("phoneContact".equals(params.get("name"))) {
                    OcrCallbackActivity.msgId = params.get("msgId").toString();
                    mOnNativeDataGetInterface.onAddressCalled();
                }
                if ("GPS".equals(params.get("name"))){
                    OcrCallbackActivity.msgId = params.get("msgId").toString();
                    mOnNativeDataGetInterface.onGpsCalled();
                }
                if ("GPSStatus".equals(params.get("name"))){
                    OcrCallbackActivity.msgId = params.get("msgId").toString();
                    mOnNativeDataGetInterface.onGpsStatus();
                }
            }
        });
    }
}

其中原生调用JS方法代码如下

 Map contactMap = new HashMap<>();
                contactMap.clear();
                contactMap.put("phone", phoneNum);
                contactMap.put("msgId", msgId);
                contactMap.put("name", contactName);
                Gson gson = new Gson();
                String contactPersonData = gson.toJson(contactMap);
                agentWeb.getJsAccessEntrace().quickCallJs("webViewBridge.callback_('" + contactPersonData + "')");

我使用的一个webview的中间件名字叫做AgentWeb,具体使用方法可以看github，

这里的

webViewBridge.callback_('" + contactPersonData + "')" 为js中的方法，contactPersonData 为原生的json数据

webViewBridge.callback_是我们自己封装的一个vue的连接桥可以忽略也可以吧这部分直接改成js里具体的方法比如前面vue代码中method里面的任意一个方法