Flutter鸿蒙化中的Plugin

前言

大家知道Flutter和鸿蒙通信方式和Flutter和其他平台通信方式都是一样的， 都是使用Platform Channel API来通信。

那么鸿蒙中这些通信的代码是写在哪里？ 如何编写的了？
下面我们简单的学习下。

鸿蒙项目内Plugin

在我们开发App的过程中，可能有这样的需求：
在鸿蒙平台上特有的，并且需要调用鸿蒙原生的API来完成的。那么我们可以在在ohos平台上创建一个Plugin的方式来支持这个功能。

示例的通信方式使用：MethodChannel的方式。

Flutter端实现

// flutter端创建一个MethodChannel的通道，通道名称必须和鸿蒙指定， 如果创建的名称不一致，会导致无法通信
final channel = const MethodChannel("com.test.channel");
// flutter给鸿蒙端发送消息
channel.invokeMapMethod("testData");

鸿蒙端实现

创建Plugin的插件类

首先我们需要创建一个插件类， 继承自FlutterPlugin类， 并实现其中的方法

export default class TestPlugin implements FlutterPlugin {
// 通道private channel?: MethodChannel;
//获取唯一的类名 类似安卓的Class<? extends FlutterPlugin ts无法实现只能用户自定义getUniqueClassName(): string {return 'TestPlugin'}// 当插件从engine上分离的时候调用onDetachedFromEngine(binding: FlutterPluginBinding): void {this.channel?.setMethodCallHandler(null);}// 当插件挂载到engine上的时候调用onAttachedToEngine(binding: FlutterPluginBinding): void {this.channel = new MethodChannel(binding.getBinaryMessenger(), "com.test.channel");//  给通道设置回调监听 this.channel.setMethodCallHandler({onMethodCall(call: MethodCall, result: MethodResult) {switch (call.method) {case "testData":console.log(`接收到flutter传递过来的参shu ===================`)break;default:result.notImplemented();break;}}})}
}

注册Plugin

我们创建完Plugin了， 我们还需要再EntryAbility中去注册我们的插件

export default class EntryAbility extends FlutterAbility {configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)this.addPlugin(new TestPlugin());}
}

完成上述两步之后，我们就可以使用这个专属鸿蒙的插件来完成鸿蒙上特有的功能了。

开发纯Dart的package

我们知道，flutter_flutter的仓库对于纯Dart开发的package是完全支持的， 对于纯Dart的package我们主要关注Dart的版本支持。

开发纯Dart的命令：flutter create --template=package hello

对于具体如何开发纯Dart的package，Flutter官方已经讲的非常详细, 开发，集成详细 可以参考官方文档。Flutter中的Package开发

为现有插件项目添加ohos平台支持

在我们开发Flutter项目适配鸿蒙平台的时候，会有些插件还没有适配ohos平台， 这个时候我们等华为适配， 或者我们自己下载插件的源码， 然后我们自己在源码中编写适配ohos平台的代码

下面以image_picker插件为示例，来学习下如何为已有插件项目添加ohos的平台支持

创建插件

首先我们需要下载image_picker源码， 然后使用Android studio打开flutter项目。 可以查看到项目的结构

然后通过命令行进入到项目根目录， 执行命令：flutter create . --template=plugin --platforms=ohos

执行完后的目录结构如下：

配置插件

我们创建完ohos平台的插件之后， 我们需要再Plugin工程的pubspec.yaml配置文件中配置ohos平台的插件。

当我们配置完成之后， 我们接下来就可以开始编写ohos平台插件相关内容了。

编写插件内容

在我们编写ohos平台的插件内容时， 我们首先需要知道这个插件是通过什么通道， 调用什么方法来和个个平台通信的。 ohos平台的通道名称、调用方法尽量和原来保持一致，有助于理解。

// 执行flutter指令创建plugin插件时， 会自动创建这个类
export default class ImagesPickerPlugin implements FlutterPlugin, MethodCallHandler, AbilityAware {private channel: MethodChannel | null = null;private pluginBinding: FlutterPluginBinding | null = null;// 当前处理代理对象private delegate: ImagePickerDelegate | null = nullconstructor() {}getUniqueClassName(): string {return "ImagesPickerPlugin"}onAttachedToEngine(binding: FlutterPluginBinding): void {// 后续用到的页面context，都是需要重binding对象中获取， 如果你直接this.getcontext 等方法获取， 可能不是页面的contextthis.pluginBinding = binding;this.channel = new MethodChannel(binding.getBinaryMessenger(), "chavesgu/images_picker");this.channel.setMethodCallHandler(this)}onDetachedFromEngine(binding: FlutterPluginBinding): void {this.pluginBinding = null;if (this.channel != null) {this.channel.setMethodCallHandler(null)}}//  插件挂载到ablitity上的时候onAttachedToAbility(binding: AbilityPluginBinding): void {if (!this.pluginBinding) {return}this.delegate = new ImagePickerDelegate(binding.getAbility().context, this.pluginBinding.getApplicationContext());}onDetachedFromAbility() {}onMethodCall(call: MethodCall, result: MethodResult): void {if (call.method === "pick") {// 解析参数let count = call.argument("count") as number;// let language = call.argument("language") as string;let pickType = call.argument("pickType") as string;// let supportGif = call.argument("gif") as boolean;// let maxTime = call.argument("maxTime") as number;let maxSize = call.argument("maxSize") as number;if (this.delegate !== null) {this.delegate.pick(count, pickType, maxSize, result)}} else if (call.method === "saveImageToAlbum" || call.method === "saveVideoToAlbum") {// 保存图片let filePath = call.argument("path") as string; // 图片路径if (this.delegate !== null) {this.delegate.saveImageOrVideo(filePath, call.method === "saveImageToAlbum", result)}} else if (call.method === "openCamera") {let pickType = call.argument("pickType") as string;let maxSize = call.argument("maxSize") as number;if (this.delegate !== null) {this.delegate.openCamear(pickType, maxSize, result)}} else {result.notImplemented()}}
}

