1. PmTemple首页
  2. AxureRP专区
  3. Axure教程

Axure教程-摩拜单车登录

        共享单车盛行,相信很多人手机中都装有摩拜单车App吧,应该都很熟悉吧。从这篇文章开始教大家做个摩拜单车的原型。App下载后,首先是登录,咱们就开始吧。

首先了解摩拜的登录流程:

1、输入手机号;2、获取验证码;3、输入验证码,点击开始进入App

根据流程,梳理一下:1、手机号输入框(文本框)要做长度限制(摩拜App没有做手机号的真伪验证,只做了长度的校验,输入11位数即可);2、随机短信验证码四位,需要用随机函数获取随机数,再截取出4位长度的验证码;3、校验验证码,点击开始进入App

流程完毕,跟着我手把手的来做

第一步、准备一个动态面板,参照页面,把下面的原件放到动态面板中,手机号和验证码用文本框原件。

Axure系列:摩拜单车-----登录

第二步、设置手机号文本框长度为11,添加事件当输入满11位时启用”获取验证码“按钮;设置验证码文本框长度为4,添加事件当输入满4位时启用”开始“按钮”

Axure系列:摩拜单车-----登录
Axure系列:摩拜单车-----登录

第三步、添加一个动态面板,展示短信验证码。

Axure系列:摩拜单车-----登录

第四步、获取随机4位数的随机验证码。我们设定一个全局变量smsrandom(全局变量设置在菜单栏—项目—全局变量),辅助我们存储和传递一些值。Axure提供了一个随机函数random(),可随机出0~1的数值(即:0.000…1~0.999…),我们需要从随机数中截取4位数,我们可以使用截取函数substr

Axure系列:摩拜单车-----登录
substr(star,lenth)表示从起始位置(包含起始位置)向右截取一定长度的字符串

我们从小数点开始截取,截取5位数(包含小数点);用replace函数去掉小数点

Axure系列:摩拜单车-----登录

获取验证码的事件如下

Axure系列:摩拜单车-----登录

取验证码时,需要倒计时,咱们添加一个文本框辅助(命名countdown)。点击“获取验证码”获取一个随机验证码并展示,进入倒计时。

Axure系列:摩拜单车-----登录

第五步、短信验证码校验。这里将验证码和全局变量比较即可(因为前面一系列流程下来,全局变量已经存储了验证码的值)

Axure系列:摩拜单车-----登录

到这就完成了摩拜App登录的原型制作了。

总结:

1、随机函数的使用

2、字符串截取函数的使用

3、巧用文本框原件的“文字改变时”来做倒计时

4、全局变量的设置和使用

最后,送给大家,一起学习进步。

原型预览地址:http://v8e1jl.axshare.com

源文件地址:http://pan.baidu.com/s/1c1C8jsO 密码:9l20

本文来自简书,本文观点不代表PmTemple立场,转载请联系原作者。原文链接:https://www.jianshu.com/p/0d83b89518f3

发表评论

电子邮件地址不会被公开。 必填项已用*标注