鸿蒙NEXT开发笔记（一）仿微信聊天App的登录页面

一、楔子

随着纯血鸿蒙公测的时间越来越近，越来越多的小伙伴准备上手鸿蒙App开发，可是基于鸿蒙实现的实战App项目比较缺乏，很多人看了半天的官方API，却迟迟难以自己动手实现一个完整的鸿蒙App项目。一部分朋友对着公开的视频教程尝试自学，只不过往往学到关键部分却发现断更了，其中的原因各种各样，毕竟饿肚子学雷锋也是有难度的呀。
那么有没有一个从简单到高级的鸿蒙App实战项目，能够循序渐进适合零基础的小白呢？以往在Android体系学习App开发的时候，都有像《Android Studio开发实战 从零基础到App上线》这样既通俗易懂，又提供众多实战项目的入门教程，那么《Android Studio开发实战 从零基础到App上线》书中的实战项目能否在鸿蒙App中实现呢？
其实DevEco Studio的许多操作都跟Android Studio大同小异，把Android App实战项目改造为鸿蒙App完全可行，下面就以“仿微信聊天”的实战App项目为例，基于HarmonyOS NEXT也就是鸿蒙5.0版本，详细介绍如何从零开始一步一步搭建“仿微信聊天”的鸿蒙App。具体实现的内容会分章节发布，提供给各位朋友学习，如果各位有疑问或建议也欢迎留言指正。

注意：这里默认你已经对HarmonyOS NEXT的基础API操作有所了解，已经初步知晓ArkUI的处理机制与ArkTS的编程逻辑。如果您是鸿蒙零基础，建议先观看鸿蒙官方的入门讲解视频，初步学习一下鸿蒙App的基本组件知识。

二、项目介绍

“仿微信聊天”的App项目在Android系统中有成熟的实战案例，具体参见《Android Studio开发实战：从零基础到App上线(第3版)》第13章的“13.5 实战项目：仿微信的私聊和群聊”，该项目的前后端通讯方式采用SocketIO实现，同时支持一对一的私聊和多对多的群聊，聊天内容也同时支持文本消息和图片消息，并且在多部Android真机上测试通过，具备很高的学习研究价值。
那么把“仿微信聊天”App改造成鸿蒙App的话，不但用到ArkUI的各种界面组件，还能熟悉ArkUI的的各种交互方式，而且要跟后端服务器传输Socket消息，这些编程技巧非常锻炼学习者的鸿蒙App编码能力。毕竟资讯类App往往只有简单的浏览动作，不如聊天类App那样有着丰富的交互操作，所以“仿微信聊天”的鸿蒙App项目非常值得大家学习和研究。

三、代码实现

“仿微信聊天”的鸿蒙App首先要有个登录界面，展示微信的图标、文字，还要输入用户的昵称，并提供登录按钮，登录成功后跳转到微信主界面。想要实现基本的微信登录功能，用到了下列基本组件：
1、Image组件，用来展示微信图标；
2、Text组件，用来展示提示文字；
3、TextInput组件，用来输入用户的微信昵称；
4、Button组件，用来响应登录动作；
接下来讲解仿微信登录界面的具体实现步骤。

1、登录界面的整体布局

由于登录界面的各组件从上往下依次排列，因此适合采用Column容器作为根布局，登录页面的框架代码如下：

build() {
  Column() {
    // 这里暂时省略其他组件的代码
  }
  .height('100%')
  .width('100%')
  .padding(5)
}

2、登录界面的静态组件

登录界面的微信图标和提示文字属于静态内容，仅做展示用，无需跟用户交互，因而使用Image组件和Text组件即可满足静态图文的展示要求，展示代码如下：

Image($r('app.media.wechat'))
  .width(150).height(150).objectFit(ImageFit.Contain)
Text('请输入您的昵称')
  .fontSize(18).margin(15)

3、昵称输入的双向绑定

鸿蒙App采用声明式UI，组件的输入信息要跟具体变量绑定，一旦该变量的值发生变化，声明式UI就会自动刷新被绑定的组件信息。那么对于输入的微信昵称，首先声明一个被“@State”修饰的昵称字符串变量，如下：

  @State nickName: string = '' // 昵称

这里的“@State”表示该变量属于可被组件绑定的状态变量，只要变量值发生变更，组件就会立即刷新与该变量有关的界面属性。
不过“@State”修饰只实现了单向绑定，也就是变量值变化会触发组件刷新。然而对于编辑框来说，还可能由用户输入触发，也就是组件状态的变更先发生，此时要使用双向绑定机制，在组件状态变更时自动刷新变量值。双向绑定的写法为“$$变量名”，表示当组件状态发生变化时，自动把组件的最新状态赋值给双向绑定的变量。就TextInput组件而言，双向绑定的代码如下：

TextInput({text: $$this.nickName, placeholder: '请输入昵称'})
  .width('100%').height(40)
  .type(InputType.Normal).fontSize(18).maxLength(12)

4、登录成功的跳转操作

微信登录成功之后，要跳转到微信主界面，跳转过程还要携带昵称参数。方便起见可使用router实现跳转功能，也就是通过下面的导包语句引入router组件：

import { router } from '@kit.ArkUI';

调用router组件的pushUrl方法，可以跳转到指定的页面路径，其中输入参数中的url表示待跳转的页面路径，比如“chat/WeChatPage”；输入参数中的params表示携带的内容信息，详细内容采取Key-Value的键值对方式设置，也就是哪个键名对应哪个键值。详细的登录跳转代码如下：

Button('登　录')
  .width('100%').fontSize(18).margin({ top: 10 })
  .onClick(() => {
    if (this.nickName.length == 0) {
      promptAction.showToast({message: '请输入您的微信昵称'})
      return
    }
    router.pushUrl({
      url: 'chat/WeChatPage',
      params: {
        nickName: this.nickName,
      }
    })
  })

把上述的几个组件依次放置到Column容器内部，实现的仿微信登录界面效果如下：

下一篇文章会介绍如何实现好友列表的展示。