HarmonyOS实现快递APP自动识别地址

​    大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，欢迎关注！
随着鸿蒙（HarmonyOS）生态发展，越来越多的APP需要进行鸿蒙适配。本文以快递APP寄件中的收货地址识别功能为例，探讨HarmonyOS鸿蒙版本的开发和适配。
一、需求分析

1、应用场景

随着互联网的发展，网购已成为大家日常生活中不可或缺的一部分。网购涉及到发货和收货操作，为了简化操作、提升APP的使用效率，各大APP都融入了AI能力。在AI赋能下，从传统的文字输入交互方式，逐步拓展到人脸识别、指纹识别、图片识别、语言识别等方式，降低了APP使用门槛的同时极大提高了交互效率。
本文研究以支付宝APP里边的“菜鸟裹裹”寄件场景为例，通过粘贴文字或者图片识别进行收货地址自动识别填充。在鸿蒙操作系统（HarmonyOS）上借助HarmonyOS SDK 提供的AI能力，开发鸿蒙原生应用APP功能，完成上述功能。
ps：相信大家都寄过快递，如果没操作过可以先了解一下。
2、实现效果

主页拍照识别保存

ps：由于编写的提取规则中，名字为2-4个中文，因此上边的名字“潘Sir”包含了1个英文，故未识别正确。如果改为2-4个汉字则可以正确识别。这就是传统的用规则来匹配的弊端，更好的方法是使用AI大模型或NLP工具来提取地址信息。
读者可以直接运行提供的代码查看效果。由于使用了视觉服务，需要真机运行。
使用说明：

• 点击图片识别按钮，拉起选择图片获取方式的弹窗，选择拍照方式，通过对要识别的文字进行拍照获得要识别的图片。也可以选择相册方式，在图库中直接选择需要识别的图片。
  
• 识别出图片包含的文本信息后，会自动将文本内容填充到文本输入框。
  
