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

最近用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后端云，让开发更简单').fontSize(14).fontColor('#979797')}Column({space:15}){TextInput({placeholder:'请输入手机号码',text:this.phone}).type(InputType.PhoneNumber).onChange(val=>this.phone=val)Row({space:5}){TextInput({placeholder:'验证码',text:this.code}).type(InputType.Number).layoutWeight(1).showPasswordIcon(true).onChange(val=>this.code=val)Button(this.codeBtText).backgroundColor(this.isAllowGetCOde?'#fa711d':'#979797').enabled(this.isAllowGetCOde).width(100).onClick(()=>{this.getCode()})}Row(){Checkbox().selectedColor('#fa711d').aspectRatio(1).select(this.isAgree).onChange((val)=>{this.isAgree=val})Row({space:4}){Text('已阅读并同意').fontSize(14).fontColor('#979797')Text('用户协议').fontSize(14).fontColor('#979797')Text('和').fontSize(14).fontColor('#979797')Text('隐私政策').fontSize(14).fontColor('#979797')}}.width('100%')Button({type:ButtonType.Normal}){Row(){if(this.loading){LoadingProgress().color('#ffffff').width(24).height(24).margin({right:10})}Text('立即登录').fontColor('#ffffff')}}.width('100%').backgroundColor('transparent').stateEffect(false).borderRadius(4).height(44).linearGradient({direction:GradientDirection.Right,colors:[['#fc9c1c',0],['#fa711d',1]]}).enabled(!this.loading).onClick(()=>{this.login()})}.padding(30)}}
}
.mode(NavigationMode.Stack)

我们可以在隐私政策和用户协议的Text中实现点击事件，这样就能够跳转到对应的内容阅读中。这也是我们为什么要把完整“已阅读并同意用户协议和隐私政策”拆分出来的原因。

二、添加交互代码

1、导入Bmob库

在 DevEco Studio 开发工具的命令行（Terminal）中执行下面的命令，安装Bmob Harmony SDK：

ohpm install @bmob/bmob

如果一切顺利，你会在当前项目下的oh_modules目录下看到@bmob/bmob的包已经成功下载，如下图所示：

2、获取密钥

3、初始化应用

在你创建的鸿蒙应用中，entry/src/main/ets 下面新建一个ArkTS File，名为BmobApp。代码如下：

import { Bmob } from '@bmob/bmob';
import AbilityStage from '@ohos.app.ability.AbilityStage';
export default class BmobApp extends AbilityStage {onCreate() {super.onCreate();Bmob.initialize('你的Secret Key', '你的Secret Code')}
}

4、配置网络权限和设置应用入口

打开 entry/src/main/module.json5 文件，在module节点下面新增 srcEntry 和 requestPermissions 子节点，配置如下：

{"module": {"name": "entry","type": "entry","description": "$string:module_desc","mainElement": "EntryAbility","deviceTypes": ["phone","tablet"],"srcEntry": "./ets/BmobApp.ets","requestPermissions": [{"name": "ohos.permission.INTERNET"}],...省略更多}
}

5、编写获取短信验证码代码

获取短信验证码的代码，首先要先进行一些必要的数据验证。

为了防止用户拼命点击获取短信验证码的按钮，这里做了一个限制，当用户点击获取短信验证码之后，会有一个60秒的倒计时，倒计时结束，才能重新点击。

发送短信验证码的代码其实非常简单，就是调用Bmob.requestSmsCode()的方法，传递手机号码作为入口参数就可以轻松发送短信了。

整个发送短信验证码的事件代码如下：

getCode(){if(!this.phone)return promptAction.showToast({message:'请输入手机号码'})if(!this.isAgree)return promptAction.showToast({message:'请先同意用户协议和隐私政策'})this.isAllowGetCOde = falsethis.codeBtText = '重新获取(60)'Bmob.requestSmsCode(this.phone).then((res)=>{promptAction.showToast({message:'发送成功'})// 限制60秒获取一次验证码this.timer = setInterval(()=>{this.count -= 1if(this.count<=0){clearInterval(this.timer)this.timer = -1this.isAllowGetCOde = truethis.count = 60this.codeBtText = '获取验证码'} else{this.codeBtText = `重新获取(${this.count})`}},1000)}).catch((err)=>{this.isAllowGetCOde = truethis.codeBtText = '获取验证码'promptAction.showToast({message:`获取验证码错误，原因：${err.error}`})})
}

6、手机号码+短信一键注册登录

这部分代码也是非常简单，首先进行必要的校验，然后执行Bmob.User().signOrLoginByMobilePhone()方法，传递手机号码和收到的验证码，即可实现一键注册登录。

login(){if(!this.phone)return promptAction.showToast({message:'请输入手机号码'})if(!this.code)return promptAction.showToast({message:'请输入验证码'})if(!this.isAgree)return promptAction.showToast({message:'请先同意用户协议和隐私政策'})this.loading = true// 调用Bmob后端云的手机号码一键登录的服务Bmob.User().signOrLoginByMobilePhone(this.phone,this.code).then((res)=>{this.loading = falseconsole.log('请求返回' + JSON.stringify(res));router.replaceUrl({url:'pages/Index'})promptAction.showToast({message:'注册成功'})}).catch((err)=>{promptAction.showToast({message:`发生错误，原因:${err.error}`})})
}