首页 » 软件开发 » 前端App开发实际工作中三端(android,ios,前端H5)emoji解决方案(字段表情正文字符串解决方案)

前端App开发实际工作中三端(android,ios,前端H5)emoji解决方案(字段表情正文字符串解决方案)

乖囧猫 2024-07-24 09:46:40 0

扫一扫用手机浏览

文章目录 [+]

第一:原生发帖的时候,emoji表情嵌套在正文里,可能存在一个,或者多个,前端如何才能正常展示?

第二:原生再次编辑帖子的时候,他怎么拿到emoji,正常显示呢?

后台将emoji表情搞成链接,嵌套在正文里???链接长度和内容不可控,肯定不行。

前端App开发实际工作中三端(android,ios,前端H5)emoji解决方案(字段表情正文字符串解决方案) 软件开发
(图片来自网络侵删)

下面我直接说经过讨论后的解决方案,我只说前端部分,原生那边解决方法是同理,大家以后遇到这样的需求,仅供参考,后面封装了js代码,可以直接调用方法,最后提一下,我用的是vue框架

先说解决方案:

原生编辑帖子,将对应的emoji表情用对应的字段表示,这个大家要约定好,比如emoji1 表示微笑,emoji2表示沮丧,直接发送给后台,前端调用后台接口,得到含有emoji标记字段的正文内容,对正文进行查找,如果存在标记字段,用img 标签替换所有的emoji 字段,将存储在本地对应的emoji图片路径绑定在img的src上,最后将处理好的正文,v-html渲染

<template> <div> <div v-html=\"Emoji('要处理的内容')\"></div> </div></template>import { Emoji } from './../static/js/Emoji.js'export default { Emoji:Emoji}

下面是封装的emoji方法

var emojiArr = []; // 用于存储emoji的空数组var devicePixelRatio = ''// 设备像素比var fn= () =>{ devicePixelRatio = window.devicePixelRatio}fn()var emojisNum = 48; // 当前本地emoji表情的数量//循环出emoji数组for (let i = 1; i <= emojisNum; i++) { let url = require(`../../static/images/emoji/emoji_${i}@${devicePixelRatio}x.png`); emojiArr.push({ url: url, str: `[emoji_${i}]` })}//接收到的字符串与命名好的emoji字符串匹配const getEmoji = (str) => { for (let i = 0; i < emojisNum; i++) { if (str == emojiArr[i].str) { return emojiArr[i].url; } } return str;};//相匹配的字符串则替换成emoji图片export function Emoji(value) { let emojiArrMatch = value.match(/\[emoji_(.{1,4})\]/ig) || []; let len = emojiArrMatch.length; if (len == 0) { //如果正文里没有emoji字段,原文输出 return value; } emojiArrMatch.forEach(function(item) { let url = getEmoji(item); value = value.replace(item, `<img class=emoji src=${url}>`); }) return value;}

下面是放emoji 的文件夹

标签:

相关文章

语言中的借用,文化交融的桥梁

自古以来,人类社会的交流与发展离不开语言的传播。在漫长的历史长河中,各民族、各地区之间的文化相互碰撞、交融,产生了许多独特的语言现...

软件开发 2025-01-01 阅读1 评论0

机顶盒协议,守护数字生活的新卫士

随着科技的飞速发展,数字家庭逐渐走进千家万户。在这个时代,机顶盒成为了连接我们与丰富多彩的数字世界的重要桥梁。而机顶盒协议,作为保...

软件开发 2025-01-01 阅读1 评论0

语言基础在现代社会的重要性及方法步骤

语言是人类沟通的桥梁,是社会发展的基础。语言基础作为语言学习的基石,对于个人、社会乃至国家的发展具有重要意义。本文将从语言基础在现...

软件开发 2025-01-01 阅读2 评论0

粤语电影,传承文化,点亮时代之光

粤语电影,作为中国电影产业的一朵奇葩,以其独特的地域特色、丰富的文化内涵和鲜明的艺术风格,赢得了广大观众的喜爱。本文将从粤语电影的...

软件开发 2025-01-01 阅读5 评论0

苹果游戏语言,塑造未来娱乐体验的基石

随着科技的飞速发展,游戏产业逐渐成为全球娱乐市场的重要支柱。在我国,游戏产业更是蓬勃发展,吸引了无数玩家和投资者的目光。而在这其中...

软件开发 2025-01-01 阅读1 评论0