Flutter-App-Web

---

English

概述

使用 Vue 3 开发 Flutter 界面，通过 Flutter WebView 离线嵌入 Vue 3 前端，实现 Flutter 嵌入前端 Vue 3，界面完全由 Vue 3 前端开发。

功能

• 使用 Vue 3 开发 Flutter 界面

开发目录结构

• 前端目录: web
• 前端打包路径: dist
• 前端调用安卓 API: androidApi.ts
• 前端调用安卓工具: androidRequest.ts
• 前端接收安卓调用: androidCall.ts
• 开发环境模拟调用: androidMock.ts

编译前端

进入前端目录 web，执行以下命令进行编译：

vite build --emptyOutDir

接口

在WebAppInterface.java中编写安卓接口

前端调用安卓，需要安卓回调的接口，callbackName作为第一个参数不要调换位置。后面为接口入参，可不传

    @JavascriptInterface
    public void exampleMethod(final String callbackName, String param) {
        executorService.execute(() -> {
            //.... 逻辑
            AndroidReplyUtil.postApiResult(
                    mainHandler, webView, callbackName, 
                    ApiResult.success("响应数据", "响应消息"));
        });
    }

前端调用安卓，不需要安卓回调的接口，不需要callbackName。并且在前端可以直接window.Android.xxxx调用

    @JavascriptInterface
    public void exampleMethodNoCallback(String param) {
        //...逻辑
    }

安卓调用前端，发送文本消息。使用AndroidReplyUtil.java.sendMessageToJs

安卓调用前端，发送json对象。使用AndroidReplyUtil.java.sendObjectToJs

仅作参考，有更好的写法。