Axure练习：实现微信支付小键盘

使用微信支付的时候，需要输入支付金额和支付密码，这个时候会呼出微信支付小键盘。所以，我们今天就看看如何通过Axure实现微信支付小键盘。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

效果查看：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

【需求分析】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

1、点击数字键盘，在转账金额区域录入对应的金额；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

2、点击删除键，删除对应的金额数字；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

3、0不能作为第一个数字字符；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

4、小数点不能作为第一个字符，并且只能出现一次；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

5、小数点只能出现一次；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

6、小数点后面最多出现两位数字；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

7、所有输入的字符不能超过10个；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

【原型设计】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

1、拖入转账金额输入框，用于显示转账的金额；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

2、拖入0-9，小数点，以及删除和转账等矩形框，如上图那样布局；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

【交互设计】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

1、对于1-9的数字键盘，判断已经输入的是否大于10，或者是否已经输入了小数点，如果不是，则把数字键盘的字符输入金额输入框；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

2、对于0，除了判断步骤1的条件之外，还需要添加是否当前金额输入框是否为空，即如果当前金额输入框为空，则不能输入0(0不能作为第一个字符)；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

3、对于小数点，除了判断步骤1的条件之外，还需要添加判断当前金额输入框是否为空，以及是否已经输入小数点，即小数点不能为第一个字符，小数点只能输入一次；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

4、对于删除键，判断转账输入框的金额是否为空，如果不为空，则删除输入框中最后一个字符；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html

到了这一步，微信支付小键盘就算完成了，同学们赶紧试试吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18187.html