• 点击`地址解析按钮，会将文本框中的信息提取为结构化数据，显示到按钮下方的列表中。
  
• 点击保存地址按钮，提示保存成功，文本框旧的内容会自动清空。
  

3、技术分析

基于HarmonyOS SDK提供的基础视觉服务（CoreVisionKit），使用@kit.CoreVisionKit提供的通用文字识别能力，通过拍照（CameraPicker）或者相册（PhotoViewPicker）方式，将印刷品文字（如：收货信息）转化为图像信息，再利用文字识别技术将图像信息转化为设备可以使用的文本字符，最后可以根据实际业务规则提取结构化数据。
二、界面制作

1、布局分析

主界面布局分析：

弹窗界面布局分析：

2、界面制作

开发环境说明：DevEco Studio5.0.4 Release、 HarmonyOS5.0.4（API 16）
通过DevEco Studio创建项目，项目名称为：ExtractAddress，删除Index.ets文件中默认的代码。
2.1 制作主界面

为了便于代码复用和程序扩展，将收货人信息的界面上的每一行显示的数据，抽取为一个对象，该对象类型为ConsigneeInfo类。在ets目录下新建viewmodel目录，新建DataModel.ets文件，内容如下：

1. // 收货人信息界面视图模型
2. @ObservedV2
3. export class ConsigneeInfo {
4.   label: ResourceStr;       //标签名称
5.   placeholder: ResourceStr; //提示语
6.   @Trace value: string;     //输入值
8.   constructor(label: ResourceStr, placeholder: ResourceStr, value: string) {
9.     this.label = label;
10.     this.placeholder = placeholder;
11.     this.value = value;
12.   }
13. }

复制代码

有了此类，在主界面上就只需要实例化3个对象，通过列表进行循环渲染即可，避免了重复臃肿的代码。接下来制作主界面，Index.ets文件内容如下：

1. import { ConsigneeInfo} from '../viewmodel/DataModel';
3. @Entry
4. @Component
5. struct Index {
6.   @State consigneeInfos: ConsigneeInfo[] = []; //收货人信息界面视图
7.   @State saveAvailable: boolean = false; //保存按钮是否可用
9.   aboutToAppear(): void {
10.     this.consigneeInfos = [
11.       new ConsigneeInfo('收货人', '收货人姓名', ''),
12.       new ConsigneeInfo('电话', '收货人电话', ''),
13.       new ConsigneeInfo('地址', '地址', ''),
14.     ];
15.   }
17.   build() {
18.     RelativeContainer() {
19.       // 界面主体内容
20.       Column() {
21.         Text('新增收货地址')
22.           .id('title')
23.           .width('100%')
24.           .font({ size: 26, weight: 700 })
25.           .fontColor('#000000')
26.           .opacity(0.9)
27.           .height(64)
28.           .align(Alignment.TopStart)
29.         Text('地址信息')
30.           .width('100%')
31.           .padding({ left: 12, right: 12 })
32.           .font({ size: 14, weight: 400 })
33.           .fontColor('#000000')
34.           .opacity(0.6)
35.           .lineHeight(19)
36.           .margin({ bottom: 8 })
38.         // 识别或填写区域
39.         Column() {
40.           TextArea({
41.             placeholder: '图片识别的文本自动显示到此处（也可手动复制文本到此处），将自动识别收货信息。例：大美丽，182*******，四川省成都市天府新区某小区',
42.           })
43.             .height(100)
44.             .margin({ bottom: 12 })
45.             .backgroundColor('#FFFFFF')
46.           Row({ space: 12 }) {
47.             Button() {
48.               Row({ space: 8 }) {
49.                 Text() {
50.                   SymbolSpan($r('sys.symbol.camera'))
51.                     .fontSize(26)
52.                     .fontColor(['#0A59F2'])
53.                 }
54.                 Text('图片识别')
55.                   .fontSize(16)
56.                   .fontColor('#0A59F2')
57.               }
58.             }
59.             .height(40)
60.             .layoutWeight(1)
61.             .backgroundColor('#F1F3F5')
63.             Button('地址解析')
64.               .height(40)
65.               .layoutWeight(1)
66.           }
67.           .width('100%')
68.           .padding({
69.             left: 16,
70.             right: 16,
71.           })
72.         }
73.         .backgroundColor('#FFFFFF')
74.         .borderRadius(16)
75.         .padding({
76.           top: 16,
77.           bottom: 16
78.         })
80.         // 收货人信息
81.         Column() {
82.           List() {
83.             //列表渲染，避免重复代码
84.             ForEach(this.consigneeInfos, (item: ConsigneeInfo) => {
85.               ListItem() {
86.                 Row() {
87.                   Text(item.label)
88.                     .fontSize(16)
89.                     .fontWeight(400)
90.                     .lineHeight(19)
91.                     .textAlign(TextAlign.Start)
92.                     .fontColor('#000000')
93.                     .opacity(0.9)
94.                     .layoutWeight(1)
96.                   TextArea({ placeholder: item.placeholder, text: item.value })
97.                     .type(item.label === '收货人' ? TextAreaType.PHONE_NUMBER : TextAreaType.NORMAL)
98.                     .fontSize(16)
99.                     .fontWeight(500)
100.                     .lineHeight(21)
101.                     .padding(0)
102.                     .borderRadius(0)
103.                     .textAlign(TextAlign.End)
104.                     .fontColor('#000000')
105.                     .opacity(0.9)
106.                     .backgroundColor('#FFFFFF')
107.                     .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
108.                     .layoutWeight(2)
109.                     .onChange((value: string) => {
110.                       item.value = value;
111.                       //判断保存按钮是否可用(均填写即可保存)
112.                       if (this.consigneeInfos[0].value && this.consigneeInfos[1].value && this.consigneeInfos[2].value) {
113.                         this.saveAvailable = true;
114.                       } else {
115.                         this.saveAvailable = false;
116.                       }
117.                     })
118.                 }
119.                 .width('100%')
120.                 .constraintSize({ minHeight: 48 })
121.                 .justifyContent(FlexAlign.SpaceBetween)
122.               }
123.             }, (item: ConsigneeInfo, index: number) => JSON.stringify(item) + index)
124.           }
125.           .width('100%')
126.           .height(LayoutPolicy.matchParent)
127.           .scrollBar(BarState.Off)
128.           .divider({ strokeWidth: 0.5, color: '#33000000' })
129.           .padding({
130.             left: 12,
131.             right: 12,
132.             top: 4,
133.             bottom: 4
134.           })
135.           .borderRadius(16)
136.           .backgroundColor('#FFFFFF')
137.         }
138.         .borderRadius(16)
139.         .margin({ top: 12 })
140.         .constraintSize({ minHeight: 150, maxHeight: '50%' })
141.         .backgroundColor('#FFFFFF')
143.       }
145.       // 保存按钮
146.       if (this.saveAvailable) {
147.         // 可用状态
148.         Button("保存地址", { stateEffect: true })
149.           .width('100%')
150.           .alignRules({
151.             bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
152.           })
153.       } else {
154.         // 不可用状态
155.         Button("保存地址", { stateEffect: false })
156.           .width('100%')
157.           .alignRules({
158.             bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
159.           })
160.           .opacity(0.4)
161.           .backgroundColor('#317AFF')
162.       }
164.     }
165.     .height('100%')
166.     .width('100%')
167.     .padding({
168.       left: 16,
169.       right: 16,
170.       top: 24,
171.       bottom: 24
172.     })
173.     .backgroundColor('#F1F3F5')
174.     .alignRules({
175.       left: { anchor: '__container__', align: HorizontalAlign.Start }
176.     })
177.     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
178.   }
179. }

复制代码

该界面中通过RelativeContainer进行相对布局，保存按钮通过相对布局定位到界面底部，主要内容区域使用Column布局。在aboutToAppear周期函数中，初始化收货人列表数据，界面中通过List列表渲染完成显示。至此，主界面的静态效果就实现了。
但主界面代码依然较多，可以考虑将List列表渲染部分抽取为单独的组件，提取到单独文件中。在ets目录下新建components目录，在该目录下新建ConsigneeInfoItem.ets文件，将主界面列表渲染部分的内容拷贝进去并进改造。
ConsigneeInfoItem.ets文件内容：

1. import { ConsigneeInfo } from '../viewmodel/DataModel';
3. @Builder
4. export function ConsigneeInfoItem(item: ConsigneeInfo, checkAvailable?: () => void) {
5.   Row() {
6.     Text(item.label)
7.       .fontSize(16)
8.       .fontWeight(400)
9.       .lineHeight(19)
10.       .textAlign(TextAlign.Start)
11.       .fontColor('#000000')
12.       .opacity(0.9)
13.       .layoutWeight(1)
15.     TextArea({ placeholder: item.placeholder, text: item.value })
16.       .type(item.label === '收货人' ? TextAreaType.PHONE_NUMBER : TextAreaType.NORMAL)
17.       .fontSize(16)
18.       .fontWeight(500)
19.       .lineHeight(21)
20.       .padding(0)
21.       .borderRadius(0)
22.       .textAlign(TextAlign.End)
23.       .fontColor('#000000')
24.       .opacity(0.9)
25.       .backgroundColor('#FFFFFF')
26.       .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
27.       .layoutWeight(2)
28.       .onChange((value: string) => {
29.         item.value = value;
30.         //判断保存按钮是否可用(均填写即可保存)
31.         checkAvailable?.();
32.       })
33.   }
34.   .width('100%')
35.   .constraintSize({ minHeight: 48 })
36.   .justifyContent(FlexAlign.SpaceBetween)
38. }

复制代码

Index.ets改造

1. import  {ConsigneeInfoItem} from '../components/ConsigneeInfoItem'
2. ...
3. ListItem() {
4.                 //抽取为组件
5.                 ConsigneeInfoItem(item,() => {
6.                   if (this.consigneeInfos[0].value && this.consigneeInfos[1].value && this.consigneeInfos[2].value) {
7.                     this.saveAvailable = true;
8.                   } else {
9.                     this.saveAvailable = false;
10.                   }
11.                 })
12.               }
13. ...

复制代码

主界面效果实现完成
2.2 图片识别弹窗

点击“图片识别”按钮，弹出获取图片方式选择框。接下来完成该界面制作。
为了弹出框管理更加方面，封装弹窗口管理工具类PromptActionManager，在ets目录新建utils目录，新建PromptActionManager.ets文件，内容如下：

1. import { promptAction } from '@kit.ArkUI';
3. /**
4. * Dialog管理类
5. */
6. export class PromptActionManager {
7.   static ctx: UIContext;
8.   static contentNode: ComponentContent<Object>;
9.   static options: promptAction.BaseDialogOptions;
11.   static setCtx(ctx: UIContext) {
12.     PromptActionManager.ctx = ctx;
13.   }
15.   static setContentNode(contentNode: ComponentContent<Object>) {
16.     PromptActionManager.contentNode = contentNode;
17.   }
19.   static setOptions(options: promptAction.BaseDialogOptions) {
20.     PromptActionManager.options = options;
21.   }
23.   static openCustomDialog() {
24.     if (!PromptActionManager.contentNode) {
25.       return;
26.     }
27.     try {
28.       PromptActionManager.ctx.getPromptAction().openCustomDialog(
29.         PromptActionManager.contentNode,
30.         PromptActionManager.options
31.       )
32.     } catch (error) {
34.     }
35.   }
37.   static closeCustomDialog() {
38.     if (!PromptActionManager.contentNode) {
39.       return;
40.     }
41.     try {
42.       PromptActionManager.ctx.getPromptAction().closeCustomDialog(
43.         PromptActionManager.contentNode
44.       )
45.     } catch (error) {
47.     }
48.   }
49. }

复制代码

不同的弹出界面可能需要不同的样式控制，因此为弹出框的控制定义参数类型Params。在DataModel.ets文件中新加类Params，代码如下：

1. ...
2. export class Params {
3.   uiContext: UIContext;
4.   textAreaController: TextAreaController;     //识别信息的TextArea
5.   loadingController: CustomDialogController;  //识别过程中的加载提示框
7.   constructor(uiContext: UIContext, textAreaController: TextAreaController, loadingController: CustomDialogController) {
8.     this.uiContext = uiContext;
9.     this.textAreaController = textAreaController;
10.     this.loadingController = loadingController;
11.   }
12. }

复制代码

接下来制作弹出框组件界面，在components目录新建dialogBuilder.ets文件

1. import { Params } from '../viewmodel/DataModel'
2. import { PromptActionManager } from '../common/utils/PromptActionManager'
4. @Builder
5. export function dialogBuilder(params: Params): void {
6.   Column() {
7.     Text('图片识别')
8.       .font({ size: 20, weight: 700 })
9.       .lineHeight(27)
10.       .margin({ bottom: 16 })
11.     Text('选择获取图片的方式')
12.       .font({ size: 16, weight: 50 })
13.       .lineHeight(21)
14.       .margin({ bottom: 8 })
15.     Column({ space: 8 }) {
16.       Button('拍照')
17.         .width('100%')
18.         .height(40)
19.       Button('相册')
20.         .width('100%')
21.         .height(40)
22.         .fontColor('#0A59F2')
23.         .backgroundColor('#FFFFFF')
24.       Button('取消')
25.         .width('100%')
26.         .height(40)
27.         .fontColor('#0A59F2')
28.         .backgroundColor('#FFFFFF')
29.         .onClick(() => {
30.           PromptActionManager.closeCustomDialog();
31.         })
32.     }
33.   }
34.   .size({ width: 'calc(100% - 32vp)', height: 235 })
35.   .borderRadius(32)
36.   .backgroundColor('#FFFFFF')
37.   .padding(16)
38. }

复制代码

修改Index.ets文件，为“图片识别”按钮绑定事件，点击时弹出自定义对话框。

1. ...
2. import { PromptActionManager } from '../common/utils/PromptActionManager';
3. import { ComponentContent, LoadingDialog } from '@kit.ArkUI';
4. import { ConsigneeInfo,Params} from '../viewmodel/DataModel';
5. import { dialogBuilder } from '../components/dialogBuilder';
7. ...
8. private uiContext: UIContext = this.getUIContext();
9. private resultController: TextAreaController = new TextAreaController();
10. private loadingController: CustomDialogController = new CustomDialogController({
11.     builder: LoadingDialog({
12.       content: '图片识别中'
13.     }),
14.     autoCancel: false
15.   });
16. private contentNode: ComponentContent<Object> =
17.     new ComponentContent(this.uiContext, wrapBuilder(dialogBuilder),
18.       new Params(this.uiContext, this.resultController, this.loadingController));
19. ...
21. //图片识别按钮
22. .onClick(() => {
23.               PromptActionManager.openCustomDialog();
24.             })

复制代码

静态界面制作完成。
三、功能实现

1、通用功能封装

创建OCR识别管理类OCRManager，需要用到HarmonyOS SDK中的AI和媒体两类Kit。在utils目录下新建OCRManager.ets，封装相关方法。

1. import { textRecognition } from '@kit.CoreVisionKit';
2. import { camera, cameraPicker } from '@kit.CameraKit';
3. import { photoAccessHelper } from '@kit.MediaLibraryKit';
4. import { image } from '@kit.ImageKit';
5. import { fileIo as fs } from '@kit.CoreFileKit';
7. export class OCRManager {
8.   static async recognizeByCamera(ctx: Context, loadingController: CustomDialogController): Promise<string> {
9.     // The configuration information of cameraPicker
10.     let pickProfile: cameraPicker.PickerProfile = {
11.       cameraPosition: camera.CameraPosition.CAMERA_POSITION_UNSPECIFIED
12.     };
13.     try {
14.       let result: cameraPicker.PickerResult =
15.         await cameraPicker.pick(ctx, [cameraPicker.PickerMediaType.PHOTO], pickProfile);
16.       if (!result || !result.resultUri) {
17.         return '';
18.       }
19.       loadingController.open();
20.       return OCRManager.recognizeText(result.resultUri);
21.     } catch (error) {
22.       loadingController.close();
23.       return '';
24.     }
25.   }
27.   static async recognizeByAlbum(loadingController: CustomDialogController): Promise<string> {
28.     try {
29.       let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
30.       let photoResult: photoAccessHelper.PhotoSelectResult =
31.         await photoPicker.select({
32.           MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
33.           maxSelectNumber: 1,
34.           isPhotoTakingSupported: false
35.         });
36.       if (!photoResult || photoResult.photoUris.length === 0) {
37.         return '';
38.       }
39.       loadingController.open();
40.       return OCRManager.recognizeText(photoResult.photoUris[0]);
41.     } catch (error) {
42.       loadingController.close();
43.        return '';
44.     }
45.   }
47.   static async recognizeText(uri: string): Promise<string> {
48.     // Visual information to be recognized.
49.     // Currently, only the visual information of the PixelMap type in color data format RGBA_8888 is supported.
50.     let visionInfo: textRecognition.VisionInfo = { pixelMap: await OCRManager.getPixelMap(uri) };
51.     let result: textRecognition.TextRecognitionResult = await textRecognition.recognizeText(visionInfo);
52.     visionInfo.pixelMap.release();
53.     return result.value;
54.   }
56.   static async getPixelMap(uri: string): Promise<image.PixelMap> {
57.     // Convert image resources to PixelMap
58.     let fileSource = await fs.open(uri, fs.OpenMode.READ_ONLY);
59.     let imgSource: image.ImageSource = image.createImageSource(fileSource.fd);
60.     let pixelMap: image.PixelMap = await imgSource.createPixelMap();
61.     fs.close(fileSource);
62.     imgSource.release();
63.     return pixelMap;
64.   }
65. }

复制代码

2、拍照识别

弹出框界面，为“拍照”按钮绑定事件

1. import { common } from '@kit.AbilityKit'
2. import { OCRManager } from '../common/utils/OCRManager'
4. //拍照按钮
5. .onClick(async () => {
6.           PromptActionManager.closeCustomDialog();
7.           let text: string =
8.             await OCRManager.recognizeByCamera(params.uiContext.getHostContext() as common.UIAbilityContext,
9.               params.loadingController);
10.           params.loadingController.close();
11.           if (text) {
12.             params.textAreaController.deleteText();
13.             params.textAreaController.addText(text);
14.           }
15.         })
16.         

复制代码

主界面，修改TextArea，传入controller并双向绑定识别结果。

1. ...
2. @State ocrResult: string = '';
3. ...
5. //TextArea
6. controller: this.resultController,
7. text: $$this.ocrResult

复制代码

拍照识别功能实现。
3、相册识别

弹出框界面，为“相册”按钮绑定事件

1. //相册按钮
2. .onClick(async () => {
3.           PromptActionManager.closeCustomDialog();
4.           let text: string =
5.             await OCRManager.recognizeByAlbum(params.loadingController);
6.           params.loadingController.close();
7.           if (text) {
8.             params.textAreaController.deleteText();
9.             params.textAreaController.addText(text);
10.           }
11.         })

复制代码

相册识别功能实现。
4、地址解析

主界面的“地址解析”按钮，将通过图片识别或手工输入的地址信息，解析显示到对应的输入框中。
封装地址解析类AddressParse，本案例使用正则表达式进行匹配。后续可以使用大模型或NLP工具进行解析。
在utils目录下新建AddressParse.ets文件

1. import { ConsigneeInfo } from '../../viewmodel/DataModel';
3. export class AddressParse {
4.   static nameBeforeRegex = /([\w\u4e00-\u9fa5]+[\s\,\，\。]+|[\s\,\，\。]*)([\u4e00-\u9fa5]{2,4})[\s\,\，\。]+/;
5.   static nameAfterRegex = /[\s\,\，\。]+([\u4e00-\u9fa5]{2,4})[\s\,\，\。]*/;
6.   static nameTagRegex = /(?:收货人|收件人|姓名|联系人)[:：\s]*([\u4e00-\u9fa5]{2,4})/i;
7.   static namePlainRegex = /[\u4e00-\u9fa5]{2,4}/;
8.   static phoneRegex =
9.     /(1[3-9]\d[\s-]?\d{4}[\s-]?\d{4})|(\d{3,4}[\s-]?\d{7,8})|(\(\d{2,4}\)[\s-]?\d{4,8})|(\+\d{1,4}[\s-]?\d{5,15})/g;
10.   static phoneHyphenRegex = /[\(\)\s-]/g;
11.   static addressKeywords =
12.     ['收货地址', '收件地址', '配送地址', '所在地区', '位置',
13.       '地址', '寄至', '寄往', '送至', '详细地址'];
14.   static addressNoiseWords = ['收货人', '收件人', '姓名', '联系人', '电话', '手机', '联系方式', '：', ':', '，', ','];
16.   static extractInfo(text: string, info: ConsigneeInfo[]): ConsigneeInfo[] {
17.     const baseText: string = text.replace(/\s+/g, ' ')
18.     const phoneResult: string = AddressParse.extractPhone(baseText);
19.     const nameResult: string = AddressParse.extractName(baseText, phoneResult);
20.     const addressResult: string = AddressParse.extractAddress(baseText, phoneResult, nameResult);
21.     info[0].value = nameResult;
22.     info[1].value = phoneResult.replace(AddressParse.phoneHyphenRegex, '');
23.     info[2].value = addressResult;
24.     return info;
25.   }
27.   static extractPhone(text: string): string {
28.     const phoneMatch: RegExpMatchArray | null = text.match(AddressParse.phoneRegex);
29.     return phoneMatch ? phoneMatch[0] : '';
30.   }
32.   static extractName(text: string, phone: string): string {
33.     let name = '';
35.     // Try to extract from the label
36.     const nameFromTag = text.match(AddressParse.nameTagRegex);
37.     if (nameFromTag) {
38.       name = nameFromTag[1];
39.     }
41.     // Try to extract before or after the phone
42.     if (!name && phone) {
43.       const phoneIndex = text.indexOf(phone);
45.       const beforePhone = text.substring(0, phoneIndex);
46.       const nameBefore = beforePhone.match(AddressParse.nameBeforeRegex);
47.       if (nameBefore) {
48.         name = nameBefore[2];
49.       }
51.       if (!name) {
52.         const afterPhone = text.substring(phoneIndex + phone.length);
53.         const nameAfter = afterPhone.match(AddressParse.nameAfterRegex);
54.         if (nameAfter) {
55.           name = nameAfter[1];
56.         }
57.       }
58.     }
60.     // Try to extract 2-4 Chinese characters directly
61.     if (!name) {
62.       const nameMatch = text.match(AddressParse.namePlainRegex);
63.       if (nameMatch) {
64.         name = nameMatch[0];
65.       }
66.     }
67.     return name;
68.   }
70.   static extractAddress(text: string, phone: string, name: string): string {
72.     for (const keyword of AddressParse.addressKeywords) {
73.       const keywordIndex = text.indexOf(keyword);
74.       if (keywordIndex !== -1) {
75.         const possibleAddress = text.substring(keywordIndex + keyword.length).trim();
77.         // Clean up the beginning punctuation
78.         const cleanedAddress = possibleAddress.replace(/^[：:，,。、\s]+/, '');
80.         if (cleanedAddress.length > 5) {
81.           return cleanedAddress;
82.         }
83.       }
84.     }
86.     // Try to remove name and phone number
87.     let cleanedText = text;
88.     if (name) {
89.       cleanedText = cleanedText.replace(name, '');
90.     }
91.     if (phone) {
92.       cleanedText = cleanedText.replace(phone, '');
93.     }
95.     // Remove common distracting words
96.     AddressParse.addressNoiseWords.forEach(word => {
97.       cleanedText = cleanedText.replace(word, '');
98.     });
100.     // Extract the longest text segment that may contain an address
101.     const segments = cleanedText.split(/[\s,，。；;]+/).filter(seg => seg.length > 4);
102.     if (segments.length > 0) {
104.       // The segment containing the address key is preferred
105.       const addressSegments = segments.filter(seg =>
106.       seg.includes('省') || seg.includes('市') || seg.includes('区') ||
107.       seg.includes('县') || seg.includes('路') || seg.includes('街') ||
108.       seg.includes('号') || seg.includes('栋') || seg.includes('单元')
109.       );
111.       if (addressSegments.length > 0) {
112.         return addressSegments.join(' ');
113.       }
115.       // Otherwise select the longest segment
116.       return segments.reduce((longest, current) =>
117.       current.length > longest.length ? current : longest, '');
118.     }
120.     // Finally, return the entire text
121.     return cleanedText;
122.   }
123. }

复制代码

在主文件中调用地址解析方法，修改Index.ets文件

1. import { AddressParse } from '../common/utils/AddressParse';
3. ...
4. //地址解析按钮
5. .onClick(() => {
6.                 if (!this.ocrResult || !this.ocrResult.trim()) {
7.                   this.uiContext.getPromptAction().showToast({ message: $r('app.string.empty_toast') });
8.                   return;
9.                 }
10.                 this.consigneeInfos = AddressParse.extractInfo(this.ocrResult, this.consigneeInfos);
11.               })

复制代码

5、保存地址

为保存按钮绑定事件，清空界面数据并提示保存结果。
修改Index.ets文件，封装clearConsigneeInfos模拟保存操作后清空数据。

1. ...
2. // 保存地址，清空内容
3.   clearConsigneeInfos() {
4.     for (const item of this.consigneeInfos) {
5.       item.value = '';
6.     }
7.     this.ocrResult = '';
8.   }
10. ...
11. //保存地址按钮
12. .onClick(() => {
13.             if (this.consigneeInfos[0].value && this.consigneeInfos[1].value && this.consigneeInfos[2].value) {
14.               this.uiContext.getPromptAction().showToast({ message: '保存成功' });
15.               this.clearConsigneeInfos();
16.             }
17.           })

复制代码

至此，功能完成。
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！