苏州专业正规网站建设,c 网站开发案例详解百度云,个人备案的网站可以做商城,类似站酷的设计类网站最近用Bmob的鸿蒙SDK尝试了Harmony开发#xff0c;做了一个几乎每个应用都会有的功能#xff1a;手机号码短信验证码一键注册登录的功能#xff0c;感觉简直爽的不要不要的#xff0c;ArkUI可见即可得的UI交互设计体验#xff0c;配合Bmob后端云一如既往简单易用的风格做了一个几乎每个应用都会有的功能手机号码短信验证码一键注册登录的功能感觉简直爽的不要不要的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 false2、布局和组件
这里用到了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(valthis.phoneval)Row({space:5}){TextInput({placeholder:验证码,text:this.code}).type(InputType.Number).layoutWeight(1).showPasswordIcon(true).onChange(valthis.codeval)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.isAgreeval})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、获取密钥
登录 Bmob后端云 创建应用获取Secret Key和Secret Code如下图所示 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.count0){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}})})
}三、源码获取
https://gitee.com/zhang-ming-123/bmob-harmony-demo
四、参考资料
https://doc.bmobapp.com/data/harmony/index.html
