# tui-zh-pinyin 中文转拼音开源组件

介绍

中文转拼音,获取拼音首字母等，使用场景：如获取通讯录按A-Z排序

# 引入

请自行将js文件引入项目中，并确保路径正确

//根据实际路径引入
import ZhToPinYin from '../../../components/common/tui-zh-pinyin/tui-zh-pinyin.js';

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

<template>
 <view class="container">
 	<view class="header">
 		<view class="title">中文转拼音</view>
 		<view class="sub-title">中文转拼音,获取拼音首字母等，使用场景：如获取通讯录按A-Z排序</view>
 	</view>
 	<view class="tui-title">中文</view>
 	<view class="tui-content">
 		{{chinese}}
 	</view>
 	<view class="tui-title">拼音带空格</view>
 	<view class="tui-content">
 		{{pinyinSpace}}
 	</view>
 	<view class="tui-title">拼音不带空格</view>
 	<view class="tui-content">
 		{{pinyin}}
 	</view>
 	<view class="tui-title">拼音首字母</view>
 	<view class="tui-content">
 		{{initials}}
 	</view>

 	<view class="tui-title">姓氏</view>
 	<view class="tui-content">
 		{{surname.join("，")}}
 	</view>
 	<view class="tui-title">姓氏拼音（处理多音字）</view>
 	<view class="tui-content">
 		{{surnamePy.join("，")}}
 	</view>
 	
 	<view class="tui-title">返回多音字所有首字母</view>
 	<view class="tui-content">
 		单 {{polyphone}}
 	</view>
 	
 </view>
</template>

<script>
 import ZhToPinYin from '@/components/common/tui-zh-pinyin/tui-zh-pinyin.js';
 export default {
 	data() {
 		return {
 			zhToPinYin: null,
 			chinese: "欢迎使用组件库，希望大家多多支持！",
 			pinyinSpace: "", //拼音带空格
 			pinyin: "", //拼音不带空格
 			initials: "", //首字母
 			surname: ["赵", "钱", "孙", "李", "周", "吴", "郑", "王", "曾", "单", "查", "尉", "晟"],
 			surnamePy: [],
             polyphone:""
 		};
 	},
 	onLoad() {
 		//titleCase：首字母是否大写 ,默认true
 		this.zhToPinYin = new ZhToPinYin(true);
 		this.pinyinSpace = this.zhToPinYin.getPinYin(this.chinese, true)
 		this.pinyin = this.zhToPinYin.getPinYin(this.chinese, false)
 		this.initials = this.zhToPinYin.getInitials(this.chinese)

 		let pyArr = []
 		for (let item of this.surname) {
 			let pinyin = this.zhToPinYin.surnamePolyphone(item)
 			pinyin = pinyin ? pinyin : this.zhToPinYin.getPinYin(item)
 			pyArr.push(pinyin)
 		}
 		this.surnamePy = pyArr
 		
 		this.polyphone=this.zhToPinYin.getInitials("单",true)
 	}
 };
</script>

<style>
 .container {
 	padding: 20rpx 0 120rpx 0;
 	box-sizing: border-box;
 }

 .header {
 	padding: 80rpx 90rpx 60rpx 90rpx;
 	box-sizing: border-box;
 }

 .title {
 	font-size: 34rpx;
 	color: #333;
 	font-weight: 500;
 }

 .sub-title {
 	font-size: 24rpx;
 	color: #7a7a7a;
 	padding-top: 18rpx;
 }

 .tui-title {
 	padding: 30rpx;
 	font-size: 32rpx;
 	color: #333;
 	font-weight: bold;
 	box-sizing: border-box;
 }

 .tui-content {
 	padding: 30rpx;
 	font-size: 30rpx;
 	color: #333;
 	box-sizing: border-box;
 	background-color: #fff;
 	word-break: break-all;
 }

</style>

<!-- 页面内容 -->
<view class="container">
 	<view class="header">
 		<view class="title">中文转拼音</view>
 		<view class="sub-title">中文转拼音,获取拼音首字母等，使用场景：如获取通讯录按A-Z排序</view>
 	</view>
 	<view class="tui-title">中文</view>
 	<view class="tui-content">
 		{{chinese}}
 	</view>
 	<view class="tui-title">拼音带空格</view>
 	<view class="tui-content">
 		{{pinyinSpace}}
 	</view>
 	<view class="tui-title">拼音不带空格</view>
 	<view class="tui-content">
 		{{pinyin}}
 	</view>
 	<view class="tui-title">拼音首字母</view>
 	<view class="tui-content">
 		{{initials}}
 	</view>

 	<view class="tui-title">姓氏</view>
 	<view class="tui-content">
 		{{surname}}
 	</view>
 	<view class="tui-title">姓氏拼音（处理多音字）</view>
 	<view class="tui-content">
 		{{surnamePy}}
 	</view>
 	
 	<view class="tui-title">返回多音字所有首字母</view>
 	<view class="tui-content">
 		单 {{polyphone}}
 	</view>
 	
 </view>

//data数据及方法
import ZhToPinYin from '../../../components/common/tui-zh-pinyin/tui-zh-pinyin.js';
Page({
  data: {
    zhToPinYin: null,
    chinese: "欢迎使用组件库，希望大家多多支持！",
    pinyinSpace: "", //拼音带空格
    pinyin: "", //拼音不带空格
    initials: "", //首字母
    surname: ["赵", "钱", "孙", "李", "周", "吴", "郑", "王", "曾", "单", "查", "尉", "晟"],
    surnamePy: [],
    polyphone: ""
  },
  onLoad: function (options) {
    //titleCase：首字母是否大写 ,默认true
    this.data.zhToPinYin = new ZhToPinYin(true);

    let pyArr = []
    for (let item of this.data.surname) {
      let pinyin = this.data.zhToPinYin.surnamePolyphone(item)
      pinyin = pinyin ? pinyin : this.data.zhToPinYin.getPinYin(item)
      pyArr.push(pinyin)
    }

    this.setData({
      pinyinSpace:this.data.zhToPinYin.getPinYin(this.data.chinese, true),
      pinyin:this.data.zhToPinYin.getPinYin(this.data.chinese, false),
      initials:this.data.zhToPinYin.getInitials(this.data.chinese),
      surnamePy:pyArr,
      polyphone:JSON.stringify(this.data.zhToPinYin.getInitials("单", true))
    })
  }
})

/* 样式 */
.container {
  padding: 20rpx 0 120rpx 0;
  box-sizing: border-box;
}

.header {
  padding: 80rpx 90rpx 60rpx 90rpx;
  box-sizing: border-box;
}

.title {
  font-size: 34rpx;
  color: #333;
  font-weight: 500;
}

.sub-title {
  font-size: 24rpx;
  color: #7a7a7a;
  padding-top: 18rpx;
}

.tui-title {
  padding: 30rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  box-sizing: border-box;
}

.tui-content {
  padding: 30rpx;
  font-size: 30rpx;
  color: #333;
  box-sizing: border-box;
  background-color: #fff;
  word-break: break-all;
}

.tui-btn-box {
  padding: 30rpx 40rpx;
  box-sizing: border-box;
  margin-top: 40rpx;
}

// Make sure to add code blocks to your code group

# Methods

方法名	说明	传入参数
getPinYin	获取拼音	chinese：中文文本 space：是否带空格返回
getInitials	提取首字母	chinese：中文文本 polyphone：是否是多音字
surnamePolyphone	姓氏多音处理，返回拼音	surname：姓氏文字