00:03
这节我们看一下登录注册页面的实现。我们在应用里面啊,就涉及到一些用户相关的操作,比如说加入购物车。啊,进入个人中心就会触发我们的登录操作。嗯,首先我们看一下登录页面的一个代码。中端页面我们这里有两部分组成。一部分是我们的一个导航栏。另外一部分是我们啊,下面有一个。就整个这部分。可以滑动的这部分。那这个导航栏呢,我们是啊,使用的一个自定义组件。
01:00
可以看到在微置这个自定义组件,我们啊有是从啊这个comp下面,然后给把点ST里面。引入进来。那使用的时候我们这啊跟普通啊组件使用方式一样啊,传的一个T啊red button text。标题右边按钮。You被按了时间。就跟我们啊。看着使用这个自定义组件,就跟我们使用啊这些普通的一些组件是一样的效果。那我们看一下这个这些组件,它是怎么来接收我们传的这些属性呢?比如这里传递一个标题。那这个组件里面,我们看一下它的视线。它的这个标题我们可以看到,它是啊,有三。有三部分,左边这部分是。左边的按钮啊,中间是一个标题。
02:03
这是一个右边按钮的一个。首先看下我们这个标题它是怎么实现的。标题。它是通过this.purpose点。也就是说从当前这个啊里面。取出这个title。就是说我们前面啊,我们在使用这个自定义组件的时候,传的这些属性啊。统一的都是放在这个。啊,自定义组件里面的一个purpose下面。然后我们只需要从这个purpose下面啊取出来啊,绑定就行。这个左边按钮啊。这个点击事件。如果说也是以这个点击事件也是一个啊数据绑定的方式写的。
03:00
如果说我们这个purpose里面有这个。啊,左边事件也就是说使用这个自定义组件的时候,他传的这个啊。实践方法。那我们就。点击以后我们就调用这个。传的这个,前面传的这个,否则我们就。啊,调用我们自己定义的这个时间。自己定义的这个事件呢。啊。On left button。调研以后就简单的啊,返回按钮嘛,我们就简单的啊,可是问就是关闭当前页面。可以看到。我们前面我们在啊。使用这个时候我们是没有啊,没有传那个button的一个事件,所以说我们这里点了以后。默认就会触发我们自己这个组件里面定义的访问按钮这个事件。
04:07
那我们看一下主体部分是怎么实现的。主体部分。可以看到,实际上很简单。啊,一个。两个输入框。那这个输入框啊,啊,和H5里面的是一样的,也是。然后有啊。然后type指定是密码框还是普通文本框。那这里我们可以看到这个键盘,键盘弹出以后啊。我们只有这部分是可以滚动的。我们这个。导航哪部分啊是固定的。如果说咱们以前用我们的啊,A1.0开发技术的时候啊,用到这种就是有这种啊,键盘弹出的这种页面的话。
05:03
我们如果是这个导航栏和这个下面的部分是在同一个页面的话,我们的这个。导航栏整个页面是会是一体的,是会跟着往上移的这个。那如果要做成我们现在这种效果啊。它就在这个导航栏啊,做成一个window,然后下面这部分做成一个frame,也就是window加frame的方式,这是我们以前1.0的实现方式,那可以看到我们现在实际上是在同一个页面就实现了这种效果。那这个是啊,就是通过我们这个。我们的SC只是啊。我们这个SC可以看下这个样式SC的样式。的样式,它是一个一,也就是说上面部分这部分是固定的,然后这部分啊,这是我们的,它是一个啊自适应的。
06:04
然后这个键盘弹出来以后啊。只是这个SC的部分。可以啊,上下移动。这样的话,我们这个然后更新把这部分它就会固定,这部分始终是固定,然后啊,只是这部分的区域啊。进行啊一个变化。这样的话,相对于我们在这个以前的这A票的1.0的实现方式,咱们就更简单了,以前要用window加frame方式。比如说我们把这个。变成一个普通的view。这样的话我们来看一下。可以看到啊。整个包括这个导航栏,在整个页面就往上移。
07:05
所以说这里我们啊处理键盘呢,我们使用这个SC啊。有个这样的一个功能。那我们看一下。登录按钮触发以后,我们执行的一个登录操作,首先我们是啊,获取这个用户名和密码的一个。进行登录。啊,登录是用我们的价格方法,这个价格方法我们是,啊封装在这个。KN对象下,我们可以看一下。这个价格是实际上是对于我们的API点价格进行了一个分装,然后处理的一些啊统一的一些逻辑。然后比如说在这个header里面啊,统一设置了我们的content type为那个OBJA。
08:03
然后统一处理的,我们的一个啊幺就是一个地址。然后这里在这个回调里面啊,我们有一个是否登录失效的一个判断,如果说是啊,就是在这个价格值里面,我们判断啊,当前。这个处于未登录状态,说明登录已失效,我们就会请求一个啊,显示一个重新登录的一个按钮。这就是我们登录那个页面,登录成功以后啊,我们会对啊。用户信息做一个保存,这个保存我们是。通过api.set。啊。再方法来保存。这个是保存一个偏方的数据。获取的时候,获取的时候我们是通过get。
09:02
啊,来获取。获取的时候可以通过啊同步方法,也可以通过异步方法来获取,我们这里获取的时候是通过一个可以看到是通过一个同步方法,通过这个S这个参数来指定。那这啊,直接返回数据。点的这个注册页面啊,我们会。进入这个啊,我们注册页面,注册页面啊。从这个界本,我们大体上或者登录啊是差不多的,也是啊,具体基本上都能复用,比如导航栏啊,我们的这个UI结构其实啊都是一致的。啊。用户名啊,密码确认密码。这个我们就不多讲了,然后注册成功以后啊。我们看一下注册成功以后。我们会进行直接啊。
10:00
后台会直接进行登录,然后我们这里会保存,跟登录一样,我们会保存这个啊用户信息,然后提示注册成功。然后我们就会直接通过api.close to win方法。来跳转到我们。就是触发登录操作之前的这个页面。就是to win就是跳转到指定的一个window。
我来说两句