Hybrid App 设置 - Flutter SDK (v4)

提示

在进行 Hybrid App 设置之前,请先分别在 App 和网站上完成 Flutter SDKWeb SDK 的安装。

通过设置,您无需更改 Hybrid App 中网站的代码,也能让 Airbridge Flutter SDK 处理应用内网站中的 Airbridge 相关操作。

使 Flutter SDK 处理 Web SDK 操作

Flutter SDK 可以代替 Web SDK 处理事件发送、设备设置和用户设置等命令。在 WebView 中加载网站之前,请使用 Airbridge.createWebInterfaceScriptAirbridge.handleWebInterfaceCommand 函数进行设置。

webTokenWeb SDK Token,可在 Airbridge 面板的 [设置]>[Token] 获取。

postMessageScript 是一段 JavaScript 代码,用于将 Web SDK 传递给 Flutter SDK 的命令所存储的 payload 变量传递至 Flutter 端。

command 是 Web SDK 传递给 Flutter SDK 的命令。

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
import 'dart:collection';
import 'package:airbridge_flutter_sdk/airbridge_flutter_sdk.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TestState();
  }
}

class TestState extends State<TestPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getJavascriptInterface(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return InAppWebView(
                initialUrlRequest: URLRequest(url: WebUri('YOUR_WEB_URL')),
                onWebViewCreated: (controller) async {
                  controller.addJavaScriptHandler(handlerName: 'postMessage', callback: (args) {
                    Airbridge.handleWebInterfaceCommand(args[0]);
                    return args;
                  });
                },
                initialUserScripts: UnmodifiableListView<UserScript>([
                  UserScript(
                    source: snapshot.requireData ?? "", 
                    injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
                ]),
        )
      });
  }


Future<String?> getJavascriptInterface() async {
    return await Airbridge.createWebInterfaceScript(
      webToken: 'YOUR_WEB_SDK_TOKEN',
      postMessageScript: 'window.flutter_inappwebview.callHandler("postMessage", payload);',
    );
  }
}

注意事项

Was this page helpful?

Have any questions or suggestions?