AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

我写个HarmonyOS Next版本的微信聊天02

2024-10-18 115
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 我写个HarmonyOS Next版本的微信聊天02

按住说话

0009fc57aa131188fd48765522a8280a.png

定义是否正在说话的变量


// 按住说话 录音模态
  @State
  showTalkContainer: boolean = false

注册触摸事件 Touch

长按 按住说话时触发， Touch事件是会持续触发的，通过判断 event.type 来获知 触摸状态

  1. down 按下
  2. move 移动
  3. up 松开


Button("按住说话")
    .layoutWeight(1)
    .type(ButtonType.Normal)
    .borderRadius(5)
    .backgroundColor("#fff")
    .fontColor("#000")
    .onTouch(this.onPressTalk)

定义 this.onPressTalk


// 按住说话 持续触发
  onPressTalk = async (event: TouchEvent) => {
    if (event.type === TouchType.Down) {
      // 按下
      this.showTalkContainer = true
    } else if (event.type === TouchType.Up) {
      // 松开手
      this.showTalkContainer = false
    }
  }

实现全屏遮罩效果

该效果利用鸿蒙应用中的全模态实现 bindContentCover

给组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。

this.talkContainerBuilder 为全模态出现时对应的内容布局，它是一个自定义构建函数


Button("按住说话")
    .layoutWeight(1)
    .type(ButtonType.Normal)
    .borderRadius(5)
    .backgroundColor("#fff")
    .fontColor("#000")
    .bindContentCover($$this.showTalkContainer, this.talkContainerBuilder,
      { modalTransition: ModalTransition.NONE })
    .onTouch(this.onPressTalk)

定义this.talkContainerBuilder

// 正在说话 页面布局
  @Builder
  talkContainerBuilder() {
    Column() {
      //   1 中心的提示   
      Row() {
        Text()
          .width(10)
          .height(10)
          .backgroundColor("#95EC6A")
          .position({
            bottom: -5,
            left: "50%"
          })
          .translate({
            x: "-50%"
          })
          .rotate({
            angle: 45
          })
      }
      .width("50%")
      .height(80)
      .backgroundColor("#95EC6A")
      .position({
        top: "40%",
        left: "50%"
      })
      .translate({
        x: "-50%"
      })
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      //   2 取消和转文字
      Row() {
        Row() {
          Text("X")
            .fontSize(20)
            .width(60)
            .height(60)
            .borderRadius(30)
            .fontColor("#000")
            .backgroundColor("#fff")
            .textAlign(TextAlign.Center)
            .align(Alignment.Center)
            .fontColor("#ccc")
            .id("aabb")
            .rotate({ angle: -20 })
        }
        Row() {
          Text("文")
            .fontSize(20)
            .width(60)
            .height(60)
            .borderRadius(30)
            .fontColor("#ccc")
            .backgroundColor("#333")
            .textAlign(TextAlign.Center)
            .align(Alignment.Center)
            .id("ddee")
            .rotate({ angle: 20 })
        }
        // 3  松开发送
        Text("松开发送")
          .fontColor("#fff")
          .width("100%")
          .position({
            bottom: 0,
            left: 0
          })
          .textAlign(TextAlign.Center)
      }
      .width("100%")
      .position({
        bottom: "23%"
      })
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left: 60, right: 60
      })
      //   4 底部白色大球
      Row() {
      }
      .width(600)
      .height(600)
      .backgroundColor("#fff")
      .position({
        bottom: 0,
        left: "50%"
      })
      .translate({
        x: "-50%",
        y: "70%"
      })
      .borderRadius("50%")
    }
    .width("100%")
    .height("100%")
    .backgroundColor("rgba(0,0,0,0.5)")
  }

说话声纹

这个绿色容器中的波纹，是通过canva来描述的，真正的逻辑应该是监听或者获取当前声音音量的大小，然后根据它转换对应的波纹。但是没有在鸿蒙中直接找到api，查阅资料发现需要自己分析音频文件数据，自己转化才可以，时间关系就没有继续往下实现。使用随机数简单模拟了下。

