aqi00的博客

上一节我们利用系统相机实现了录像功能，那么为了直观地浏览视频列表，就要给每个视频配上封面，这个封面图的来源之一便是视频里的某帧画面。接下来就介绍如何从视频文件中根据时间点提取帧图像，具体的提取过程分为以下四个步骤。

上一节我们使用Refresh组件实现了下拉刷新功能。除了浏览别人发布的短视频，用户也能在抖音App上发布自己的作品，当然首先得有一段录制好的视频，那么在鸿蒙系统录像用到了系统相机。

同时将refreshing参数绑定的变量设为false，此时系统监控到refreshing值变为false，就自动让App界面往顶部回弹，结束下拉刷新操作。上一节我们通过网络请求库实现了简单的HTTP接口调用，那么除了在首次加载App界面时的接口调用，用户还会通过下拉刷新动作实时获取最新的接口内容。鸿蒙系统提供了专门的下拉刷新组件Refresh，方便开发者处理下拉刷新事件。（1）单个手指按住屏幕开始下拉，下拉过程中，整个App界面会跟着往下挪动，此时屏幕顶部的拉出区域会显示promptText设置的文本。

上一节我们通过添加权限配置成功申请了应用的网络访问权限，这样App才能访问网络接口，才能加载网络图片。

上一节我们利用滑块组件实现了多张图片的左右轮播特效，在此基础上可以实现多个短视频的上下轮播特效。那么要想正常播放网络视频，还得让App提前获得网络授权才行。鸿蒙系统提供了一种允许应用访问系统资源（例如通讯录）和系统能力（例如访问摄像头、麦克风等）的通用权限访问方式，以此避免系统数据和系统功能被不当使用。根据授权方式的不同，鸿蒙App的权限类型可分为system_grant（系统授权）和user_grant（用户授权）。

上一节我们利用相对布局实现了短视频播放界面的交互图标叠加效果，那么除了在空间上的叠加特效之外，还有另一种在时间上的轮播特效，允许同一类型的媒体列表随着时间流逝而切换。这种轮播特效便用到了滑块组件Swiper，它支持输入一组图片或者一组视频，通过滑动手势来切换前后的媒体内容。Swiper又是一种容器，里面放着同类型的子组件，那么首先得提供一个媒体内容数组，用于依次填充子组件列表。cachedCount：预加载子组件个数, 以当前页面为基准，加载当前显示页面的前后个数。index：当前显示的子组件索引值。

除了以上级容器作为锚点，还能以平级组件作为锚点，注意锚点组件要提前分配id标识，然后目标组件在alignRules方法的anchor属性设置锚点的id，表示参考该id的锚点组件来决定自身位置。所谓相对布局，指的是内部组件相对于其他组件来决定自身的位置。这个锚点既可能是子组件的上级容器也就是相对布局，也可能是子组件的平级组件。鸿蒙SDK提供的相对布局叫做RelativeContainer组件，相对布局内部的各个子组件按照指定位置排列，如果两个子组件同时覆盖了某块区域，后来的子组件画面将覆盖先来的子组件画面。

从PhotoViewPicker返回的相片选择器，可调用select方法拉起相册，供用户挑选相册视频。select方法的输入参数就是前面得到的PhotoSelectOptions对象，select方法的视频选择结果通过异步方式返回，返回结果为PhotoSelectResult类型，结果对象的photoUris字段保存着用户选中的一个或者多个视频的文件路径。这里说是相片，实际可同时访问图片和视频。暂且不提网络视频，因为访问网络需要申请授权，只说从系统相册挑选一个视频文件，那就简单多了。

仿抖音快手”的App项目在Android系统中有成熟的实战案例，具体参见《Android Studio开发实战：从零基础到App上线(第3版)》第14章的“14.4 实战项目：仿抖音的短视频分享”，该项目的前后端通讯方式采用HTTP接口实现，既支持向服务端上传短视频，也支持从服务端拉取短视频观看，并且在多部Android真机上测试通过，具备很高的学习研究价值。待播放的视频路径要在Video组件的构造方法中传入，除此以外，构造方法还支持传入其他参数，以实现更丰富的播控功能。reset：重置内部播放器。

上一节我们通过自定义图片分段结构实现了从SocketIO服务器接收图片的功能，至此可以在单聊中发送文本和图片了。不过若想在群聊中发送文本和图片，还得构建一套群聊机制，把群成员发送的消息转发给其他的群成员。具体的群聊构建过程分为下列几个事件处理。

上一节我们通过自定义图片分段结构实现了向SocketIO服务器发送图片的功能，那么还需实现从SocketIO服务器接收图片的功能，才叫完成图片消息收发的闭环操作。接下来以BASE64串作为图片数据的载体，在接收完所有图片分段数据后，将其解码并重新拼接为原始的图片。具体的接收过程分为下列两个步骤。

因为图片可能会分段编码为BASE64串传输，所以每次传输的数据包都要携带序号、长度、内容等信息，这样既方便发送端有序地切分图片数据，也方便接收端按顺序重新组装完整的图片。// 分段序号// 分段名称// 分段数据// 分段长度。

上一节我们综合使用fileIo、image、buffer等工具库，把图片文件的二进制数据成功编码为BASE64字符串。那么为了能够正常收发图片消息，还需从BASE64字符串解码得到原始的图片数据，这样一来一去的无损逆向操作，方能实现准确无误的图片传输功能。对于鸿蒙App来说，由于Image组件可直接显示PixelMap像素图，因此BASE64串无需转成图片文件，只需转到PixelMap这步即可。由BASE64串转像素图的具体过程包含以下三个步骤。

