中文转换为拼音

在搭建宜搭应用的过程中，你可能会遇到以下这些问题。

• CRM 系统中，在录入公司名称、供应商名称、联系人名称时，需要获取到名称的全拼及首字母大写，以进行规范化处理。
• 企业邮箱管理系统中，可以将员工姓名转换为拼音以自动分配企业邮箱账号。
• 学习系统中，使用拼音注释可以满足全年龄段人的学习需要。

前提条件

本教程使用到第三方中文转拼音插件，你可以先了解 pinyin-pro.js，详情请参考 pinyinPro.js。

实现效果

拼音转换

获取姓名全拼及首字母大写

实现步骤

拼音转换

创建自定义页面

创建自定义页面，详情请参考自定义页面。

在画布区域拖入以下组件。

• 多行文本：命名为待转换内容
• 多行文本：命名为转换结果（拼音字符串）。
• HTML：转换结果。

引入第三方中文转拼音插件

在左侧功能区的动作面板中，引入 pinyinPro.js。

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  this.utils.loadScript('https://g.alicdn.com/code/lib/pinyin-pro/3.19.6/index.min.js').then(() => {
    console.log('pinyinPro.js load success');
    this.$('textareaField_lye6ycnl').setValue('宜搭是阿里巴巴自主研发的低代码应用开发平台，基于阿里云的云基础设置和钉钉的企业数字化操作系统，为每个组织提供低门槛、高效率的数字化业务应用生产新模式。在宜搭上生产的每个应用都天然具备互联互通、数据驱动和安全可靠的特点。');
  });
}

代码第五行的 setValue 可以按需使用。

配置页面功能

将下述函数拷贝至页面 JS 中

/**
* 将中文转换为拼音
* @param text 需要转换拼音的内容
* @param options 配置项，可以参考下述文档
* API文档：https://pinyin-pro.cn/use/pinyin.html
*/
export function chinese2Pinyin(text = '', options = {}) {
  if (text) {
    const { pinyin } = pinyinPro;
    return pinyin(text, options);
  } else {
    return '';
  }
}

/**
* 将中文转换为拼音 HTML 字符串
* @param text 需要转换拼音 HTML 字符串的内容
* @param options 配置项，可以参考下述文档
* API文档：https://pinyin-pro.cn/use/html.html
*/
export function chinese2PinyinHTML(text = '', options = {}) {
  if (text) {
    const { html } = pinyinPro;
    return html(text, options);
  } else {
    return '';
  }
}

给【待转换内容】组件绑定事件

注意修改被 setValue 组件的唯一标识。

var interval = null;
export function onChange({ value }) {
  if (interval) {
    clearTimeout(interval);
  };
  interval = setTimeout(() => {
    this.$('textareaField_lye6ycnm').setValue(this.chinese2Pinyin(value, {
      pattern: 'pinyin', // 输出的结果信息，可选值：pinyin、initial、final、finalHead、finalBody、finalTail、num、first
      toneType: 'symbol', // 音调输出形式，可选值：symbol、num、none
      type: 'string', // 输出结果的类型，可选值：string、array、all
      multiple: false, // 是否输出多音字(仅在 text 为单字时生效)，可选值：false、true
      nonZh: 'consecutive', // 非汉字字符的处理形式，可选值：spaced、consecutive、removed
      surname: 'all', // 是否启用姓氏模式，可选值：off、head、all
    }));
    this.$('html_lye6ycnn').set('content', this.chinese2PinyinHTML(value, {
      resultClass: 'py-result-item', // 汉字和拼音最外层 <span> 标签的类名
      pinyinClass: 'py-pinyin-item', // 拼音外层 <rt> 标签的类名
      chineseClass: 'py-chinese-item', // 汉字外层 <span> 标签的类名
      toneType: 'symbol', // 拼音中音调的显示形式，可选值：symbol、none、num
    }));
    interval = null;
  }, 500);
}

配置拼音注释的样式（按需）

1. 找到 HTML 组件。

2. 添加下述样式：

.py-result-item {
  margin-right: 4px;
}

.py-chinese-item {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}

.py-pinyin-item {
  font-size: 14px;
  color: #0089FF;
}

类名对应如下：

• 整体（中文+拼音）
  
  
• 中文
  
  
• 拼音
  
  

获取姓名全拼及首字母大写

创建普通表单页面

创建普通表单页面，详情请参考普通表单。

在画布区域拖入以下组件。

• 单行文本：命名为姓名
• 单行文本：命名为姓名全拼
• 单行文本：命名为姓名首字母

引入第三方中文转拼音插件

在左侧功能区的动作面板中，引入 pinyinPro.js。

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  this.utils.loadScript('https://g.alicdn.com/code/lib/pinyin-pro/3.19.6/index.min.js').then(() => {
    console.log('pinyinPro.js load success');
    this.$('textField_lye8rva5').setValue(loginUser.userName);
  });
}

代码第五行的 setValue 可以按需使用。

配置页面功能

将下述函数拷贝至页面 JS 中

/**
* 将中文转换为拼音
* @param text 需要转换拼音的内容
* @param options 配置项，可以参考下述文档
* API文档：https://pinyin-pro.cn/use/pinyin.html
*/
export function chinese2Pinyin(text = '', options = {}) {
  if (text) {
    const { pinyin } = pinyinPro;
    return pinyin(text, options);
  } else {
    return '';
  }
}

给【姓名】组件绑定事件

var interval = null;
export function onChange({ value }) {
  if (interval) {
    clearTimeout(interval);
  };
  interval = setTimeout(() => {
    this.$('textField_lye8rva6').setValue(this.chinese2Pinyin(value, {
      toneType: 'none', // 音调输出形式
      nonZh: 'consecutive', // 非汉字字符的处理形式
      surname: 'all', // 是否启用姓氏模式
      separator: '', // 拼音之间的分隔符
    }).toUpperCase());
    this.$('textField_lye8rva7').setValue((this.chinese2Pinyin(value, {
      pattern: 'first', // 输出的结果信息
      toneType: 'none', // 音调输出形式
      type: 'array', // 输出结果的类型
      nonZh: 'consecutive', // 非汉字字符的处理形式
      surname: 'all', // 是否启用姓氏模式
    })[0] || '').toUpperCase());
    interval = null;
  }, 500);
}

注意修改被 setValue 组件的唯一标识。

在线试玩