配置 CanvasRenderingContext2D 对象的参数

//用来配置 CanvasRenderingContext2D 对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  settings: RenderingContextSettings = new RenderingContextSettings(true)

用来创建CanvasRenderingContext2D对象

//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

定义声纹自定义构建函数

这里使用canvas画布技术，在onReady 生命周期函数中 通过开启一个定时器，在定时器中不断重复以下过程

  1. 通过clearRect 清空上一次描绘的波纹
  2. 通过 fillRect 随机描绘这一次的波纹

最后，如果此组件被销毁了，可以在 onDisAppear 中停止定时器


/**
   * 录音中的 动态声纹波浪
   */
  @Builder
  vocalPrint() {
    Canvas(this.context)
      .onDisAppear(() => {
        clearInterval(this.voiceTimeId)
      })
      .width('80%')
      .height('80%')
      .onReady(() => {
        //可以在这里绘制内容。
        clearInterval(this.voiceTimeId)
        this.voiceTimeId = setInterval(() => {
          this.context.clearRect(0, 0, 1000, 1000)
          for (let index = 0; index < 35; index++) {
            const random = Math.floor(Math.random() * 10)
            let height = 20 + random
            this.context.fillRect(0 + index * 5, 32 - height / 2, 2, height);
          }
        }, 100)
      })
  }

使用声纹构造函数

发送信息-取消发送

93829b698399abeb78efb5d4b5be3993.png

这部分的UI交互相对来说比较复杂，当按住 按住说话 时：

  1. 手指移动到 X， 表示取消发送
  2. 手指移动到文，表示转换文字
  3. 手指直接松开时，发送录音

这部分功能的核心思想时，检测手指是否移动到了相应的元素，触发对应的业务逻辑即可。但是现实的问题是，找不到合适的事件，比如元素引入事件，所以后期采取的是检测手指在整个屏幕的坐标是否触及到了 X 和 文 来实现。

定义长按状态的枚举

  1. 没有长按
  2. 长按
  3. 长按-X
  4. 长按-文


enum PressCancelVoicePostText {
  // 没有长按
  none = 0,
  //   长按 没有选中“取消发送”或者"转语音"
  presssing = 1,
  //   取消发送
  cancelVoice = 2,
  //   转文字
  postText = 3
}

定义手指坐标类型


/**
 * 长按时，手指的坐标
 */
interface ScreenOffset {
  x: number
  y: number
  width: number
  height: number
}

定义长按状态


// 长按状态
@State
pressCancelVoicePostText: PressCancelVoicePostText = PressCancelVoicePostText.none

定义 X 和 文的坐标状态


// “x ”的坐标
  xScreenOffset: ScreenOffset = {
    x: 0,
    y: 0,
    width: 0,
    height: 0
  }
  TextScreenOffset: ScreenOffset = {
    x: 0,
    y: 0,
    width: 0,
    height: 0
  }

实时获取 X 和 文 的坐标

在组件中监听 onAppear 事件，根据组件的唯一标识id来获取坐标数据

X
Text("X")
            .fontSize(20)
            .width(60)
            .height(60)
            .borderRadius(30)
            .fontColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? "#000" : "#ccc")
            .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? "#fff" : "#333")
            .textAlign(TextAlign.Center)
            .align(Alignment.Center)
            .fontColor("#ccc")
            .id("aabb")
            .rotate({ angle: -20 })
            .onAppear(() => {
              let modePosition: componentUtils.ComponentInfo = componentUtils.getRectangleById("aabb");
              this.xScreenOffset.x = px2vp(modePosition.screenOffset.x)
              this.xScreenOffset.y = px2vp(modePosition.screenOffset.y)
              this.xScreenOffset.width = px2vp(modePosition.size.width)
              this.xScreenOffset.height = px2vp(modePosition.size.height)
            })
文


