鸿蒙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容器作为根结构，登录页面的框架代码如下：

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

复制代码

2、登录界面的静态组件

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

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

复制代码

3、昵称输入的双向绑定

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

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

复制代码

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

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

复制代码

4、登录乐成的跳转操作

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

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

复制代码

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

1. Button('登　录')
2.   .width('100%').fontSize(18).margin({ top: 10 })
3.   .onClick(() => {
4.     if (this.nickName.length == 0) {
5.       promptAction.showToast({message: '请输入您的微信昵称'})
6.       return
7.     }
8.     router.pushUrl({
9.       url: 'chat/WeChatPage',
10.       params: {
11.         nickName: this.nickName,
12.       }
13.     })
14.   })

复制代码

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。