上一节我们利用photoAccessHelper实现了从相册挑选图片的功能，但是SocketIO不支持传输二进制数据，只允许传输文本字符串，那么得想办法把图片数据转成字符串才行。由于图片数据转字符串的操作要求可逆，也就是图片转成字符串之后，还能把字符串恢复成原图片，因此这种转换必须是无损操作。基于以上考虑，可把图片内容的二进制数据通过BASE64算法重新编码成十六进制的字符串，对应的反向操作就是，把十六进制的BASE64字符串解码成为二进制的图片数据。

从PhotoViewPicker返回的相片选择器，可调用select方法拉起相册，供用户挑选相册图片。select方法的输入参数就是前面提到的PhotoSelectOptions对象，select方法的图片选择结果通过异步方式返回，返回结果为PhotoSelectResult类型，结果对象的photoUris字段保存着用户选中的一张或者多张图片的文件路径。鸿蒙提供了photoAccessHelper工具，无需申请相册或存储权限，即可从相册中选择几张图片。如果只需选择一张图片，填1即可。

首先自己定义一个数据结构，比如下面定义的UserInfo结构，用来存放用户信息。id: number。

上一节我们把SocketIO库导入App工程，那么怎样通过SocketIO库来传递聊天消息呢？接下来就以文本消息为例，介绍如何利用SocketIO库在鸿蒙真机与服务器之间收发文本消息。由于SocketIO库属于外部的第三方库，因此以源码方式导入SocketIO库的时候，还要补充相应的依赖配置。也就是打开App模块的的oh-package.json5，在dependencies节点内部添加库名、版本号或者库路径。

上一节我们实现了仿微信消息的气泡背景效果，那么聊天消息的传输还要引入第三方的SocketIO库，我方手机的App先把消息内容传给后端的SocketIO服务器，再由SocketIO服务器把消息内容转发给对方手机的App。后端的SocketIO服务器可采用netty-socketio，完整的服务端工程代码参考 https://gitee.com/aqi00/net_server/tree/master/HttpServer。

上一节我们实现了仿微信聊天页面的消息左右对齐方式，那么聊天消息的气泡背景也是很有必要的，不管聊天消息有多长有多高，气泡背景都能自动跟着拉长拉高，恰当地把消息内容都包裹在气泡中，如下图所示。在安卓系统中，气泡背景通过点九图（也叫九宫格图片）实现，利用Android Studio特制的.9.png图片，安卓App能够根据实际宽高自动拉伸点九图的指定区域。但在鸿蒙系统中，不存在特制的点九图片格式，而是通过与点九图相同功能的API设置实现，详细说明如下。

上一节我们实现了仿微信聊天页面的软键盘避让方式，那么聊天时候的对方消息和我方消息有着不同的对齐方式，对方消息靠左靠上对齐，而我方消息靠右靠下对齐，如下图所示。对于组件内外的对齐规则，鸿蒙App与安卓App拥有不同的处理方式。安卓App通过layout_gravity属性控制自身相对上级容器的对齐方式，通过gravity属性控制下级组件相对自身的对齐方式。而对鸿蒙App而言，情况又有所不同，下面将一一阐述鸿蒙App对于各种场景的对齐规则。

上一节我们实现了仿微信的昵称修改弹窗，那么在微信的聊天页面，看起来是对方和自己一左一右的对话交互。别看这个对话界面没什么技术含量，实际上打磨一个既方便又美观的交互效果可不容易了，仅仅对话界面就有软键盘避让、组件内外对齐、背景图拉伸三个难点需要一一攻克。下面详细介绍如何在聊天界面有效避让输入法的软键盘。

因为对话框属于独立的控件，允许被多个页面引用，所以可在单独的ETS文件中定义。自定义对话框以“@CustomDialog”前缀开头，并且内部必须声明CustomDialogController类型的控制器属性，这样外部页面才能通过控制器对象操纵对话框的交互动作。对于多数对话框来说，一般要提供取消和确定两个按钮，那么自定义对话框内部还需声明取消接口和确定接口，由具体引用的页面去实现真正的取消操作和确定操作。// @CustomDialog组件必须声明CustomDialogController属性。

ArkUI默认的单个页签风格很单调，仅仅提供页签文字罢了，缺少微信底部页签的丰富样式。为了给页签增加包含图标和文字在内的高亮效果，需要自己定义单个页签的布局内容。自定义的页签布局以“@Builder”打头，其后就像编写普通的方法代码那样，包括方法名称、方法参数、方法代码等等。常见的页签高亮特效会区分背景、图标、文字颜色和字号样式，可以采用Stack容器作为单个页签的根布局，先放入一张背景图片，再放入Column容器包裹的前景图标和前景文字。

上一节我们实现了仿微信的登录界面，那么登录成功打开微信主界面，首先就会看到好友列表页面。列表是一组具有相似风格的组件元素集合，可以从上往下顺序排列，也可以从左往右顺序排列。鸿蒙App采用List组件用作列表，所有基于列表的界面布局能够通过List实现。下面详细介绍如何使用List组件实现仿微信的好友列表界面。

仿微信聊天”的App项目在Android系统中有成熟的实战案例，具体参见《Android Studio开发实战：从零基础到App上线(第3版)》第13章的“13.5 实战项目：仿微信的私聊和群聊”，该项目的前后端通讯方式采用SocketIO实现，同时支持一对一的私聊和多对多的群聊，聊天内容也同时支持文本消息和图片消息，并且在多部Android真机上测试通过，具备很高的学习研究价值。