Text("文")
            .fontSize(20)
            .width(60)
            .height(60)
            .borderRadius(30)
            .fontColor(this.pressCancelVoicePostText === PressCancelVoicePostText.postText ? "#000" : "#ccc")
            .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.postText ? "#fff" : "#333")
            .textAlign(TextAlign.Center)
            .align(Alignment.Center)
            .id("ddee")
            .rotate({ angle: 20 })
            .onAppear(() => {
              let modePosition: componentUtils.ComponentInfo = componentUtils.getRectangleById("ddee");
              // px单位
              this.TextScreenOffset.x = px2vp(modePosition.screenOffset.x)
              this.TextScreenOffset.y = px2vp(modePosition.screenOffset.y)
              this.TextScreenOffset.width = px2vp(modePosition.size.width)
              this.TextScreenOffset.height = px2vp(modePosition.size.height)
            })

调整touch事件onPressTalk的逻辑

该函数的调整逻辑是 判断当前手指的坐标是否触碰到了 X 或者 文 ， 然后设置对应的状态


// 按住说话 持续触发
  onPressTalk = async (event: TouchEvent) => {
    if (event.type === TouchType.Down) {
      // 手指按下时触发
      this.pressCancelVoicePostText = PressCancelVoicePostText.presssing
      // 按下
      this.showTalkContainer = true
    } else if (event.type === TouchType.Move) {
      // 手指移动时持续触发
      this.pressCancelVoicePostText = PressCancelVoicePostText.presssing
      // 获取当前手指的坐标
      const x = event.touches[0].displayX
      const y = event.touches[0].displayY
      // 判断是否碰到了 “X”
      let isTouchX = this.xScreenOffset.x <= x && this.xScreenOffset.x + this.xScreenOffset.width >= x &&
        this.xScreenOffset.y <= y && this.xScreenOffset.y + this.xScreenOffset.width >= y
      // 判断是否碰到了 "文"
      let isTouchText = this.TextScreenOffset.x <= x && this.TextScreenOffset.x + this.TextScreenOffset.width >= x &&
        this.TextScreenOffset.y <= y && this.TextScreenOffset.y + this.TextScreenOffset.width >= y
      if (isTouchX) {
        // 取消发送
        this.pressCancelVoicePostText = PressCancelVoicePostText.cancelVoice
      } else if (isTouchText) {
        // 转换文字
        this.pressCancelVoicePostText = PressCancelVoicePostText.postText
      }
    } else if (event.type === TouchType.Up) {
      // 松开手
      this.showTalkContainer = false
      if (this.pressCancelVoicePostText === PressCancelVoicePostText.postText) {
        // 转换文字
      } else if (this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice) {
        // 取消发送
      } else {
        // 发送录音
      }
    }
  }

添加 X 和 文字的 样式

当 this.pressCancelVoicePostText 状态发生改变时，需要调整 对应的组件的样式

调整声纹容器的样式

8e252acab4015b3f106b2de1003b216c.png

  1. 如果当前正在录音，显示正常绿色的声纹
  2. 如果当前取消发送，显示取消红色的声纹
  3. 如果当前转换文字，显示绿色的空的内容-后期存放实时的语音转换的文字
//   1 中心的提示   显示波浪线
      Row() {
        if (this.pressCancelVoicePostText !== PressCancelVoicePostText.postText) {
          // 声纹
          this.vocalPrint()
        } else {
          Scroll() {
            // 显示录音的文字
            Text("")
              .fontSize(12)
              .fontColor("#666")
          }
          .width("100%")
          .height("100%")
        }
        Text()
          .width(10)
          .height(10)
          .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? Color.Red :
            "#95EC6A")
          .position({
            bottom: -5,
            left: "50%"
          })
          .translate({
            x: "-50%"
          })
          .rotate({
            angle: 45
          })
      }
      .width("50%")
      .height(80)
      .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? Color.Red : "#95EC6A")
      .position({
        top: "40%",
        left: "50%"
      })
      .translate({
        x: "-50%"
      })
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)

完整代码

