青铜修炼手册：Axure实现汉字拼音首字母查询（非JS版）

上图就是我们要实现的目标：输入一个汉字能够查到它的拼音首字母。

实际上，明白了实现原理之后，通过汉字查拼音、查声母都是可以实现的。

关键在于有没有一个能够使用的源数据。

我们先来看看元件的准备工作。

 

上面这张图，大家能够看到这个案例使用的所有元件。

最关键的就是命名为“PinYin”的这个元件，它的文字包含了所有的文字以及对应的拼音首字母。

源数据下载：http://downloads.iaxure.com/pinyin.txt

大家可以下载源数据文件，复制里面的内容，粘贴到Axure编辑区中即可。

我们能够看到源数据的格式有一定的规律：[相同拼音首字母的所有文字][拼音首字母][逗号]......

那么，试想一下，当我们输入一个文字点查询时：

1、查询到汉字在源数据中出现的位置；

2、从查询到的位置向后查询逗号所在的位置；

3、获取到逗号所在位置前一位的拼音首字母。

完美！

所以，当我们准备好元件（注意将元件“PinYin”缩小尺寸后隐藏），就可以添加交互了。

交互如上图所示：

查找按钮“Search”【鼠标单击时】，添加用例与动作：【设置文字】于元件“Result”为一个公式...

具体公式是什么样子的呢？

如下图所示：

公式的完整内容是：“汉字的首字母是：[[p.charAt(p.indexOf(\',\',p.indexOf(w))-1)]]”。

简单说明一下：

• “p”和“w”是两个局部变量，分别存入了源数据和输入的汉字内容；
• “p.charAt()”能够获取指定位置的字符；
• “p.indexOf(w)”能够获取汉字在源数据中出现的位置。
• “p.indexOf(\',\',p.indexOf(w))-1”能够从汉字位置开始向右查找逗号所在的位置，找到的位置减1就是拼音首字母的位置。

这里值得一提的是“indexOf()”这个函数，它能够由左至右的从一个字符串中查询参数字符串出现的位置，它有两个参数，分别是“被查询的字符串”和“查询的起始位置”，如果没有提供第二个参数默认从最左侧向右查询。

好了，到这里这个案例就完成了。

希望大家能够从这个案例中学习到有用的知识点。

源文件下载：https://download.csdn.net/download/qq_27884377/11263644

本文由 Axure中文网 作者：小楼一夜听春语 发表，其版权均为 Axure中文网 所有，文章内容系作者个人观点，不代表 Axure中文网 对观点赞同或支持。如需转载，请注明文章来源。