Flutter AMD模块集成插件amdjs的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter AMD模块集成插件amdjs的使用

描述

AMDJS 是一个用于在 Dart 和 JavaScript 之间实现异步模块定义 (AMD) 互操作性的包。当使用依赖于 AMD（如 RequireJS）加载的 JS 库时，您需要调用 JS 函数 require() 来正确加载库，否则可能会出现不可预测的行为。此 Dart 包可以帮助透明地加载 JS 库，使用原生的 AMD require() 或者只是将 <script src="library.js"></script> 添加到 DOM 中。

使用方法

简单使用示例

import 'package:amdjs/amdjs.dart';

// 运行在浏览器环境中:
void main() async {
  
  // 检查 AMD 是否已经加载到 JS 上下文中（通常是在 DOM 中已经加载了 RequireJS 的情况下）
  bool inNativeMode = AMDJS.isNativeImplementationPresent();
  
  // 加载 JQuery
  bool okJQuery = await AMDJS.require('jquery', '/js/jquery.js', globalJSVariableName: 'jquery');
  
  // Bootstrap 推荐将 script 标签添加到 body 内部。参数 `addScriptTagInsideBody` 将仅在模拟 AMD 时使用，并且在原生模式下会被忽略。
  bool okBootstrap = await AMDJS.require('bootstrap', '/js/bootstrap.js', addScriptTagInsideBody: true);
  
  if (okJQuery && okBootstrap) {
    print('Bootstrap 正确加载 (JQuery 第一，Bootstrap 第二).');
  }
}

常见问题：使用 Dart 加载 JS 库

由于 Dart 特别是在开发模式下，会使用 AMD（RequireJS 或类似工具）来加载其包，因此任何其他通过 <script src="library-x.js"></script> 插入的 JS 库可能无法正确加载。此包 (amdjs) 可以帮助识别并正确加载这些库。

功能与错误报告

请在 issue tracker 提交功能请求和错误报告。

完整示例代码

下面是一个完整的示例代码，展示了如何在 Flutter Web 项目中使用 amdjs 包来加载外部的 JS 库。

import 'package:flutter/material.dart';
import 'package:amdjs/amdjs.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 检查是否为原生 AMD 模式
  bool isNativeMode = AMDJS.isNativeImplementationPresent();
  print("Is Native AMD Mode: $isNativeMode");

  // 尝试加载 jQuery
  bool jqueryLoaded = await AMDJS.require('jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', globalJSVariableName: 'jQuery');
  print("jQuery Loaded: $jqueryLoaded");

  // 尝试加载 Bootstrap
  bool bootstrapLoaded = await AMDJS.require('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', addScriptTagInsideBody: true);
  print("Bootstrap Loaded: $bootstrapLoaded");

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AMD Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AMD Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'This example demonstrates loading external JS libraries using the amdjs package.',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

该示例首先确保初始化了 Flutter 的绑定，然后尝试加载 jQuery 和 Bootstrap，最后启动了一个简单的 Flutter 应用程序，显示了一条消息，表示这是一个展示如何使用 amdjs 包加载外部 JS 库的例子。


更多关于Flutter AMD模块集成插件amdjs的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter AMD模块集成插件amdjs的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成AMD（Asynchronous Module Definition）模块，你可以使用amdjs插件来加载和管理这些模块。虽然Flutter本身主要使用Dart语言，并且原生不支持JavaScript直接运行，但你可以通过一些技术桥接（如WebView或平台通道）来实现这一需求。

以下是一个基本的示例，展示如何在Flutter中通过WebView加载AMD模块。为了简化，我们将使用flutter_webview_plugin插件，但请注意，这种方法依赖于WebView的JavaScript执行环境。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_webview_plugin依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.4.0  # 请检查最新版本号

2. 初始化WebView

然后，在你的Flutter应用中初始化WebView并加载AMD模块。以下是一个简单的例子：

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AMD Module Integration'),
        ),
        body: WebViewExample(),
      ),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  final flutterWebviewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: Uri.dataFromString(
        '''
        <!DOCTYPE html>
        <html>
        <head>
          <title>AMD Module Example</title>
          <script type="text/javascript">
            // 定义一个简单的AMD模块
            define('myModule', [], function() {
              return {
                message: "Hello from AMD module!"
              };
            });

            // 使用RequireJS加载模块
            require(['myModule'], function(myModule) {
              console.log(myModule.message);  // 这将在控制台打印消息
            });
          </script>
        </head>
        <body>
          <h1>AMD Module Integration in Flutter</h1>
        </body>
        </html>
        ''',
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
      ).toString(),
      withJavascript: true,
      withLocalStorage: true,
      hidden: true,
      clearCache: true,
      clearCookies: true,
      javascriptMode: JavascriptMode.UNRESTRICTED,
    );
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }
}

3. 运行应用

运行你的Flutter应用，WebView将加载HTML页面，并执行其中的JavaScript代码，包括AMD模块的定义和加载。

注意

  1. 性能：WebView可能会带来一些性能开销，特别是如果你的应用需要高性能交互。
  2. 跨平台：WebView在iOS和Android上的行为可能略有不同，需要测试和调整。
  3. 安全性：确保加载的HTML和JavaScript代码来自可信源，避免潜在的安全风险。

这种方法通过WebView在Flutter中集成了AMD模块，虽然不是最优雅的方式，但在某些场景下是可行的。如果你需要更复杂的集成或更好的性能，可能需要考虑其他方法，如使用Dart的FFI（Foreign Function Interface）或其他跨语言桥接技术。

回到顶部