Flutter跨平台项目Web端调用指定JS加密库的实现示例求助

1. 项目配置 #

1.1 依赖安装 #

在pubspec.yaml中添加js包依赖：

dependencies:
  flutter:
    sdk: flutter
  js: ^0.6.7 # 适配最新版本即可

1.2 Web环境引入JS库 #

在web/index.html的<head>标签内引入@expressms/smartapp-bridge库。可选择本地npm包或CDN方式：

<!-- 方式1：本地npm包引入（需先执行npm install @expressms/smartapp-bridge） -->
<script src="node_modules/@expressms/smartapp-bridge/dist/smartapp-bridge.min.js"></script>

<!-- 方式2：CDN引入 -->
<script src="https://unpkg.com/@expressms/smartapp-bridge@latest/dist/smartapp-bridge.min.js"></script>

2. Dart侧JS桥封装 #

创建lib/web_bridge.dart文件，封装JS库的API及回调逻辑：

@JS()
library web_bridge;

import 'dart:async';
import 'package:js/js.dart';
import 'package:js/js_util.dart' as js_util;

// 对应JS库导出的核心类（需根据实际库导出名调整）
@JS('SmartAppBridge')
abstract class WebBridge {
  external factory WebBridge();
  external void enableLogs();
  external void addGlobalListener();
  
  // 封装加密方法，适配JS库的回调式API
  external void encrypt(dynamic requestData, Function(String encryptedData) callback);
  
  // 封装解密方法，适配JS库的回调式API
  external void decrypt(String encryptedResponse, Function(dynamic decryptedData) callback);
}

// 将JS回调转为Dart Future，简化异步调用
Future<String> encryptRequest(dynamic requestData) async {
  final completer = Completer<String>();
  final bridge = WebBridge();
  bridge.encrypt(requestData, allowInterop((encryptedData) {
    completer.complete(encryptedData);
  }));
  return completer.future;
}

Future<dynamic> decryptResponse(String encryptedResponse) async {
  final completer = Completer<dynamic>();
  final bridge = WebBridge();
  bridge.decrypt(encryptedResponse, allowInterop((decryptedData) {
    completer.complete(decryptedData);
  }));
  return completer.future;
}

3. 跨平台API服务封装 #

创建lib/api_service.dart，实现跨平台请求逻辑，仅Web端走JS加解密：

import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'web_bridge.dart';

class ApiService {
  final String baseUrl = 'https://your-api-domain.com';

  Future<dynamic> sendRequest(String endpoint, Map<String, dynamic> requestData) async {
    if (kIsWeb) {
      // Web端：先加密请求数据
      final encryptedData = await encryptRequest(requestData);
      
      // 发送加密后的请求
      final response = await http.post(
        Uri.parse('$baseUrl$endpoint'),
        body: encryptedData,
        headers: {'Content-Type': 'application/json'},
      );
      
      // 解密响应数据
      final decryptedData = await decryptResponse(response.body);
      return decryptedData;
    } else {
      // Android/iOS端：直接发送原始请求
      final response = await http.post(
        Uri.parse('$baseUrl$endpoint'),
        body: jsonEncode(requestData),
        headers: {'Content-Type': 'application/json'},
      );
      return jsonDecode(response.body);
    }
  }
}

4. 主函数初始化与使用示例 #

修改lib/main.dart，初始化WebBridge并调用API服务：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:medlike/app.dart';
import 'package:flutter/foundation.dart';
import 'web_bridge.dart';
import 'api_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

  // Web端初始化Bridge
  if (kIsWeb) {
    final bridge = WebBridge();
    bridge.enableLogs();
    bridge.addGlobalListener();
    print('Web Bridge initialized');
  }

  runApp(App());
}

// 在页面中使用API服务示例
class ExamplePage extends StatelessWidget {
  final ApiService apiService = ApiService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              final response = await apiService.sendRequest(
                '/api/user',
                {'id': 123, 'name': 'Test User'},
              );
              print('API Response: $response');
            } catch (e) {
              print('Request Error: $e');
            }
          },
          child: Text('Send Encrypted Request'),
        ),
      ),
    );
  }
}

关键注意事项 #

• 请根据@expressms/smartapp-bridge实际的API方法名、参数结构调整WebBridge类的定义。
• 使用allowInterop确保Dart函数能被JS正确识别，异步逻辑通过Completer转为Dart Future简化调用。
• 跨平台分支通过kIsWeb区分，保证Android/iOS端代码不受Web逻辑影响。

内容的提问来源于stack exchange，提问作者Andrey Makarov