Flutter JavaScript引擎插件mercuryjs的使用

Flutter JavaScript引擎插件mercuryjs的使用

mercuryjs 是一个用于在 Flutter 应用程序中执行 JavaScript 的插件。它允许你将现有的 JavaScript 代码库集成到你的 Flutter 应用中。以下是一个完整的示例，展示如何使用 mercuryjs 插件。

示例代码

/*
 * Copyright (C) 2019-2022 The Kraken authors. All rights reserved.
 * Copyright (C) 2022-present The WebF authors. All rights reserved.
 */

import 'package:flutter/material.dart';
import 'package:mercuryjs/mercuryjs.dart';
import 'package:mercuryjs/devtools.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个小部件是你应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mercury Example',
      debugShowCheckedModeBanner: false,
      home: MyBrowser(),
    );
  }
}

class MyBrowser extends StatefulWidget {
  MyBrowser({Key? key, this.title}) : super(key: key);

  // 这个小部件是你的应用的首页。它是有状态的，意味着它有一个状态对象（定义在下面），该状态对象包含影响其外观的字段。
  // 这个类是状态的配置。它保留了由父组件（在这个例子中是App小部件）提供的值（在这个例子中是标题）并用于状态的构建方法。小部件子类中的字段总是标记为“final”。

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyBrowser> {
  // 定义输入框边框样式
  OutlineInputBorder outlineBorder = OutlineInputBorder(
    borderSide: BorderSide(color: Colors.transparent, width: 0.0),
    borderRadius: const BorderRadius.all(
      Radius.circular(20.0),
    ),
  );

  // 创建 Mercury 实例
  Mercury? mercuryjs;

  // 用于显示的消息
  String message = 'Loading...';

  @override
  Widget build(BuildContext context) {
    // 初始化 Mercury 实例
    mercuryjs ??= Mercury(
      devToolsService: ChromeDevToolsService(),
      bundle: MercuryBundle.fromUrl('assets:assets/bundle.js'),
      onControllerCreated: (controller) {
        setState(() {
          message = 'Controller loading...';
        });
        // 当控制器加载完成后，执行一些操作
        controller.onLoad = (controller) {
          setState(() {
            message = 'Context loading...';
          });
          // 订阅 JavaScript 上下文中的消息
          controller.context.dispatcher?.subscribe('example', (args) {
            setState(() {
              message = args[0]['message'];
            });
          });
          // 在上下文中执行 JavaScript 代码
          controller.context.evaluateJavaScripts('hello();');
        };
      }
    );
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black87,
          titleSpacing: 10.0,
          title: Container(
            height: 40.0,
            child: Text('Mercury 测试')
          ),
        ),
        body: Center(
          // 中心布局小部件。它接受单个子元素，并将其放置在父元素的中间。
          child: Column(
            children: [Text(message)],
          ),
        ));
  }
}

说明

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:mercuryjs/mercuryjs.dart';
   import 'package:mercuryjs/devtools.dart';
   

2. 初始化应用：

   void main() {
     runApp(MyApp());
   }
   

3. 创建主应用界面：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Mercury Example',
         debugShowCheckedModeBanner: false,
         home: MyBrowser(),
       );
     }
   }
   

4. 创建浏览器界面：

   class MyBrowser extends StatefulWidget {
     MyBrowser({Key? key, this.title}) : super(key: key);
   
     final String? title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   

5. 管理浏览器状态：

   class _MyHomePageState extends State<MyBrowser> {
     // 输入框边框样式
     OutlineInputBorder outlineBorder = OutlineInputBorder(
       borderSide: BorderSide(color: Colors.transparent, width: 0.0),
       borderRadius: const BorderRadius.all(
         Radius.circular(20.0),
       ),
     );
   
     // Mercury 实例
     Mercury? mercuryjs;
   
     // 显示的消息
     String message = 'Loading...';
   
     @override
     Widget build(BuildContext context) {
       // 初始化 Mercury 实例
       mercuryjs ??= Mercury(
         devToolsService: ChromeDevToolsService(),
         bundle: MercuryBundle.fromUrl('assets:assets/bundle.js'),
         onControllerCreated: (controller) {
           setState(() {
             message = 'Controller loading...';
           });
           // 当控制器加载完成后，执行一些操作
           controller.onLoad = (controller) {
             setState(() {
               message = 'Context loading...';
             });
             // 订阅 JavaScript 上下文中的消息
             controller.context.dispatcher?.subscribe('example', (args) {
               setState(() {
                 message = args[0]['message'];
               });
             });
             // 在上下文中执行 JavaScript 代码
             controller.context.evaluateJavaScripts('hello();');
           };
         }
       );
       return Scaffold(
           appBar: AppBar(
             backgroundColor: Colors.black87,
             titleSpacing: 10.0,
             title: Container(
               height: 40.0,
               child: Text('Mercury 测试')
             ),
           ),
           body: Center(
             child: Column(
               children: [Text(message)],
             ),
           ));
     }
   }