Chapter 02 Flutter内嵌JS

禁止转载，侵权必究！ update 2021.10.06

前言

为了在Fluter中使用动态编程语言，我们引入了flutter_js 插件项目。它会在flutter中内嵌一个QuickJS的Javascript解释引擎负责解决动态代码的解释和执行。

创建plugin项目

命令行执行以下命令：

flutter create --org cn.abilitygame -t plugin -i objc -a java 
 --platforms android,ios ability_jsruntime
在这里我们用参数 -t plugin来标识我们创建的是flutter的插件。
build一下项目：

cd ability_jsruntime/example
flutter build apk --target-platform android-arm,android-arm64 --split-per-abi

打开Android Studio，选择import project，一路选到项目中的example的android目录下，点击Open。

注意：是example目录下。

编写plugin-Android部分

TODO

配置项目

编辑flutter配置文件pubspec.yaml ，如下图：

点击Package get链接，执行命令， 获取到pub.dev上的官方插件包

编写main.dart

定义&初始化Javascript运行环境

  String _jsResult = '';
  JavascriptRuntime? flutterJs;
  @override
  void initState() {
    super.initState();

    flutterJs = getJavascriptRuntime();
  }

定义app的UI

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlutterJS Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('JS Evaluate Result: $_jsResult\n'),
              SizedBox(height: 20,),
              Padding(padding: EdgeInsets.all(10), child: Text('点击绿色的勾'),),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("Math.trunc(Math.random() * 100).toString();", style: TextStyle(fontSize: 12, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),),
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.transparent,
          child: Image.asset('images/gou.png'),
          onPressed: () async {
            try {
              JsEvalResult jsResult = flutterJs!.evaluate(
                  "Math.trunc(Math.random() * 100).toString();");
              setState(() {
                _jsResult = jsResult.stringResult;
              });
            } on PlatformException catch (e) {
              print('ERRO: ${e.details}');
            }
          },
        ),
      ),
    );
  }

真机调试

用数据线连接上Android手机，点击运行。

示例源代码

源码url