/**
 * 当前输入状态 语音或者文本
 */
import { componentUtils } from '@kit.ArkUI'
enum WXInputType {
  /**
   * 语音输入
   */
  voice = 0,
  /**
   * 文本输入
   */
  text = 1
}
enum MessageType {
  /**
   * 声音
   */
  voice = 0,
  /**
   * 文本
   */
  text = 1
}
// 消息
class ChatMessage {
  /**
   * 消息类型：【录音、文本】
   */
  type: MessageType
  /**
   * 内容 [录音-文件路径，文本-内容]
   */
  content: string
  /**
   * 消息时间
   */
  time: string
  /**
   * 声音的持续时间 单位毫秒
   */
  duration?: number
  /**
   * 录音转的文字
   */
  translateText?: string
  /**
   * 是否显示转好的文字
   */
  isShowTranslateText: boolean = false
  constructor(type: MessageType, content: string, duration?: number, translateText?: string) {
    this.type = type
    this.content = content
    const date = new Date()
    this.time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    this.duration = duration
    this.translateText = translateText
  }
}
enum PressCancelVoicePostText {
  // 没有长按
  none = 0,
  //   长按 没有选中“取消发送”或者"转语音"
  presssing = 1,
  //   取消发送
  cancelVoice = 2,
  //   转文字
  postText = 3
}
/**
 * 长按时，手指的坐标
 */
