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 helpful?

    Any questions or suggestions?