注意：这个插件内开发代码是没有代码提示的， 也不会自动检车报错， 只有你运行测试demo时， 编译时才会报错，所以建议大家把插件的功能在一个demo中完成，在把代码拷贝过来。

逻辑实现代码：

import ArrayList from '@ohos.util.ArrayList';
import common from '@ohos.app.ability.common';
import photoAccessHelper from '@ohos.file.photoAccessHelper';
import { BusinessError } from '@kit.BasicServicesKit';
import picker from '@ohos.multimedia.cameraPicker';
import camera from '@ohos.multimedia.camera';
import dataSharePredicates from '@ohos.data.dataSharePredicates';
import { fileUri } from '@kit.CoreFileKit';
import FileUtils from './FileUtils'
import fs from '@ohos.file.fs';
import {MethodResult,
} from '@ohos/flutter_ohos';
import abilityAccessCtrl, { PermissionRequestResult } from '@ohos.abilityAccessCtrl';export default class ImagePickerDelegate {// 当前UIAblitity的contextprivate context: common.Context// 插件绑定的contextprivate bindContext: common.Context// 构造方法constructor(context: common.Context, bindContext: common.Context) {this.context = contextthis.bindContext = bindContext}// 选择相册图片和视频pick(count: number, pickType: string, maxSize: number, callback: MethodResult) {// 创建一个选择配置const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();// 媒体选择类型let mineType: photoAccessHelper.PhotoViewMIMETypes = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;if (pickType === "PickType.all") {mineType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;} else if (pickType === "PickType.video") {mineType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;}photoSelectOptions.MIMEType = mineTypephotoSelectOptions.maxSelectNumber = count; // 选择媒体文件的最大数目let uris: Array<string> = [];const photoViewPicker = new photoAccessHelper.PhotoViewPicker();// 通过photoViewPicker对象来打开相册图片photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {uris = photoSelectResult.photoUris;console.info('photoViewPicker.select to file succeed and uris are:' + uris);this.hanlderSelectResult(uris, callback)}).catch((err: BusinessError) => {console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);})}// 处理打开相机照相/录制async openCamear(type: string, maxSize: number, callback: MethodResult) {// 定义一个媒体类型数组let mediaTypes: Array<picker.PickerMediaType> = [picker.PickerMediaType.PHOTO];if (type === "PickType.all") {mediaTypes = [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO]} else if (type === "PickType.video") {mediaTypes = [picker.PickerMediaType.VIDEO]}try {let pickerProfile: picker.PickerProfile = {cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK};let pickerResult: picker.PickerResult = await picker.pick(this.context,mediaTypes, pickerProfile);console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));// 获取uri的路径和媒体类型let resultUri = pickerResult["resultUri"] as stringlet mediaTypeTemp = pickerResult["mediaType"] as string// 需要把uri转换成沙河路径let realPath = FileUtils.getPathFromUri(this.bindContext, resultUri);if (mediaTypeTemp === "video") {// 需要获取缩略图callback.success([{thumbPath: realPath, path: realPath, size: maxSize}])} else {// 图片无需设置缩略图callback.success([{thumbPath: realPath, path: realPath, size: maxSize}])}} catch (error) {let err = error as BusinessError;console.error(`the pick call failed. error code: ${err.code}`);}}// 处理保存图片async saveImageOrVideo(path: string, isImage: boolean, callback: MethodResult) {let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();atManager.requestPermissionsFromUser(this.context,['ohos.permission.WRITE_IMAGEVIDEO', 'ohos.permission.READ_IMAGEVIDEO'],async (err: BusinessError, data: PermissionRequestResult) => {if (err) {console.log(`requestPermissionsFromUser fail, err->${JSON.stringify(err)}`);} else {console.info('data:' + JSON.stringify(data));console.info('data permissions:' + data.permissions);console.info('data authResults:' + data.authResults);//转换成urilet uriTemp = fileUri.getUriFromPath(path);//打开文件let fileTemp = fs.openSync(uriTemp, fs.OpenMode.READ_ONLY);//读取文件大小let info = fs.statSync(fileTemp.fd);//缓存照片数据let bufferImg: ArrayBuffer = new ArrayBuffer(info.size);//写入缓存fs.readSync(fileTemp.fd, bufferImg);//关闭文件流fs.closeSync(fileTemp);let phHelper = photoAccessHelper.getPhotoAccessHelper(this.context);try {const uritemp = await phHelper.createAsset(isImage ? photoAccessHelper.PhotoType.IMAGE :photoAccessHelper.PhotoType.VIDEO, isImage ? 'jpg' : "mp4"); // 指定待创建的文件类型、后缀和创建选项，创建图片或视频资源const file = await fs.open(uritemp, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);await fs.write(file.fd, bufferImg);await fs.close(file.fd);callback.success(true);} catch (error) {console.error(`error=========${JSON.stringify(error)}`)callback.success(false);}}});}// 处理选中结果hanlderSelectResult(uris: Array<string>, callback: MethodResult) {// 定义一个path数组let pathList: ArrayList<string> = new ArrayList();for (let path of uris) {// if (path.search("video") < 0) {//   path = await this.getResizedImagePath(path, this.pendingCallState.imageOptions);// }this.getVideoThumbnail(path)let realPath = FileUtils.getPathFromUri(this.bindContext, path);pathList.add(realPath);}let uriModels: UriModel[] = [];pathList.forEach(element => {uriModels.push({thumbPath: element,path: element,size: 500})});callback.success(uriModels)}// 获取视频的缩略图async getVideoThumbnail(uri: string) {//建立视频检索条件，用于获取视频console.log("开始获取缩略图==========")let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uri);let fetchOption: photoAccessHelper.FetchOptions = {fetchColumns: [],predicates: predicates};// let size: image.Size = { width: 720, height: 720 };let phelper = photoAccessHelper.getPhotoAccessHelper(this.context)let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phelper.getAssets(fetchOption);console.log(`fetchResult=========${JSON.stringify(fetchResult)}`)let asset = await fetchResult.getFirstObject();console.info('asset displayName = ', asset.displayName);asset.getThumbnail().then((pixelMap) => {console.info('getThumbnail successful ' + pixelMap);}).catch((err: BusinessError) => {console.error(`getThumbnail fail with error: ${err.code}, ${err.message}`);});}
}// 定义一个返回的对象
interface UriModel {thumbPath: string;path: string;size: number;
}