interface ScreenOffset {
  x: number
  y: number
  width: number
  height: number
}
@Entry
@Component
struct Index {
  // 状态栏高度
  @StorageProp("vpHeight")
  vpHeight: number = 0
  // 输入框内容
  @State
  textValue: string = ""
  // 输入状态 语音或者文字
  @State
  inputType: WXInputType = WXInputType.voice
  // 消息
  @State
  chatList: ChatMessage[] = []
  // 按住说话 录音模态
  @State
  showTalkContainer: boolean = false
  // 长按状态
  @State
  pressCancelVoicePostText: PressCancelVoicePostText = PressCancelVoicePostText.none
  //用来配置 CanvasRenderingContext2D 对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  settings: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  // 声明波纹定时器id
  voiceTimeId: number = -1
  // “x ”的坐标
  xScreenOffset: ScreenOffset = {
    x: 0,
    y: 0,
    width: 0,
    height: 0
  }
  TextScreenOffset: ScreenOffset = {
    x: 0,
    y: 0,
    width: 0,
    height: 0
  }
  // 发送文本消息
  sendTextMessage = () => {
    if (!this.textValue.trim()) {
      return
    }
    const chat = new ChatMessage(MessageType.text, this.textValue.trim())
    this.chatList.push(chat)
    this.textValue = ""
  }
  // 按住说话 持续触发
  onPressTalk = async (event: TouchEvent) => {
    if (event.type === TouchType.Down) {
      // 手指按下时触发
      this.pressCancelVoicePostText = PressCancelVoicePostText.presssing
      // 按下
      this.showTalkContainer = true
    } else if (event.type === TouchType.Move) {
      // 手指移动时持续触发
      this.pressCancelVoicePostText = PressCancelVoicePostText.presssing
      // 获取当前手指的坐标
      const x = event.touches[0].displayX
      const y = event.touches[0].displayY
      // 判断是否碰到了 “X”
      let isTouchX = this.xScreenOffset.x <= x && this.xScreenOffset.x + this.xScreenOffset.width >= x &&
        this.xScreenOffset.y <= y && this.xScreenOffset.y + this.xScreenOffset.width >= y
      // 判断是否碰到了 "文"
      let isTouchText = this.TextScreenOffset.x <= x && this.TextScreenOffset.x + this.TextScreenOffset.width >= x &&
        this.TextScreenOffset.y <= y && this.TextScreenOffset.y + this.TextScreenOffset.width >= y
      if (isTouchX) {
        // 取消发送
        this.pressCancelVoicePostText = PressCancelVoicePostText.cancelVoice
      } else if (isTouchText) {
        // 转换文字
        this.pressCancelVoicePostText = PressCancelVoicePostText.postText
      }
    } else if (event.type === TouchType.Up) {
      // 松开手
      this.showTalkContainer = false
      if (this.pressCancelVoicePostText === PressCancelVoicePostText.postText) {
        // 转换文字
      } else if (this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice) {
        // 取消发送
      } else {
        // 发送录音
      }
    }
  }
  build() {
    Column() {
      // 1 顶部标题栏
      Row() {
        Image($r("app.media.left"))
          .width(25)
        Text("kto卋讓硪玩孫悟空")
        Image($r("app.media.more"))
          .width(25)
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)
      .border({
        width: {
          bottom: 1
        },
        color: "#ddd"
      })
      .padding(10)
      .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
      //   2 聊天滚动容器
      Scroll() {
        Column({ space: 10 }) {
          ForEach(this.chatList, (item: ChatMessage, index: number) => {
            if (item.type === MessageType.text) {
              this.chatTextBuilder(item.content, item.time)
            }
          })
        }.width("100%")
        .padding(10)
        .justifyContent(FlexAlign.Start)
      }
      .layoutWeight(1)
      .align(Alignment.Top)
      .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
      //   3 底部聊天发送框
      Row({ space: 5 }) {
        if (WXInputType.text === this.inputType) {
          Image($r("app.media.voice"))
            .width(40)
            .fillColor("#333")
            .borderRadius(20)
            .border({ width: 2 })
            .onClick(() => {
              this.inputType = WXInputType.voice
            })
          TextInput({ text: $$this.textValue })
            .onAppear(() => {
              // 自动显示焦点
              this.getUIContext().getFocusController().requestFocus("textinput1")
            })
            .layoutWeight(1)
            .backgroundColor("#fff")
            .borderRadius(3)
            .defaultFocus(true)
            .id("textinput1")
        } else if (WXInputType.voice === this.inputType) {
          Image($r("app.media.keyboard"))
            .width(40)
            .fillColor("#333")
            .borderRadius(20)
            .border({ width: 2 })
            .onClick(() => {
              this.inputType = WXInputType.text
            })
          Button("按住说话")
            .layoutWeight(1)
            .type(ButtonType.Normal)
            .borderRadius(5)
            .backgroundColor("#fff")
            .fontColor("#000")
            .bindContentCover($$this.showTalkContainer, this.talkContainerBuilder,
              { modalTransition: ModalTransition.NONE })
            .onTouch(this.onPressTalk)
        }
        Image($r("app.media.smile"))
          .width(40)
          .fillColor("#333")
        if (this.textValue.length) {
          Button("发送")
            .backgroundColor("#08C060")
            .type(ButtonType.Normal)
            .fontColor("#fff")
            .borderRadius(5)
            .onClick(this.sendTextMessage)
        } else {
          Image($r("app.media.plus"))
            .width(48)
            .fillColor("#333")
        }
      }
      .width("100%")
      .padding(10)
      .backgroundColor("#F7F7F7")
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#EDEDED")
    .backgroundImageSize(ImageSize.Cover)
    .padding({
      top: this.vpHeight + 20
    })
  }
  // 文字消息
  @Builder
  chatTextBuilder(text: string, time: string) {
    Column({ space: 5 }) {
      Text(time)
        .width("100%")
        .textAlign(TextAlign.Center)
        .fontColor("#666")
        .fontSize(14)
      Row() {
        Flex({ justifyContent: FlexAlign.End }) {
          Row() {
            Text(text)
              .padding(11);
            Text()
              .width(10)
              .height(10)
              .backgroundColor("#93EC6C")
              .position({
                right: 0,
                top: 15
              })
              .translate({
                x: 5,
              })
              .rotate({
                angle: 45
              });
          }
          .backgroundColor("#93EC6C")
          .margin({ right: 15 })
          .borderRadius(5);
          Image($r("app.media.avatar"))
            .width(40)
            .aspectRatio(1);
        }
        .width("100%");
      }
      .width("100%")
      .padding({
        left: 40
      })
      .justifyContent(FlexAlign.End)
    }
    .width("100%")
  }
  // 正在说话 页面布局
  @Builder
  talkContainerBuilder() {
    Column() {
      //   1 中心的提示   显示波浪线
      Row() {
        if (this.pressCancelVoicePostText !== PressCancelVoicePostText.postText) {
          // 声纹
          this.vocalPrint()
        } else {
          Scroll() {
            // 显示录音的文字
            Text("")
              .fontSize(12)
              .fontColor("#666")
          }
          .width("100%")
          .height("100%")
        }
        Text()
          .width(10)
          .height(10)
          .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? Color.Red :
            "#95EC6A")
          .position({
            bottom: -5,
            left: "50%"
          })
          .translate({
            x: "-50%"
          })
          .rotate({
            angle: 45
          })
      }
      .width("50%")
      .height(80)
      .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? Color.Red : "#95EC6A")
      .position({
        top: "40%",
        left: "50%"
      })
      .translate({
        x: "-50%"
      })
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      //   2 取消和转文字
      Row() {
        Row() {
          Text("X")
            .fontSize(20)
            .width(60)
            .height(60)
            .borderRadius(30)
            .fontColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? "#000" : "#ccc")
            .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? "#fff" : "#333")
            .textAlign(TextAlign.Center)
            .align(Alignment.Center)
            .fontColor("#ccc")
            .id("aabb")
            .rotate({ angle: -20 })
            .onAppear(() => {
              let modePosition: componentUtils.ComponentInfo = componentUtils.getRectangleById("aabb");
              this.xScreenOffset.x = px2vp(modePosition.screenOffset.x)
              this.xScreenOffset.y = px2vp(modePosition.screenOffset.y)
              this.xScreenOffset.width = px2vp(modePosition.size.width)
              this.xScreenOffset.height = px2vp(modePosition.size.height)
            })
        }
        Row() {
          Text("文")
            .fontSize(20)
            .width(60)
            .height(60)
            .borderRadius(30)
            .fontColor(this.pressCancelVoicePostText === PressCancelVoicePostText.postText ? "#000" : "#ccc")
            .backgroundColor(this.pressCancelVoicePostText === PressCancelVoicePostText.postText ? "#fff" : "#333")
            .textAlign(TextAlign.Center)
            .align(Alignment.Center)
            .id("ddee")
            .rotate({ angle: 20 })
            .onAppear(() => {
              let modePosition: componentUtils.ComponentInfo = componentUtils.getRectangleById("ddee");
              // px单位
              this.TextScreenOffset.x = px2vp(modePosition.screenOffset.x)
              this.TextScreenOffset.y = px2vp(modePosition.screenOffset.y)
              this.TextScreenOffset.width = px2vp(modePosition.size.width)
              this.TextScreenOffset.height = px2vp(modePosition.size.height)
            })
        }
        // 3  松开发送
        Text(this.pressCancelVoicePostText === PressCancelVoicePostText.cancelVoice ? '取消发送' :
          (this.pressCancelVoicePostText === PressCancelVoicePostText.postText ? '转换文字' : "松开发送"))
          .fontColor("#fff")
          .width("100%")
          .position({
            bottom: 0,
            left: 0
          })
          .textAlign(TextAlign.Center)
      }
      .width("100%")
      .position({
        bottom: "23%"
      })
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left: 60, right: 60
      })
      //   4 底部白色大球
      Row() {
      }
      .width(600)
      .height(600)
      .backgroundColor("#fff")
      .position({
        bottom: 0,
        left: "50%"
      })
      .translate({
        x: "-50%",
        y: "70%"
      })
      .borderRadius("50%")
    }
    .width("100%")
    .height("100%")
    .backgroundColor("rgba(0,0,0,0.5)")
  }
  /**
   * 录音中的 动态声纹波浪
   */
  @Builder
  vocalPrint() {
    Canvas(this.context)
      .onDisAppear(() => {
        clearInterval(this.voiceTimeId)
      })
      .width('80%')
      .height('80%')
      .onReady(() => {
        //可以在这里绘制内容。
        clearInterval(this.voiceTimeId)
        this.voiceTimeId = setInterval(() => {
          this.context.clearRect(0, 0, 1000, 1000)
          for (let index = 0; index < 35; index++) {
            const random = Math.floor(Math.random() * 10)
            let height = 20 + random
            this.context.fillRect(0 + index * 5, 32 - height / 2, 2, height);
          }
        }, 100)
      })
  }
}

