鸿蒙开发融云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的可以看简介联系我,也可以私信我,我每天都看私信的