工具类代码 ：

/** Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import util from '@ohos.util';
import Log from '@ohos/flutter_ohos/src/main/ets/util/Log';const TAG = "FileUtils";export default class FileUtils {static getPathFromUri(context: common.Context | null, uri: string, defExtension?: string) {Log.i(TAG, "getPathFromUri : " + uri);let inputFile: fs.File;try {inputFile = fs.openSync(uri);} catch (err) {Log.e(TAG, "open uri file failed err:" + err)return null;}if (inputFile == null) {return null;}const uuid = util.generateRandomUUID();if (!context) {return}{const targetDirectoryPath = context.cacheDir + "/" + uuid;try {fs.mkdirSync(targetDirectoryPath);let targetDir = fs.openSync(targetDirectoryPath);Log.i(TAG, "mkdirSync success targetDirectoryPath:" + targetDirectoryPath + " fd: " + targetDir.fd);fs.closeSync(targetDir);} catch (err) {Log.e(TAG, "mkdirSync failed err:" + err);return null;}const inputFilePath = uri.substring(uri.lastIndexOf("/") + 1);const inputFilePathSplits = inputFilePath.split(".");Log.i(TAG, "getPathFromUri inputFilePath: " + inputFilePath);const outputFileName = inputFilePathSplits[0];let extension: string;if (inputFilePathSplits.length == 2) {extension = "." + inputFilePathSplits[1];} else {if (defExtension) {extension = defExtension;} else {extension = ".jpg";}}const outputFilePath = targetDirectoryPath + "/" + outputFileName + extension;const outputFile = fs.openSync(outputFilePath, fs.OpenMode.CREATE);try {Log.i(TAG, "copyFileSync inputFile fd:" + inputFile.fd + " outputFile fd:" + outputFile.fd);fs.copyFileSync(inputFile.fd, outputFilePath);} catch (err) {Log.e(TAG, "copyFileSync failed err:" + err);return null;} finally {fs.closeSync(inputFile);fs.closeSync(outputFile);}return outputFilePath;}}
}

编写完上述代码就可以运行example工程去测试相关功能了。 当测试完成之后 ， 我们可以把整个源码工程拷贝到flutter工程中， 通过集成本地package的方式来集成这个package。或者你可以在发一个新的pacage到pub.dev上， 然后在按照原有方式集成即可。

参考资料

Flutter官方的package开发和使用
开发Plugin