总结

一、清晰的枚举定义

代码中使用枚举类型WXInputType和MessageType分别明确了当前输入状态（语音或文本）以及消息类型，使得代码的可读性和可维护性大大增强。这种方式可以避免使用魔法数字，让开发者更容易理解代码的意图。

二、面向对象的消息类设计

定义了ChatMessage类来表示消息，清晰地封装了消息的各种属性，如消息类型、内容、时间、持续时间、录音转文字结果以及是否显示转好的文字等。这种面向对象的设计方式使得消息的处理更加模块化，方便在不同的地方进行复用和管理。

三、丰富的交互处理

  1. 通过对触摸事件的处理，实现了按住说话的功能。在手指按下、移动和抬起时分别进行不同的状态判断和操作，包括判断是否碰到 “取消发送” 或 “转文字” 的区域，并根据不同状态进行相应的处理。
  2. 底部聊天发送框根据输入状态动态切换显示内容，当输入类型为文本时显示文本输入相关的组件，当为语音时显示按住说话的按钮等，为用户提供了灵活的输入方式选择。

四、强大的页面构建和布局

  1. 使用build方法构建页面结构，清晰地划分了顶部标题栏、聊天滚动容器和底部聊天发送框等部分，通过Column和Row的组合以及各种属性设置，实现了美观且合理的页面布局。
  2. 在消息显示部分，通过chatTextBuilder方法构建文字消息的布局，包括时间显示、文本内容、背景颜色和图标等，使得消息展示更加清晰美观。
  3. talkContainerBuilder方法构建了按住说话时的页面布局，包括声纹显示、取消和转文字按钮以及底部白色大球等元素，为用户提供了直观的交互界面。

