Flutter跨iOS/Android/Web应用执行JS代码的替代库咨询

你当前使用flutter_js在移动端实现JS表达式求值的逻辑可以平滑迁移到全端适配方案，目前综合包体积、性能、维护性的最优选择是分端适配底层JS能力，上层做统一封装，不需要引入重量依赖。

方案选型说明 #

• 首选轻量方案（适配你当前的纯表达式求值场景）：Web端复用浏览器原生JS引擎，Android/iOS端内嵌QuickJS轻量引擎，整体包体积增量仅1~2M，执行性能比flutter_js高30%左右，API和现有逻辑高度对齐，迁移成本极低。
• 备选重量方案（适配需要浏览器BOM/DOM的JS场景）：用内嵌后台WebView的方式执行JS，全端兼容但包体积增量大（Android端增10M+、iOS端增8M+），纯计算逻辑场景不推荐。

具体实现步骤 #

1. 添加依赖
   在pubspec.yaml中引入所需依赖：

   dependencies:
     js: any
     flutter_qjs: any
   

2. 封装统一的JS执行方法，自动适配三端逻辑

   import 'package:flutter/foundation.dart' show kIsWeb;
   import 'package:js/js.dart' as webjs;
   import 'package:flutter_qjs/flutter_qjs.dart';
   
   bool evaluateVisibilityCase(String codeToEval) {
     final executeCode = """
       var result = eval($codeToEval);
       result;
     """;
   
     dynamic evalResult;
     if (kIsWeb) {
       evalResult = webjs.context.callMethod('eval', [executeCode]);
     } else {
       final qjsRuntime = FlutterQjs();
       try {
         evalResult = qjsRuntime.evaluate(executeCode);
       } finally {
         qjsRuntime.close();
       }
     }
     return evalResult == true;
   }
   

3. 替换原有业务代码
   把你之前拼接JS字符串、比对字符串结果的逻辑替换成封装好的方法即可，不需要再手动转字符串判断布尔值，避免类型转换异常：

   String codeToEval = m['visibilityCase'];
   bool boolResult = evaluateVisibilityCase(codeToEval);
   

避坑提示 #

• 不要使用无人维护的flutter_js第三方fork版本，绝大多数fork版本没有做Web端适配，后续Flutter大版本升级很容易出现兼容问题。
• 如果你的JS逻辑后续需要用到window、document这类浏览器API，直接切换到内嵌WebView的方案即可，初始化一个不可见的后台WebView实例加载空白页，调用其evaluateJavascript方法就能执行对应JS。

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