DEV Community

Cover image for HarmonyOS Flutter Hands-on: 03-Harmony Flutter development in the integration of Webview
shaohushuo
shaohushuo

Posted on

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

#harmonyos #flutter

Harmony Flutter Practice: 03-Integrating Webview in Harmony Flutter Development

There are two main solutions

Using third-party libraries

For example, use the flutter_inappwebview plug-in and configure it in the pubspec.lock file:

flutter_inappwebview:
git:
url: https://gitee.com/openharmony-sig/flutter_inappwebview.git
path: "flutter_inappwebview"
Enter fullscreen mode Exit fullscreen mode

Or use the webview_flutter plug-in

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

Write native ArkTS code to implement PlatformView

Create entryablitiy

In Configure ablitiy in src/main/module.json5

"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" 
} 
],
Enter fullscreen mode Exit fullscreen mode

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 './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); 
}
}
Enter fullscreen mode Exit fullscreen mode

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 './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 {}
}
Enter fullscreen mode Exit fullscreen mode

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(); 
//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 { 
}
}
Enter fullscreen mode Exit fullscreen mode

cat src/main/entryablity/EntryAbility.ets

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()) 
}
}
Enter fullscreen mode Exit fullscreen mode

Create 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 
}
}
Enter fullscreen mode Exit fullscreen mode

Configure routing in src/main/resources/base/profile/main_page.json

{ 
"src": [ 
"pages/Index" 
]
}
Enter fullscreen mode Exit fullscreen mode

exist Dart side calls the 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(),
)
Enter fullscreen mode Exit fullscreen mode

References

Top comments (0)