【“蒙”友会“稿”起来】HarmonyOS 3.1握手Serverless - UI篇

本文链接：https://blog.youkuaiyun.com/csdndevpress0028/article/details/131002972

文章介绍了如何基于LoginAbility模板创建一个包含登录、注册功能的UI界面，涉及Text、TextInput、Divider、Button等组件的使用，并计划集成Serverless认证服务、云函数和云数据库，提供了一种端云一体化项目的开发思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

此帖主要讲解界面开发，有了此UI界面，之后的结合Serverless认证服务、云函数、云数据库、云存储帖子就有面子了^_^ 打算这系列结合Serverless不用端云一体化项目开发，在AGC开通好相关配置，然后下载相关json文件，复制到项目中使用，跟着开发文档一步步配置，从中学习到更多的知识，当然初学者，可以创建端云一体化项目学习、开发，更容易上手，然后再尝试创建一个空项目或带模板项目，手工配置Serverless相关设置，本UI项目是基于Login Ability模板创建的，添加了邮箱注册和手机注册页面。

效果：

讲解：

1. 主界面、包含标题导航组件，登录组件，注册组件，客服与隐私声明组件，其实主界面就是一个组合页面，有各组件拼接而成，关键代码以下：

@Entry
@Component
struct LoginPage {
  @Builder NavigationTitle() {
    Row() {
      Text($r('app.string.title'))
        .fontSize($r('app.float.title_text_size'))
        .fontColor($r('app.color.title'))
        .fontWeight(CommonConstants.TITLE_FONT_WEIGHT)
    }
    .alignItems(VerticalAlign.Center)
  }

  build() {
    Column() {
      // 标题导航组件
      Navigation()
        .title(this.NavigationTitle())
        .hideToolBar(true)
        .align(Alignment.Start)
        .width(CommonConstants.NAVIGATION_WIDTH_PERCENT)
        .height($r('app.float.navigation_height'))
        .titleMode(NavigationTitleMode.Mini)

      Scroll() {
        Column() {
          // 登录组件
          LoginComponent()
          // 占位组件
          Blank()
          // 邮箱和手机注册入口组件
          AuthComponent()
          // 隐私声明和客服组件
          PrivacyStatementComponent()
        }
        .height(CommonConstants.SCROLL_HEIGHT_PERCENT)
        .constraintSize({ minHeight: $r('app.float.s