共享单车盛行，相信很多人手机中都装有摩拜单车App吧，应该都很熟悉吧。从这篇文章开始教大家做个摩拜单车的原型。App下载后，首先是登录，咱们就开始吧。
首先了解摩拜的登录流程：
1、输入手机号；2、获取验证码；3、输入验证码，点击开始进入App
根据流程，梳理一下：1、手机号输入框（文本框）要做长度限制（摩拜App没有做手机号的真伪验证，只做了长度的校验，输入11位数即可）；2、随机短信验证码四位，需要用随机函数获取随机数，再截取出4位长度的验证码；3、校验验证码，点击开始进入App
流程完毕，跟着我手把手的来做
第一步、准备一个动态面板，参照页面，把下面的原件放到动态面板中，手机号和验证码用文本框原件。
第二步、设置手机号文本框长度为11，添加事件当输入满11位时启用”获取验证码“按钮；设置验证码文本框长度为4，添加事件当输入满4位时启用”开始“按钮”
第三步、添加一个动态面板，展示短信验证码。
第四步、获取随机4位数的随机验证码。我们设定一个全局变量smsrandom（全局变量设置在菜单栏—项目—全局变量），辅助我们存储和传递一些值。Axure提供了一个随机函数random()，可随机出0~1的数值（即：0.000…1~0.999…），我们需要从随机数中截取4位数，我们可以使用截取函数substr
我们从小数点开始截取，截取5位数（包含小数点）；用replace函数去掉小数点
获取验证码的事件如下
取验证码时，需要倒计时，咱们添加一个文本框辅助（命名countdown）。点击“获取验证码”获取一个随机验证码并展示，进入倒计时。
第五步、短信验证码校验。这里将验证码和全局变量比较即可（因为前面一系列流程下来，全局变量已经存储了验证码的值）
到这就完成了摩拜App登录的原型制作了。
总结：
1、随机函数的使用
2、字符串截取函数的使用
3、巧用文本框原件的“文字改变时”来做倒计时
4、全局变量的设置和使用
最后，送给大家，一起学习进步。
原型预览地址：http://v8e1jl.axshare.com
源文件地址：http://pan.baidu.com/s/1c1C8jsO 密码：9l20
本文来自简书，本文观点不代表 PmTemple 立场，转载请联系原作者。原文链接：https://www.jianshu.com/p/0d83b89518f3
微信扫一扫 
支付宝扫一扫 
