Flutter鸿蒙化中的Plugin

前言

各人知道Flutter和鸿蒙通信方式和Flutter和其他平台通信方式都是一样的， 都是使用Platform Channel API来通信。
那么鸿蒙中这些通信的代码是写在哪里？ 怎样编写的了？
下面我们简单的学习下。
鸿蒙项目内Plugin

在我们开发App的过程中，大概有如许的需求：
在鸿蒙平台上特有的，并且需要调用鸿蒙原生的API来完成的。那么我们可以在在ohos平台上创建一个Plugin的方式来支持这个功能。
示例的通信方式使用：MethodChannel的方式。
Flutter端实现

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

复制代码

鸿蒙端实现

创建Plugin的插件类

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

1. export default class TestPlugin implements FlutterPlugin {
2. // 通道
3.   private channel?: MethodChannel;
4. //获取唯一的类名 类似安卓的Class<? extends FlutterPlugin ts无法实现只能用户自定义
5.   getUniqueClassName(): string {
6.     return 'TestPlugin'
7.   }
9. // 当插件从engine上分离的时候调用
10.   onDetachedFromEngine(binding: FlutterPluginBinding): void {
11.     this.channel?.setMethodCallHandler(null);
12.   }
14. // 当插件挂载到engine上的时候调用
15.   onAttachedToEngine(binding: FlutterPluginBinding): void {
16.     this.channel = new MethodChannel(binding.getBinaryMessenger(), "com.test.channel");
17.     //  给通道设置回调监听
18.     this.channel.setMethodCallHandler({
19.       onMethodCall(call: MethodCall, result: MethodResult) {
20.         switch (call.method) {
21.           case "testData":
22.             console.log(`接收到flutter传递过来的参shu ===================`)
23.             break;
24.           default:
25.             result.notImplemented();
26.             break;
27.         }
28.       }
29.     })
30.   }
31. }

复制代码

注册Plugin

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

1. export default class EntryAbility extends FlutterAbility {
2.   configureFlutterEngine(flutterEngine: FlutterEngine) {
3.     super.configureFlutterEngine(flutterEngine)
4.     this.addPlugin(new TestPlugin());
5.   }
6. }

复制代码

完成上述两步之后，我们就可以使用这个专属鸿蒙的插件来完成鸿蒙上特有的功能了。
开发纯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平台的通道名称、调用方法尽量和原来保持划一，有助于明白。

1. // 执行flutter指令创建plugin插件时， 会自动创建这个类
2. export default class ImagesPickerPlugin implements FlutterPlugin, MethodCallHandler, AbilityAware {
3.   private channel: MethodChannel | null = null;
4.   private pluginBinding: FlutterPluginBinding | null = null;
5.   // 当前处理代理对象
6.   private delegate: ImagePickerDelegate | null = null
8.   constructor() {
9.   }
11.   getUniqueClassName(): string {
12.     return "ImagesPickerPlugin"
13.   }
15.   onAttachedToEngine(binding: FlutterPluginBinding): void {
16.   // 后续用到的页面context，都是需要重binding对象中获取， 如果你直接this.getcontext 等方法获取， 可能不是页面的context
17.     this.pluginBinding = binding;
18.     this.channel = new MethodChannel(binding.getBinaryMessenger(), "chavesgu/images_picker");
19.     this.channel.setMethodCallHandler(this)
20.   }
22.   onDetachedFromEngine(binding: FlutterPluginBinding): void {
23.     this.pluginBinding = null;
24.     if (this.channel != null) {
25.       this.channel.setMethodCallHandler(null)
26.     }
27.   }
29. //  插件挂载到ablitity上的时候
30.   onAttachedToAbility(binding: AbilityPluginBinding): void {
31.     if (!this.pluginBinding) {
32.       return
33.     }
34.     this.delegate = new ImagePickerDelegate(binding.getAbility().context, this.pluginBinding.getApplicationContext());
35.   }
37.   onDetachedFromAbility() {
39.   }
41.   onMethodCall(call: MethodCall, result: MethodResult): void {
42.     if (call.method === "pick") {
43.       // 解析参数
44.       let count = call.argument("count") as number;
45.       // let language = call.argument("language") as string;
46.       let pickType = call.argument("pickType") as string;
47.       // let supportGif = call.argument("gif") as boolean;
48.       // let maxTime = call.argument("maxTime") as number;
49.       let maxSize = call.argument("maxSize") as number;
50.       if (this.delegate !== null) {
51.         this.delegate.pick(count, pickType, maxSize, result)
52.       }
53.     } else if (call.method === "saveImageToAlbum" || call.method === "saveVideoToAlbum") {
54.       // 保存图片
55.       let filePath = call.argument("path") as string; // 图片路径
56.       if (this.delegate !== null) {
57.         this.delegate.saveImageOrVideo(filePath, call.method === "saveImageToAlbum", result)
58.       }
59.     } else if (call.method === "openCamera") {
60.       let pickType = call.argument("pickType") as string;
61.       let maxSize = call.argument("maxSize") as number;
62.       if (this.delegate !== null) {
63.         this.delegate.openCamear(pickType, maxSize, result)
64.       }
65.     } else {
66.       result.notImplemented()
67.     }
68.   }
69. }

