分享一个给文字加拼音的鸿蒙三方库pinyin-pro

魔眼天王

于 2024-12-31 12:27:34 发布

阅读量604

点赞数 3

分类专栏：鸿蒙实践文章标签： harmonyos

本文链接：https://blog.csdn.net/zwDeity/article/details/144847429

版权

鸿蒙实践专栏收录该内容

10 篇文章

订阅专栏

pinyin-pro库的用法和注意事项

一、pinyin-pro简介

pinyin-pro是一个用于将中文转换为拼音的三方库，支持多种输出格式，如数组、字符串等。它在处理中文文本转拼音的需求上提供了便捷的方法，广泛应用于需要拼音转换功能的应用程序中。

二、使用方法

1. 安装

根据官方文档，在项目中引入pinyin-pro库前，确保按照其提供的安装指南完成依赖项的添加。对于ArkTS项目，可以通过包管理工具进行安装。

npm install pinyin-pro

2. 引入与使用

在项目中引入pinyin-pro库后，可以通过以下方式使用其提供的pinyin函数。

// 引入pinyin函数
import { pinyin } from "pinyin-pro";

// 示例：将一段中文文本转换为拼音数组
const text = "你所谓的迷茫不过是清醒地看着自己沉沦";
const result = pinyin(text, { type: "array" });
console.log(result); // 输出: ["ni", "suo", "wei", "de", "ma", "nang", "bucuo", "shi", "qing", "xǐng", "kan", "zhe", "zi", "ji", "shen"]

三、实际代码案例

1. 在ArkTS项目中集成pinyin-pro

假设我们有一个简单的ArkTS项目，其中包含一个输入框和一个显示区域，用户输入中文后，将自动显示对应的拼音。

// 引入pinyin-pro库中的pinyin函数
import { pinyin } from "pinyin-pro";

// 定义一个类来存储字符和其对应的拼音
class PinyinBean {
  pinyin: string; // 拼音
  character: string; // 对应的汉字

  // 构造器，初始化拼音和字符
  constructor(pinyin: string, character: string) {
    this.pinyin = pinyin;
    this.character = character;
  }
}

@Entry
@Component
struct Index {
  // 默认的用户输入内容
  @State private defaultInput: string = "你所谓的迷茫不过是清醒地看着自己沉沦";
  // 用户输入的内容，当这个状态改变时会触发convertToPinyin方法
  @State @Watch('convertToPinyin') userInput: string = "";
  // 转换结果显示，存储了转换后的拼音和对应字符
  @State conversionResult: PinyinBean[] = [];

  // 方法：将用户输入的文本转换成拼音
  convertToPinyin() {
    // 使用pinyin-pro库将输入的文本转换成拼音数组
    const pinyinArray: string[] = pinyin(this.userInput, { type: "array" });
    // 将输入的文本分割成单个字符的数组
    const charArray: string[] = this.userInput.split("");
    // 清空转换结果数组
    this.conversionResult.length = 0;
    // 遍历拼音数组，创建PinyinBean对象，并将其添加到转换结果数组中
    for (let i = 0; i < pinyinArray.length; i++) {
      this.conversionResult.push(new PinyinBean(pinyinArray[i], charArray[i]));
    }
  }

  build() {
    // 创建一个垂直布局的容器
    Column() {
      // 添加标题栏
      Text('文字注拼音')
        .fontColor(Color.Black)
        .fontSize(18)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.White)
        .shadow({
          radius: 2,
          color: "#d5d5d5",
          offsetX: 0,
          offsetY: 5
        });

      // 用户输入框
      Row() {
        TextArea({
          text: $$this.userInput,
          placeholder: `请输入内容。如：${this.defaultInput}`
        })
          .backgroundColor(Color.Transparent)
          .padding(0)
          .height('100%')
          .placeholderColor(Color.Gray)
          .fontColor(Color.Black)
          .caretColor("#f34329d7")
          .borderRadius(0)
          .onBlur(() => {})
          .onFocus(() => {})
          .width('100%');
      }
      .padding('10lpx')
      .backgroundColor("#f2f1fd")
      .width('650lpx')
      .height(120)
      .borderWidth(1)
      .borderRadius(10)
      .borderColor(Color.Gray)
      .margin({ top: '10lpx' });

      // 结果显示区域
      Column() {
        Row() {
          Flex({ wrap: FlexWrap.Wrap }) {
            ForEach(this.conversionResult, (item: PinyinBean, index: number) => {
              Column() {
                Text(`${item.pinyin}`).fontColor("#f34329d7").fontSize(18);
                Text(`${item.character}`).fontColor("#f34329d7").fontSize(18);
              }.padding(3);
            })
          }
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%');
      }
      .visibility(this.conversionResult.length != 0 ? Visibility.Visible : Visibility.None)
      .alignItems(HorizontalAlign.Start)
      .width('650lpx')
      .padding('10lpx')
      .margin({ top: '10lpx' })
      .borderRadius(10)
      .backgroundColor(Color.White)
      .shadow({
        radius: 10,
        color: "#d5d5d5",
        offsetX: 0,
        offsetY: 0
      });
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#f4f8fb");
  }
}