使用 ArkTs 开发 Flutter 鸿蒙平台插件
本文讲述如何开发一个 Flutter 鸿蒙插件，如何实现 Flutter 与鸿蒙的混合开发，以及双端消息通信。
Flutter侧，编写 MethodChannel
1const MethodChannel _methodChannel = MethodChannel('xxx.com/app'); 2 3 4 /// 获取token 5 static Future<dynamic> getToken() { 6 return _methodChannel.invokeMethod("getPrefs", 'token'); 7 } 8 9 /// 设置token 10 static Future<dynamic> setToken(String token) { 11 return _methodChannel 12 .invokeMethod("setPrefs", {'key': 'token', 'value': token}); 13 } 14
代码生命了一个 methodChannel, 并实现了 token 存错的调用方法。
ArkTs侧，实现调用
编写 src/main/ets/entryability/EntryAbility.ets
1 2import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos'; 3import { GeneratedPluginRegistrant } from '../plugins/GeneratedPluginRegistrant'; 4import ForestPlugin from './ForestPlugin'; 5import { BusinessError } from '@kit.BasicServicesKit'; 6import { window } from '@kit.ArkUI'; 7import { preferences } from '@kit.ArkData'; 8 9let dataPreferences: preferences.Preferences | null = null; 10 11export default class EntryAbility extends FlutterAbility { 12 13 onWindowStageCreate(windowStage: window.WindowStage): void { 14 super.onWindowStageCreate(windowStage); 15 preferences.getPreferences(this.context, 'forestStore', (err: BusinessError, val: preferences.Preferences) => { 16 if (err) { 17 console.error("Failed to get preferences. code =" + err.code + ", message =" + err.message); 18 return; 19 } 20 dataPreferences = val; 21 console.info("Succeeded in getting preferences1."); 22 }) 23 } 24 25 configureFlutterEngine(flutterEngine: FlutterEngine) { 26 super.configureFlutterEngine(flutterEngine) 27 GeneratedPluginRegistrant.registerWith(flutterEngine) 28 this.addPlugin(new ForestPlugin()); 29 } 30} 31 32export {dataPreferences};
该文件使的原生页面在加载时，配置 Flutter 引擎，注册插件。 Flutter初始化时，同时初始化了 首选项dataPreferences，以备后用。
编写 src/main/ets/entryability/ForestPlugin.ets
1import { Any, BasicMessageChannel, EventChannel, FlutterManager, FlutterPlugin, Log, MethodCall, MethodChannel, StandardMessageCodec} from '@ohos/flutter_ohos'; 2import { FlutterPluginBinding } from '@ohos/flutter_ohos/src/main/ets/embedding/engine/plugins/FlutterPlugin'; 3import { batteryInfo } from '@kit.BasicServicesKit'; 4import { MethodCallHandler, MethodResult } from '@ohos/flutter_ohos/src/main/ets/plugin/common/MethodChannel'; 5import { preferences } from '@kit.ArkData'; 6import { BusinessError } from '@kit.BasicServicesKit'; 7import {dataPreferences} from './EntryAbility'; 8import router from '@ohos.router' 9import { webviewRouterParams } from '../pages/Webview'; 10 11const TAG = "[flutter][plugin][forest]"; 12 13export default class ForestPlugin implements FlutterPlugin { 14 private channel?: MethodChannel; 15 private basicChannel?: BasicMessageChannel<Any>; 16 private api = new ForestApi(); 17 private dataPreferences: preferences.Preferences | null = null; 18 19 onAttachedToEngine(binding: FlutterPluginBinding): void { 20 this.channel = new MethodChannel(binding.getBinaryMessenger(), "xxx.com/app"); 21 this.channel.setMethodCallHandler({ 22 onMethodCall : (call: MethodCall, result: MethodResult) => { 23 console.log(`${TAG}-->[${call.method}]: ${JSON.stringify(call.args)}`); 24 switch (call.method) { 25 case "getPrefs": 26 this.api.getPrefs(String(call.args), result); 27 break; 28 case "setPrefs": 29 let key = String(call.argument("key")); 30 let value = String(call.argument("value")); 31 this.api.setPrefs(key, value); 32 default: 33 result.notImplemented(); 34 break; 35 } 36 } 37 }) 38 } 39 //··· 40 onDetachedFromEngine(binding: FlutterPluginBinding): void { 41 Log.i(TAG, "onDetachedFromEngine"); 42 this.channel?.setMethodCallHandler(null); 43 } 44 45 getUniqueClassName(): string { 46 return "ForestPlugin"; 47 }
以上代码实现了一个插件类，其核心实现了FlutterPlugin中的 onAttachedToEngine方法，该方法在 Flutter 引擎加载成功后调用。
onMethodCall中接收来自 Flutter 的消息调用，分别实现了 'getPrefs' 和 'setPrefs' 两个回掉，其中 getPrefs有返回值，通过 result.success(val);（见下）异步返回，
setPrefs没有返回值。
以下为 ForestApi的具体实现，使用了 HarmonyOS 中的首选项 API 设置和读取数据。
1class ForestApi { 2 getPrefs(key: string, result: MethodResult) { 3 dataPreferences?.get(key, '', (err: BusinessError, val: preferences.ValueType) => { 4 if (err) { 5 console.error(`${TAG} Failed to get value of ${key}. code =` + err.code + ", message =" + err.message); 6 result.success(''); 7 } 8 console.info(`${TAG} Succeeded in getting value of ${key}:${val}.`); 9 result.success(val); 10 }) 11 12 } 13 14 setPrefs(key: string, value: string) { 15 dataPreferences?.put(key, value, (err: BusinessError) => { 16 if (err) { 17 console.error(`${TAG} Failed to put value of ${key}. code =` + err.code + ", message =" + err.message); 18 return; 19 } 20 console.info(`${TAG} Succeeded in putting value of ${key}.`); 21 }) 22 } 23 24 clearPrefs(key: string) { 25 dataPreferences?.delete(key, (err: BusinessError) => { 26 if (err) { 27 console.error("Failed to delete the key 'startup'. code =" + err.code + ", message =" + err.message); 28 return; 29 } 30 console.info(`Succeeded in deleting the key ${key}.`); 31 }) 32 } 33} 34
注意事项
1.双端初始化methodChannel中的名称必须保持一致，如 xxx.com/app.
2.arkTS侧通过 result.success(val) 返回数据，该过程是异步的，故在 Dart 侧需要使用 await 或者回调函数取值。
3.通信中默认只支持基础的数据类型，复杂类型的需要进行序列化或编解码。
4.在Dart 侧接收的数据为 dymanic 类型，需要进行数据类型转换。