复制代码

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

1. import ArrayList from '@ohos.util.ArrayList';
2. import common from '@ohos.app.ability.common';
3. import photoAccessHelper from '@ohos.file.photoAccessHelper';
4. import { BusinessError } from '@kit.BasicServicesKit';
5. import picker from '@ohos.multimedia.cameraPicker';
6. import camera from '@ohos.multimedia.camera';
7. import dataSharePredicates from '@ohos.data.dataSharePredicates';
8. import { fileUri } from '@kit.CoreFileKit';
9. import FileUtils from './FileUtils'
10. import fs from '@ohos.file.fs';
11. import {
12.   MethodResult,
13. } from '@ohos/flutter_ohos';
14. import abilityAccessCtrl, { PermissionRequestResult } from '@ohos.abilityAccessCtrl';
17. export default class ImagePickerDelegate {
18.   // 当前UIAblitity的context
19.   private context: common.Context
20.   // 插件绑定的context
21.   private bindContext: common.Context
22.   // 构造方法
23.   constructor(context: common.Context, bindContext: common.Context) {
24.     this.context = context
25.     this.bindContext = bindContext
26.   }
28.   // 选择相册图片和视频
29.   pick(count: number, pickType: string, maxSize: number, callback: MethodResult) {
30.     // 创建一个选择配置
31.     const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
33.     // 媒体选择类型
34.     let mineType: photoAccessHelper.PhotoViewMIMETypes = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
35.     if (pickType === "PickType.all") {
36.       mineType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
37.     } else if (pickType === "PickType.video") {
38.       mineType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
39.     }
40.     photoSelectOptions.MIMEType = mineType
41.     photoSelectOptions.maxSelectNumber = count; // 选择媒体文件的最大数目
43.     let uris: Array<string> = [];
44.     const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
45.     // 通过photoViewPicker对象来打开相册图片
46.     photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
47.       uris = photoSelectResult.photoUris;
48.       console.info('photoViewPicker.select to file succeed and uris are:' + uris);
49.       this.hanlderSelectResult(uris, callback)
50.     }).catch((err: BusinessError) => {
51.       console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
52.     })
53.   }
55.   // 处理打开相机照相/录制
56.   async openCamear(type: string, maxSize: number, callback: MethodResult) {
57.     // 定义一个媒体类型数组
58.     let mediaTypes: Array<picker.PickerMediaType> = [picker.PickerMediaType.PHOTO];
59.     if (type === "PickType.all") {
60.       mediaTypes = [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO]
61.     } else if (type === "PickType.video") {
62.       mediaTypes = [picker.PickerMediaType.VIDEO]
63.     }
64.     try {
65.       let pickerProfile: picker.PickerProfile = {
66.         cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
67.       };
68.       let pickerResult: picker.PickerResult = await picker.pick(this.context,
69.         mediaTypes, pickerProfile);
70.       console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));
72.       // 获取uri的路径和媒体类型
73.       let resultUri = pickerResult["resultUri"] as string
74.       let mediaTypeTemp = pickerResult["mediaType"] as string
75.       // 需要把uri转换成沙河路径
76.       let realPath = FileUtils.getPathFromUri(this.bindContext, resultUri);
77.       if (mediaTypeTemp === "video") {
78.         // 需要获取缩略图
79.         callback.success([{thumbPath: realPath, path: realPath, size: maxSize}])
80.       } else {
81.         // 图片无需设置缩略图
82.         callback.success([{thumbPath: realPath, path: realPath, size: maxSize}])
83.       }
84.     } catch (error) {
85.       let err = error as BusinessError;
86.       console.error(`the pick call failed. error code: ${err.code}`);
87.     }
88.   }
90.   // 处理保存图片
91.   async saveImageOrVideo(path: string, isImage: boolean, callback: MethodResult) {
92.     let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
93.     atManager.requestPermissionsFromUser(this.context,
94.       ['ohos.permission.WRITE_IMAGEVIDEO', 'ohos.permission.READ_IMAGEVIDEO'],
95.       async (err: BusinessError, data: PermissionRequestResult) => {
96.         if (err) {
97.           console.log(`requestPermissionsFromUser fail, err->${JSON.stringify(err)}`);
98.         } else {
99.           console.info('data:' + JSON.stringify(data));
100.           console.info('data permissions:' + data.permissions);
101.           console.info('data authResults:' + data.authResults);
102.           //转换成uri
103.           let uriTemp = fileUri.getUriFromPath(path);
104.           //打开文件
105.           let fileTemp = fs.openSync(uriTemp, fs.OpenMode.READ_ONLY);
106.           //读取文件大小
107.           let info = fs.statSync(fileTemp.fd);
108.           //缓存照片数据
109.           let bufferImg: ArrayBuffer = new ArrayBuffer(info.size);
110.           //写入缓存
111.           fs.readSync(fileTemp.fd, bufferImg);
112.           //关闭文件流
113.           fs.closeSync(fileTemp);
114.           let phHelper = photoAccessHelper.getPhotoAccessHelper(this.context);
115.           try {
116.             const uritemp = await phHelper.createAsset(isImage ? photoAccessHelper.PhotoType.IMAGE :
117.             photoAccessHelper.PhotoType.VIDEO, isImage ? 'jpg' : "mp4"); // 指定待创建的文件类型、后缀和创建选项，创建图片或视频资源
118.             const file = await fs.open(uritemp, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
119.             await fs.write(file.fd, bufferImg);
120.             await fs.close(file.fd);
122.             callback.success(true);
123.           } catch (error) {
124.             console.error(`error=========${JSON.stringify(error)}`)
125.             callback.success(false);
126.           }
127.         }
128.       });
130.   }
133.   // 处理选中结果
134.   hanlderSelectResult(uris: Array<string>, callback: MethodResult) {
135.     // 定义一个path数组
136.     let pathList: ArrayList<string> = new ArrayList();
137.     for (let path of uris) {
138.       // if (path.search("video") < 0) {
139.       //   path = await this.getResizedImagePath(path, this.pendingCallState.imageOptions);
140.       // }
141.       this.getVideoThumbnail(path)
142.       let realPath = FileUtils.getPathFromUri(this.bindContext, path);
143.       pathList.add(realPath);
144.     }
146.     let uriModels: UriModel[] = [];
147.     pathList.forEach(element => {
148.       uriModels.push({
149.         thumbPath: element,
150.         path: element,
151.         size: 500
152.       })
153.     });
155.     callback.success(uriModels)
156.   }
158.   // 获取视频的缩略图
159.   async getVideoThumbnail(uri: string) {
160.     //建立视频检索条件，用于获取视频
161.     console.log("开始获取缩略图==========")
162.     let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
163.     predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uri);
164.     let fetchOption: photoAccessHelper.FetchOptions = {
165.       fetchColumns: [],
166.       predicates: predicates
167.     };
169.     // let size: image.Size = { width: 720, height: 720 };
170.     let phelper = photoAccessHelper.getPhotoAccessHelper(this.context)
171.     let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phelper.getAssets(fetchOption);
172.     console.log(`fetchResult=========${JSON.stringify(fetchResult)}`)
173.     let asset = await fetchResult.getFirstObject();
174.     console.info('asset displayName = ', asset.displayName);
175.     asset.getThumbnail().then((pixelMap) => {
176.       console.info('getThumbnail successful ' + pixelMap);
177.     }).catch((err: BusinessError) => {
178.       console.error(`getThumbnail fail with error: ${err.code}, ${err.message}`);
179.     });
180.   }
181. }
183. // 定义一个返回的对象
184. interface UriModel {
185.   thumbPath: string;
186.   path: string;
187.   size: number;
188. }