五、动态声纹效果实现

通过vocalPrint方法利用Canvas绘制动态声纹波浪，在录音过程中通过定时器不断更新画布内容，实现了生动的声纹效果，增强了用户体验。

文章标签：
容器
前端开发
UED
API
开发者
关键词：
HarmonyOS版本
HarmonyOS next
HarmonyOS next版本
微信聊天
版本微信
万少！
目录
相关文章
waylau
|
25天前
|
API
HarmonyOS 3.1/4项目在DevEco Studio 5.0（HarmonyOS NEXT）版本下使用的问题
有读者在使用《鸿蒙HarmonyOS应用开发入门》书中的源码时遇到问题，主要原因是使用的DevEco Studio版本不同所致。本文提供了三种解决方案：1) 降级DevEco Studio至3.1版本；2) 按照5.0版本修改书中示例；3) 等待并使用《鸿蒙之光HarmonyOS NEXT原生应用开发入门》升级版书籍。
waylau
141 1
Harry技术
|
10天前
|
存储 JSON 开发工具
三、HarmonyOS NEXT应用开发：ArkTS工程目录结构（Stage模型）
本文介绍了HarmonyOS NEXT应用开发中ArkTS工程的目录结构（Stage模型），包括AppScope、entry、hvigor、oh_modules等主要目录及其作用。重点解析了entry目录下的src > main > resources目录结构，详细说明了base、限定符目录和rawfile的作用，以及如何引用资源文件。
Harry技术
47 1
疯狂的猿
|
26天前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
疯狂的猿
54 3
yxybox
|
29天前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈，实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
yxybox
62 2
lqj_本人
|
1月前
|
UED
鸿蒙next版开发：相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中，ArkTS提供了强大的相机开发能力，特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更，确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
lqj_本人
70 8
lqj_本人
|
1月前
|
API 内存技术
鸿蒙next版开发：相机开发-拍照(ArkTS)
在HarmonyOS 5.0中，ArkTS提供了一套完整的API来管理相机功能，特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能，包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态，并提供代码示例进行详细解读。通过本文，你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
lqj_本人
86 7
lqj_本人
|
1月前
|
前端开发 API
鸿蒙next版开发：相机开发-预览(ArkTS)
在HarmonyOS 5.0中，使用ArkTS进行相机预览是核心功能之一。本文详细介绍了如何使用ArkTS实现相机预览，包括导入相机接口、创建Surface、获取相机输出能力、创建会话并开始预览，以及监听预览输出状态等步骤，并提供了代码示例。通过本文，读者可以掌握在HarmonyOS 5.0中使用ArkTS进行相机预览的基本方法。
lqj_本人
65 6
lqj_本人
|
1月前
|
前端开发 开发者
鸿蒙next版开发：相机开发-元数据(ArkTS)
在HarmonyOS 5.0中，ArkTS新增了对相机元数据的访问能力，帮助开发者获取图像的详细信息。本文介绍了如何在ArkTS中获取和使用相机元数据，包括导入接口、创建元数据输出流、开启和停止元数据输出、监听元数据对象可用事件等步骤，并提供了详细的代码示例。
lqj_本人
69 5
lqj_本人
|
1月前
|
前端开发 API 开发者
鸿蒙next版开发：相机开发-录像(ArkTS)
在HarmonyOS 5.0中，ArkTS提供了一套完整的API来管理相机录像功能。本文详细介绍了如何在ArkTS中实现录像功能，包括导入接口、创建Surface、获取相机输出能力、创建会话并开始录像以及监听录像输出流状态，并提供了代码示例进行解读。希望本文能帮助开发者更好地利用ArkTS的相机录像功能。
lqj_本人
55 5
lqj_本人
|
1月前
|
API 开发者 内存技术
鸿蒙next版开发：相机开发-会话管理(ArkTS)
在HarmonyOS 5.0中，ArkTS提供了完整的API来管理相机会话，包括创建相机输入流、预览输出流、拍照输出流，配置和管理会话。本文详细介绍了相机会话管理的基础步骤和代码示例，涵盖会话创建、闪光灯和焦距配置及错误处理等内容，帮助开发者更好地利用ArkTS开发相机应用。
lqj_本人
62 4

