鸿蒙开发融云demo发带表情的文本消息

136 阅读4分钟
鸿蒙开发融云demo发带表情的文本消息

融云鸿蒙版是不带UI的,得自己一步步搭建。 这次来讲如何发表情消息 还是有点难度的,好好看,好好学。

一、思路:

用字符表情 就是下面这种:

static readonly EMOJI_DATA = [
    [
      0x1F600, 0x1F603, 0x1F604, 0x1F601, 0x1F606, 0x1F605, 0x1F923,
      0x1F602, 0x1F642, 0x1F643, 0x1F609, 0x1F60A, 0x1F607, 0x1F60D,
      0x1F929, 0x1F618, 0x1F617, 0x263A , 0x1F61A, 0x1F619, 0x1F60B,
      0x1F61B, 0x1F61C, 0x1F92A, 0x1F61D, 0x1F911, 0x1F917, 0x1F92D
    ]
二、效果图:

输入表情: 在这里插入图片描述 显示表情:

在这里插入图片描述

三、关键代码:

表情数据:

static readonly EMOJI_DATA = [
    [
      0x1F600, 0x1F603, 0x1F604, 0x1F601, 0x1F606, 0x1F605, 0x1F923,
      0x1F602, 0x1F642, 0x1F643, 0x1F609, 0x1F60A, 0x1F607, 0x1F60D,
      0x1F929, 0x1F618, 0x1F617, 0x263A , 0x1F61A, 0x1F619, 0x1F60B,
      0x1F61B, 0x1F61C, 0x1F92A, 0x1F61D, 0x1F911, 0x1F917, 0x1F92D
    ],
    [
      0x1F92B, 0x1F914, 0x1F910, 0x1F928, 0x1F610, 0x1F611,
      0x1F636, 0x1F60F, 0x1F612, 0x1F644, 0x1F62C, 0x1F925, 0x1F60C,
      0x1F614, 0x1F62A, 0x1F924, 0x1F634, 0x1F637, 0x1F912, 0x1F915,
      0x1F922, 0x1F92E, 0x1F927, 0x1F635, 0x1F92F, 0x1F920, 0x1F60E, 0x1F913
    ],
    [
      0x1F9D0, 0x1F615, 0x1F61F, 0x1F641, 0x1F62E,
      0x1F62F, 0x1F632, 0x1F633, 0x1F626, 0x1F627, 0x1F628, 0x1F630,
      0x1F625, 0x1F622, 0x1F62D, 0x1F631, 0x1F616, 0x1F623, 0x1F61E,
      0x1F613, 0x1F629, 0x1F62B, 0x1F624, 0x1F621, 0x1F620, 0x1F92C, 0x1F608, 0x1F47F
    ],
    [
      0x1F480, 0x2620 , 0x1F4A9, 0x1F921,
      0x1F479, 0x1F47A, 0x1F47B, 0x1F47D, 0x1F47E, 0x1F916, 0x1F63A,
      0x1F638, 0x1F639, 0x1F63B, 0x1F63C, 0x1F63D, 0x1F640, 0x1F63F,
      0x1F63E, 0x1F648, 0x1F649, 0x1F64A, 0x1F48B, 0x1F444, 0x1F48C, 0x1F49D, 0x1F496, 0x1F497
    ],
 Swiper() {
                    ForEach(CommonConstants.EMOJI_DATA,(emojiData:number[], index1:number) =>{
                      Column(){
                        Grid(){
                          ForEach(emojiData,(item:number, index2:number) =>{
                            GridItem(){
                              Stack(){
                                if(item === -1){
                                  Image($r('app.media.rc_icon_emoji_delete')).width(28).height(28)
                                }else{
                                  Text(String.fromCodePoint(item)).fontColor($r('app.color.color_black')).fontSize(24)
                                }
                              }
                              .width('100%')
                              .height('100%')
                              .onClick(() =>{

                                  if(item === -1){
                                    // 删除(表情长度有1有2,没法确定)
                                    // if(this.commentText.length - 1 > 0){
                                    //   this.commentText = this.commentText.slice(0,this.commentText.length - 1)
                                    // }
                                  }else{
                                    // 添加
                                    let offsetIndex: number = this.inputController.getCaretOffset().index    // 光标位置
                                    this.keyboardStr = `${this.keyboardStr.slice(0,offsetIndex)}${String.fromCodePoint(item)}${this.keyboardStr.slice(offsetIndex,this.keyboardStr.length)}`
                                  }

                              })
                            }
                          })
                        }
                        .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
                        .rowsTemplate('1fr 1fr 1fr 1fr')
                        .width('100%')
                        .aspectRatio(6/4)
                      }
                      .width('100%')
                      .padding({bottom:8})
                    })
四、整个鸿蒙融云Demo源码结构图:

在这里插入图片描述

有问题或者需要完整源码demo的可以看简介联系我,也可以私信我,我每天都看私信的