复制代码

工具类代码 ：

1. /*
2. * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.
3. * Licensed under the Apache License, Version 2.0 (the "License");
4. * you may not use this file except in compliance with the License.
5. * You may obtain a copy of the License at
6. *
7. *     http://www.apache.org/licenses/LICENSE-2.0
8. *
9. * Unless required by applicable law or agreed to in writing, software
10. * distributed under the License is distributed on an "AS IS" BASIS,
11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12. * See the License for the specific language governing permissions and
13. * limitations under the License.
14. */
15. import common from '@ohos.app.ability.common';
16. import fs from '@ohos.file.fs';
17. import util from '@ohos.util';
18. import Log from '@ohos/flutter_ohos/src/main/ets/util/Log';
20. const TAG = "FileUtils";
22. export default class FileUtils {
23.   static getPathFromUri(context: common.Context | null, uri: string, defExtension?: string) {
24.     Log.i(TAG, "getPathFromUri : " + uri);
25.     let inputFile: fs.File;
26.     try {
27.       inputFile = fs.openSync(uri);
28.     } catch (err) {
29.       Log.e(TAG, "open uri file failed err:" + err)
30.       return null;
31.     }
32.     if (inputFile == null) {
33.       return null;
34.     }
35.     const uuid = util.generateRandomUUID();
36.     if (!context) {
37.       return
38.     }
39.     {
40.       const targetDirectoryPath = context.cacheDir + "/" + uuid;
41.       try {
42.         fs.mkdirSync(targetDirectoryPath);
43.         let targetDir = fs.openSync(targetDirectoryPath);
44.         Log.i(TAG, "mkdirSync success targetDirectoryPath:" + targetDirectoryPath + " fd: " + targetDir.fd);
45.         fs.closeSync(targetDir);
46.       } catch (err) {
47.         Log.e(TAG, "mkdirSync failed err:" + err);
48.         return null;
49.       }
51.       const inputFilePath = uri.substring(uri.lastIndexOf("/") + 1);
52.       const inputFilePathSplits = inputFilePath.split(".");
53.       Log.i(TAG, "getPathFromUri inputFilePath: " + inputFilePath);
54.       const outputFileName = inputFilePathSplits[0];
55.       let extension: string;
56.       if (inputFilePathSplits.length == 2) {
57.         extension = "." + inputFilePathSplits[1];
58.       } else {
59.         if (defExtension) {
60.           extension = defExtension;
61.         } else {
62.           extension = ".jpg";
63.         }
64.       }
65.       const outputFilePath = targetDirectoryPath + "/" + outputFileName + extension;
66.       const outputFile = fs.openSync(outputFilePath, fs.OpenMode.CREATE);
67.       try {
68.         Log.i(TAG, "copyFileSync inputFile fd:" + inputFile.fd + " outputFile fd:" + outputFile.fd);
69.         fs.copyFileSync(inputFile.fd, outputFilePath);
70.       } catch (err) {
71.         Log.e(TAG, "copyFileSync failed err:" + err);
72.         return null;
73.       } finally {
74.         fs.closeSync(inputFile);
75.         fs.closeSync(outputFile);
76.       }
77.       return outputFilePath;
78.     }
79.   }
80. }

复制代码

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。