HarmonyOS Flutter Hands-on: 03-Harmony Flutter development in the integration of Webview

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

webview_flutter: git: url: https://gitee.com/openharmony-sig/flutter_packages.git path: "packages/webview_flutter/webview_flutter" 

"abilities": [ { "name": "EntryAbility", "srcEntry": "./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" } ], 

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 './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); } } 

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 './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 {} } 

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(); //Register message channel this.methodChannel = new MethodChannel(message, `com.rex.custom.ohos/customView${viewId}`, StandardMethodCodec.INSTANCE); this.methodChannel.setMethodCallHandler(this); } onMethodCall(call: MethodCall, result: MethodResult): void { //Accept messages from the Dart side 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") //Send message to Dart side this.methodChannel.invokeMethod('getMessageFromOhosView', 'natvie - ' + this.index++); } getView(): WrappedBuilder<[Params]> { return new WrappedBuilder(ButtonBuilder); } dispose(): void { } } 

import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos'; import { GeneratedPluginRegistrant } from '../plugins/GeneratedPluginRegistrant'; import { CustomPlugin } from './CustomPlugin'; export default class EntryAbility extends FlutterAbility { configureFlutterEngine(flutterEngine: FlutterEngine) { super.configureFlutterEngine(flutterEngine) GeneratedPluginRegistrant.registerWith(flutterEngine) this.addPlugin(new CustomPlugin()) } } 

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": [ "pages/Index" ] } 

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(), )