大家好，我是讯享网，很高兴认识大家。



鸿蒙 Flutter 开发中集成 Webview

主要有两种方案

使用第三方库

如 使用flutter_inappwebview插件，在 pubspec.lock 文件中配置：

flutter_inappwebview:    git:      url: https://gitee.com/openharmony-sig/flutter_inappwebview.git      path: "flutter_inappwebview"

编写原生 ArkTS 代码实现 PlatformView

创建 entryablitiy

在 src/main/module.json5中配置ablitiy "abilities": [      {        "name": "EntryAbility",        "srcEntry": "https://www.bilibili.com/opus/ets/entryability/EntryAbility.ets",        "description": "\(string:EntryAbility_desc",        "icon": "\)media:icon",        "label": "\(string:EntryAbility_label",        "startWindowIcon": "\)media:icon",        "startWindowBackground": "$color:start_window_background",        "exported": true,        "skills": [          {            "entities": [              "entity.system.home"            ],            "actions": [              "action.system.home"            ]          }        ],        "orientation": "landscape"      }    ],

cat src/main/entryablity/CustomFactory.ets import { BinaryMessenger } from ‘@ohos/flutter_ohos/src/main/ets/plugin/common/BinaryMessenger’; import MessageCodec from ‘@ohos/flutter_ohos/src/main/ets/plugin/common/MessageCodec’; import PlatformViewFactory from ‘@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformViewFactory’; import { CustomView } from ‘https://www.bilibili.com/opus/CustomView’; import common from ‘@ohos.app.ability.common’; import PlatformView from ‘@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView’;

export class CustomFactory extends PlatformViewFactory {  message: BinaryMessenger;

 constructor(message: BinaryMessenger, createArgsCodes: MessageCodec<Object>) {    super(createArgsCodes);    this.message = message;  }

 public create(context: common.Context, viewId: number, args: Object): PlatformView {    return new CustomView(context, viewId, args, this.message);  } }

cat src/main/entryablity/CustomPlugin.ets import  { FlutterPlugin,  FlutterPluginBinding } from ‘@ohos/flutter_ohos/src/main/ets/embedding/engine/plugins/FlutterPlugin’; import StandardMessageCodec from ‘@ohos/flutter_ohos/src/main/ets/plugin/common/StandardMessageCodec’; import { CustomFactory } from ‘https://www.bilibili.com/opus/CustomFactory’;

export class CustomPlugin implements FlutterPlugin {  getUniqueClassName(): string {    return ‘CustomPlugin’;  }

 onAttachedToEngine(binding: FlutterPluginBinding): void {    binding.getPlatformViewRegistry()?.    registerViewFactory(‘com.rex.custom.ohos/customView’, new CustomFactory(binding.getBinaryMessenger(), StandardMessageCodec.INSTANCE));  }

 onDetachedFromEngine(binding: FlutterPluginBinding): void {} }

cat src/main/entryablity/CustomView.ets import MethodChannel, {  MethodCallHandler,  MethodResult } from ‘@ohos/flutter_ohos/src/main/ets/plugin/common/MethodChannel’; import PlatformView, { Params } from ‘@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView’; import common from ‘@ohos.app.ability.common’; import { BinaryMessenger } from ‘@ohos/flutter_ohos/src/main/ets/plugin/common/BinaryMessenger’; import StandardMethodCodec from ‘@ohos/flutter_ohos/src/main/ets/plugin/common/StandardMethodCodec’; import MethodCall from ‘@ohos/flutter_ohos/src/main/ets/plugin/common/MethodCall’; import { webview } from ‘@kit.ArkWeb’;

@Component struct ButtonComponent {  @Prop params: Params  customView: CustomView = this.params.platformView as CustomView  @StorageLink(‘numValue’) storageLink: string = "first"  @State bkColor: Color = Color.Red

 private webviewController: WebviewController = new webview.WebviewController()

 build() {    Web({src: ‘https://baidu.com’, controller: this.webviewController})      .domStorageAccess(true)      .fileAccess(true)      .mixedMode(MixedMode.All)      .databaseAccess(true)      .userAgent("Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36")  } }

@Builder function ButtonBuilder(params: Params) {  ButtonComponent({ params: params })    .backgroundColor(Color.Transparent) }

讯享网

AppStorage.setOrCreate(‘numValue’, ‘test’)

@Observed export class CustomView extends PlatformView implements MethodCallHandler {  numValue: string = "test";

 methodChannel: MethodChannel;  index: number = 1;  constructor(context: common.Context, viewId: number, args: ESObject, message: BinaryMessenger) {    super();    // 注册消息通道    this.methodChannel = new MethodChannel(message, com.rex.custom.ohos/customView${viewId}, StandardMethodCodec.INSTANCE);    this.methodChannel.setMethodCallHandler(this);  }

 onMethodCall(call: MethodCall, result: MethodResult): void {    // 接受Dart侧发来的消息    let method: string = call.method;    let link1: SubscribedAbstractProperty<number> = AppStorage.link(‘numValue’);    switch (method) {      case ‘getMessageFromFlutterView’:        let value: ESObject = call.args;        this.numValue = value;        link1.set(value)        console.log("nodeController receive message from dart: " + this.numValue);        result.success(true);        break;    }  }

 public  sendMessage = () => {    console.log("nodeController sendMessage")    //向Dart侧发送消息    this.methodChannel.invokeMethod(‘getMessageFromOhosView’, ‘natvie - ’ + this.index++);  }

 getView(): WrappedBuilder<[Params]> {    return new WrappedBuilder(ButtonBuilder);  }

 dispose(): void {  } }

cat src/main/entryablity/EntryAbility.ets import { FlutterAbility, FlutterEngine } from ’@ohos/flutter_ohos’; import { GeneratedPluginRegistrant } from ’https://www.bilibili.com/plugins/GeneratedPluginRegistrant’; import { CustomPlugin } from ’https://www.bilibili.com/opus/CustomPlugin’;

export default class EntryAbility extends FlutterAbility {   configureFlutterEngine(flutterEngine: FlutterEngine) {     super.configureFlutterEngine(flutterEngine)     GeneratedPluginRegistrant.registerWith(flutterEngine)     this.addPlugin(new CustomPlugin())   } }

创建 pages

cat src/main/ets/pages/index.ets import common from ‘@ohos.app.ability.common’; import { FlutterPage } from ‘@ohos/flutter_ohos’

let storage = LocalStorage.getShared() const EVENT_BACK_PRESS = ‘EVENT_BACK_PRESS’

@Entry(storage) @Component struct Index {  private context = getContext(this) as common.UIAbilityContext  @LocalStorageLink(‘viewId’) viewId: string = "";

 build() {    Column() {      FlutterPage({ viewId: this.viewId })    }  }

 onBackPress(): boolean {    this.context.eventHub.emit(EVENT_BACK_PRESS)    return true  } }

在src/main/resources/base/profile/main_page.json中配置路由 {  "src": [    "pages/Index"  ]}

在 Dart 侧调用该 PlatformView Scaffold(  appBar: AppBar(title: Text(‘code’)),  body: OhosView(  viewType: ‘com.rex.custom.ohos/customView’,  // onPlatformViewCreated: _onPlatformViewCreated,  creationParams: const <String, dynamic>{‘initParams’: ‘hello world’},  creationParamsCodec: const StandardMessageCodec(),)

​