gzyueqian
13352868059

h5培训机构中心哪里好?粤嵌教你怎么选专业的HTML5课程

更新时间: 2018-09-21 15:46:52来源: HTML5课程浏览量:2876

    想起近开发APP的时候,产品提的一个需求,用户的帖子正文还有评论内容里,要能够显示emoji表情,因为我们这款app是混合开发的,APP里的发贴,发评论是原生做的(android和ios),但帖子详情页又是我们前端H5做的,那么问题就来了:
    :原生发帖的时候,emoji表情嵌套在正文里,可能存在一个,或者多个,前端如何才能正常展示?
    第二:原生再次编辑帖子的时候,他怎么拿到emoji,正常显示呢?
    后台将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;
    }


免费预约试听课