中国語をピンインに変換する
適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。
- 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('宜搭是阿里巴巴自主研发的低代码应用开发平台，基于阿里云的云基础设置和钉钉的企业数字化操作系统，为每个组织提供低门槛、高效率的数字化业务应用生产新模式。在宜搭上生产的每个应用都天然具备互联互通、数据驱动和安全可靠的特点。');
});
}
コードの5行目の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コンポーネントの一意のidを変更することに注意してください。
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);
}
ピンイン注釈のスタイル設定 (必要に応じて)
- Htmlコンポーネントが見つかりました。
- 次のスタイルを追加します
.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);
});
}
コードの5行目の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コンポーネントの一意のidを変更することに注意してください。
オンラインで試遊する
この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
このドキュメントは役に立ちましたか？