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

news2024/11/18 9:49:53

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

先给一下效果图：

1.png

2.png

一、界面布局

1、添加状态装饰器

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

比如，下面的代码：

image.png

我们在按钮的点击事件中只需要设置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的包已经成功下载，如下图所示：

image.png

2、获取密钥

登录 Bmob后端云 ，创建应用，获取Secret Key和Secret Code，如下图所示：

image.png

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"
      }
    ],
    ...省略更多
  }
}

image.png

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

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

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

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

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

getCode(){
  if(!this.phone)
    return promptAction.showToast({message:'请输入手机号码'})
  if(!this.isAgree)
    return promptAction.showToast({message:'请先同意用户协议和隐私政策'})

  this.isAllowGetCOde = false
  this.codeBtText = '重新获取(60)'

  Bmob.requestSmsCode(this.phone)
    .then((res)=>{
      promptAction.showToast({message:'发送成功'})

      // 限制60秒获取一次验证码
      this.timer = setInterval(()=>{
        this.count -= 1
        if(this.count<=0){
          clearInterval(this.timer)
          this.timer = -1
          this.isAllowGetCOde = true
          this.count = 60
          this.codeBtText = '获取验证码'
        } else{
          this.codeBtText = `重新获取(${this.count})`
        }
      },1000)
    })
    .catch((err)=>{
      this.isAllowGetCOde = true
      this.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 = false
      console.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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1882547.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据恢复篇：如何在 Android 手机上恢复未保存/删除的 Word 文档

数据恢复篇：如何在 Android 手机上恢复未保存/删除的 Word 文档

在 Android 手机上访问 Word 文档通常很简单&#xff0c;但是当这些重要文件被删除或未保存时会发生什么&#xff1f;这种情况虽然令人痛苦&#xff0c;但并非毫无希望。到 2024 年&#xff0c;有几种强大的方法来处理此类数据丢失。本指南重点介绍如何在Android手机上恢复已删…
阅读更多...
【java开发环境】多版本jdk 自由切换window和linux

【java开发环境】多版本jdk 自由切换window和linux

win10 一、准备 各种版本的jdk&#xff0c;按自己的需要下载。 我这里是需要jdk17和jdk8。 1、jdk17 下载&#xff1a;Java Downloads | Oracle&#xff0c;选择exe后缀文件 2、jdk8下 载&#xff1a;Java Downloads | Oracle&#xff0c;选择exe后缀文件 二、详细步骤 1、…
阅读更多...
leetcode 403周赛 包含所有1的最小矩形面积||「暴力」

leetcode 403周赛 包含所有1的最小矩形面积||「暴力」

3197. 包含所有 1 的最小矩形面积 II 题目描述&#xff1a; 给你一个二维 二进制 数组 grid。你需要找到 3 个 不重叠、面积 非零 、边在水平方向和竖直方向上的矩形&#xff0c;并且满足 grid 中所有的 1 都在这些矩形的内部。 返回这些矩形面积之和的 最小 可能值。 注意…
阅读更多...
狗都能看懂的Reinforcement Learning简介

狗都能看懂的Reinforcement Learning简介

文章目录 一、什么是强化学习二、强化学习的应用 一、什么是强化学习 强化学习的流程可以用上面这张图来说明&#xff1a;智能体&#xff08;Agent&#xff09;对环境进行观测&#xff0c;然后根据观测结果&#xff08;Observation / State&#xff09;采取相应的动作&#xff…
阅读更多...
C++中的类型转换操作符：static_cast reinterpret_cast const_cast dynamic_cast

C++中的类型转换操作符：static_cast reinterpret_cast const_cast dynamic_cast

目录​​​​​​​ C语言中的类型转换 C中的类型转换 C中的类型转换操作符 static_cast reinterpret_cast const_cast volatile关键字 赋值兼容 dynamic_cast C语言中的类型转换 基本概念&#xff1a;赋值运算符左右两侧类型不同&#xff0c;或形参与实参类型不匹配…
阅读更多...
LayerSkip：加速大模型推理的端到端解决方案

LayerSkip：加速大模型推理的端到端解决方案

大模型&#xff08;LLMs&#xff09;在多种应用中表现出色&#xff0c;但其高昂的计算和内存需求导致部署成本昂贵&#xff0c;尤其是在GPU服务器上。现有加速方案在部署到普通GPU时往往会导致准确性显著下降&#xff0c;而将大模型&#xff08;LLMs&#xff09;进一步加速以部…
阅读更多...
Pycharm的终端（Terminal）中切换到当前项目所在的虚拟环境

Pycharm的终端（Terminal）中切换到当前项目所在的虚拟环境

1.在Pycharm最下端点击终端/Terminal, 2.点击终端窗口最上端最右边的∨&#xff0c; 3.点击Command Prompt&#xff0c;切换环境&#xff0c; 可以看到现在环境已经由默认的PS(Window PowerShell)切换为项目所使用的虚拟环境。 4.更近一步&#xff0c;如果想让Pycharm默认显示…
阅读更多...
单电源RS-232收发器UM3221E/UM3222E/UM3232E

单电源RS-232收发器UM3221E/UM3222E/UM3232E

一般描述 UM3232 TSSOP16封装外观和丝印 UM3221E/UM3222E/UM3232E 系列是 3.3V 供电的 RS-232 收发器&#xff0c;适用于便携式或手持式应用。UM3221E 有一个驱动器/一个接收器&#xff0c;而 UM3222E/UM3232E 有两个驱动器/两个接收器。该器件具有低功耗、高数据速率能力和增强…
阅读更多...
2008-2022年款哈弗维修手册和电路图线路图接线图资料更新

2008-2022年款哈弗维修手册和电路图线路图接线图资料更新

经过整理&#xff0c;2005-2022年款长城哈弗全系列已经更新至汽修帮手资料库内&#xff0c;覆盖市面上99%车型&#xff0c;包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对照…
阅读更多...
JavaScript数组对象 , 正则对象 , String对象以及自定义对象介绍

JavaScript数组对象 , 正则对象 , String对象以及自定义对象介绍

1. Array数组对象 数组对象是使用单独的变量名来存储一系列的值。 1.1创建一个数组 创建一个数组&#xff0c;有三种方法。 【1】常规方式: let 数组名 new Array();【2】简洁方式: 推荐使用 let 数组名 new Array(数值1,数值2,...);【3】字面:在js中创建数组使用中括号…
阅读更多...
同城跑腿帮买帮取

同城跑腿帮买帮取

同城跑腿&#xff1a;便捷生活新选择 &#x1f680; 快速送达&#xff0c;同城跑腿让生活更便捷 在快节奏的现代生活中&#xff0c;时间成为了最宝贵的资源。当我们忙于工作、学习或家庭琐事时&#xff0c;常常会面临一些琐碎却紧急的需求&#xff0c;比如急需送一份文件、取一…
阅读更多...
Soul探索未来智能互动模式，人机交互重塑社交元宇宙体验

Soul探索未来智能互动模式，人机交互重塑社交元宇宙体验

在当今快速发展的科技领域中,人机交互已成为一个备受关注的话题。随着人工智能和机器学习技术的不断进步,人们与计算机和智能设备之间的互动方式正在发生翻天覆地的变化。这种交互不止局限于键盘和鼠标,更涵盖了语音识别、手势控制、虚拟现实等多种形式。人机交互的创新不仅提高…
阅读更多...
使用 c# + vue 制作 DevExpress 报表

使用 c# + vue 制作 DevExpress 报表

theme: smartblue 一、下载 DevExpress 下载地址: https://docs.devexpress.com/XtraReports/400128/product-information/devexpress-reporting-installer 二、创建报表 选择你要放置的文件夹&#xff0c;依次选择 “Add”&#xff0c; “New Item...” 第一次显示时可能没有详…
阅读更多...
1993Springboot智能旅游系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

1993Springboot智能旅游系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot智能旅游系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09; 旅游线路 推荐 采用&#xff08;蚁群算法&#x…
阅读更多...
三坐标测量机：柔性生产制造中的高精度测量解决方案

三坐标测量机：柔性生产制造中的高精度测量解决方案

柔性生产制造是制造业的核心竞争力之一。它强调生产线的灵活性和适应性&#xff0c;以满足市场对产品多样化和个性化的需求。在当今快速变化的工业环境中&#xff0c;随着消费者对产品个性化和定制化需求的增加&#xff0c;柔性生产制造和三坐标测量机的结合&#xff0c;为智能…
阅读更多...
服务器数据恢复—EVA存储RAID管理信息丢失的数据恢复案例

服务器数据恢复—EVA存储RAID管理信息丢失的数据恢复案例

意外断电导致raid硬件损坏或者riad管理信息丢失等raid模块损坏而导致数据丢失的情况非常普遍。正常情况下&#xff0c;磁盘阵列一旦创建完成就不会再对管理模块中的信息进行更改&#xff0c;但是raid管理模块中的信息属于可修改信息&#xff0c;一次或多次的意外断电可能会导致…
阅读更多...
猫头虎 Gemma和Gemini模型的区别是什么？

猫头虎 Gemma和Gemini模型的区别是什么？

猫头虎 &#x1f42f; Gemma和Gemini模型的区别是什么&#xff1f; 摘要&#x1f4d8; 在这篇文章中&#xff0c;我们将深入探讨Gemma和Gemini这两个由Google开发的AI模型。我们会对比它们的参数规模、计算资源需求和集成难度&#xff0c;帮助大家了解这两者之间的主要区别。…
阅读更多...
Spring两大核心思想 IoC和AoP

Spring两大核心思想 IoC和AoP

目录 ✨ 一、什么是IoC 1、定义 &#x1f38a; 2、IoC思想 &#x1f38a; 3、优势 &#x1f38a; 4、对象的管理 &#x1f38a; 存对象&#xff1a;Component 取对象&#xff1a;AutoWired ✨二、什么是DI 1、定义 &#x1f38a; 2、IoC和DI的关系&#x1f38a; 可…
阅读更多...
广东行政职业学院数据智能订单班开班暨上进双创工作室签约仪式圆满结束

广东行政职业学院数据智能订单班开班暨上进双创工作室签约仪式圆满结束

为响应教育领域数字化与智能化浪潮这一变革&#xff0c;给学生提供更好的教育资源和实践机会&#xff0c;6月27日&#xff0c;“泰迪广东行政职业学院数据智能订单班开班仪式暨上进双创工作室签约授牌”在广东行政职业学院举行。广东行政职业学院智慧政务学院&#xff08;电子信…
阅读更多...
JAVA里的object类

JAVA里的object类

public static String toString(Object o) // 获取对象的字符串表现形式 public static boolean equals(Object a, Object b) // 比较两个对象是否相等 public static boolean isNull(Object obj) // 判断对象是否为null pu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023