热门文章

最新文章

  • 1
    微信小程序把玩（十四）button组件
  • 2
    【微信小程序】页面tabBar切换、下拉刷新
  • 3
    微信公众平台可通过UnionID机制在多公众号间帐号互通
  • 4
    微信小程序使用vant组件样式不生效的问题
  • 5
    微信支付文章综合
  • 6
    .NET企业微信回调配置（数据回调URL和指令回调URL验证）(一）
  • 7
    微信小程序新增推广功能，支持自定义关键词
  • 8
    微信查询高考分数已支持20个城市
  • 9
    微信公众平台开发接口PHP SDK完整版
  • 10
    nginx反向代理与微信测试全攻略
  • 1
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    401
  • 2
    润开鸿与蚂蚁数科达成战略合作，发布基于鸿蒙的mPaaS移动应用开发产品
    132
  • 3
    HarmonyOS应用开发者基础认证 模拟考试 题库
    560
  • 4
    日志服务 HarmonyOS NEXT 日志采集最佳实践
    117407
  • 5
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    323
  • 6
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    630
  • 7
    “纯血鸿蒙”要来了，赶紧入手学习吧
    395
  • 8
    HarmonyOS的功能及场景应用
    257
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    677
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    160

    • 相关课程

    更多
  • C++ 入门教程开发文档

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 星轨-钉钉APP分发实训
    • 下一篇
    阿里云oss存储简介和如何使用