Flutter与JS的优雅共舞：在Flutter应用中无缝集成ArcBlock JS SDK

{
  "name": "didmail-js-bundler",
  "version": "1.0.0",
  "description": "Bundles ArcBlock JS SDK for Flutter app",
  "private": true,
  "scripts": {
    "build": "webpack --mode=production"
  },
  "dependencies": {
    "@arcblock/did-sdk": "^1.18.29",
    "@arcblock/did-wallet": "^1.18.29"
  },
  "devDependencies": {
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4"
  }
}

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    // 魔法发生的地方：将打包好的 bundle 文件直接输出到 Flutter 的 assets 目录！
    path: path.resolve(__dirname, '..', 'assets', 'js'),
    filename: 'arc-sdk.bundle.js',
    // 将我们导出的模块挂载到全局 ArcSDK 对象上，方便 Dart 调用
    library: 'ArcSDK',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
};

// 导入你需要的 ArcBlock SDK 功能
const { fromMnemonic, fromSecretKey } = require('@arcblock/did-wallet');

// 导出这些函数，以便 Dart 可以通过全局的 'ArcSDK' 对象访问
module.exports = {
  generateWalletFromMnemonic: (mnemonic) => {
    try {
      const wallet = fromMnemonic(mnemonic);
      // 返回一个可被序列化为 JSON 的普通对象
      return {
        address: wallet.address,
        publicKey: wallet.publicKey,
        privateKey: wallet.secretKey,
        mnemonic: wallet.mnemonic,
      };
    } catch (e) {
      throw new Error(`Failed to generate wallet: ${e.message}`);
    }
  },
  // 在这里导出其他你需要的函数
};

# 1. 进入 JS 项目目录
cd didmail_app/js_bundler

# 2. 安装所有 JS 依赖
npm install

# 3. 执行构建
npm run build

flutter pub add flutter_js
flutter pub add get_it # 用于服务管理

import 'package:flutter/services.dart';
import 'package:flutter_js/flutter_js.dart';

class ArcBlockJsService {
  late final JavascriptRuntime _runtime;

  ArcBlockJsService._(this._runtime);

  static Future<ArcBlockJsService> init() async {
    final runtime = getJavascriptRuntime();

    // 注入 console.log，用于调试 JS 代码
    runtime.onMessage('console', (args) {
      print('[JS Console]: ${args.join(' ')}');
      return '';
    });

    // 加载我们打包好的 SDK
    final sdkScript = await rootBundle.loadString('assets/js/arc-sdk.bundle.js');
    await runtime.evaluateAsync(sdkScript);
    
    return ArcBlockJsService._(runtime);
  }

  Future<Map<String, dynamic>> generateWalletFromMnemonic(String mnemonic) async {
    // 注意：JS 代码里调用的是 ArcSDK.generateWalletFromMnemonic
    final jsCode = "ArcSDK.generateWalletFromMnemonic('$mnemonic')";

    final result = await _runtime.evaluateAsync(jsCode);
    if (result.isError) {
      throw Exception('JS execution failed: ${result.stringResult}');
    }
    
    return Map<String, dynamic>.from(result.rawResult);
  }
  
  void dispose() {
    _runtime.dispose();
  }
}

// ...
import 'package:didmail_app/core/service_locator.dart';

void main() async {
  // ...
  await setupServiceLocator(); // 在这里初始化所有服务
  runApp(const MyApp());
}

// ...
import 'package:didmail_app/core/service_locator.dart';
import 'package:didmail_app/services/arcblock_js_service.dart';

class AuthViewModel extends ChangeNotifier {
  Future<void> createAccount(...) async {
    final arcblockService = sl<ArcBlockJsService>(); // 从服务定位器获取实例
    final wallet = await arcblockService.generateWalletFromMnemonic(mnemonic);
    // ... 后续逻辑
  }
}