bmob Harmony快速开发手机号一键登录功能

最新推荐文章于 2025-03-18 09:15:18 发布

迷途的小朋友

最新推荐文章于 2025-03-18 09:15:18 发布

阅读量1.4k

点赞数 25

分类专栏： Bmob Harmony鸿蒙开发文章标签： windows

本文链接：https://blog.csdn.net/m0_74037076/article/details/140046850

版权

最近用Bmob的鸿蒙SDK尝试了Harmony开发，做了一个几乎每个应用都会有的功能：手机号码+短信验证码一键注册登录的功能，感觉简直爽的不要不要的，ArkUI可见即可得的UI交互设计体验，配合Bmob后端云一如既往简单易用的风格，开发一些应用去占领鸿蒙市场。毕竟国产化是一个大的趋势，越早占坑越好。

先给一下效果图：

一、界面布局

1、添加状态装饰器

@State状态装饰器是鸿蒙ArKTS语言的一大特色。@State装饰的变量，又称为状态变量，可以和组件进行绑定渲染。当@State装饰的变量发生改变时，和这个变量绑定的UI的渲染也会发生改变。这样，我们的开发就可以变得非常松散耦合。

比如，下面的代码：

我们在按钮的点击事件中只需要设置message这个状态变量的值，和Text绑定的message就会立即渲染出来。

为了实现这个案例中的效果，我添加了如下的状态变量：

// 存储手机号码
@State
phone:string = ''

// 存储验证码
@State
code:string = ''

// 是否勾选了已阅读并同意用户协议和隐私政策
@State
isAgree:boolean = false

// 是否允许点击 获取验证码 按钮
@State
isAllowGetCOde:boolean = true

// 再次获取验证码倒计时（秒）
@State
count:number = 60

// 获取验证码按钮上的文字
@State
codeBtText:string = '获取验证码'

// 是否点击了 立即登录 按钮
@State
loading:boolean = false

2、布局和组件

这里用到了Image（图片）、Text（文本）、TextInput（输入框）、Checkbox（选择）、LoadingProgress（加载）组件，根据实际的情况，采用了Navigation（导航）、Scroll（滑动）、Column（行）、Row（列）布局。

我们可以在组件里面添加组件，比如下面的ArkUI代码，我们可以在按钮的组件中加上LoadingProgress组件和Text组件，实现更酷炫的效果。

Button({
    type:ButtonType.Normal}){
   
          Row(){
   
            if(this.loading){
   
              LoadingProgress()
                .color('#ffffff')
                .width(24)
                .height(24)
                .margin({
   right:10})
            }
            Text('立即登录').fontColor('#ffffff')
          }
        }

这个案例的布局和按钮UI代码如下：


Navigation(){
   
  Scroll(){
   
    Column(){
   
      Column(){
   
        Image($r("app.media.bmob"))
          .width(100)
          .aspectRatio(1)
          .borderRadius(10)

        Text('Bmob后端云')
          .fontSize(28)
          .margin({
   bottom:15,top:10})

        Text('Bmob后端云，让开发更简单')

最低0.47元/天解锁文章