专栏首页Node开发小程序留言板块引入emoji表情

小程序留言板块引入emoji表情

最近准备给博客小程序添加一个留言板功能,考虑到如果只是纯文本留言有点过于简陋了,所以准备按照仿微信风格,在评论时可以添加emoji表情发送,实际上为了简化开发,原本找到了github一个插件WxEmojiView,可以快速引入项目实现emoji表情的渲染,但是由于几个缺点放弃了使用这个插件,首先这个插件实际上是用户选择emoji表情时转换成一串对应的字符串拼接到文本中,这样输入文本的显示效果我觉得不是很理想,第二点是插件坐着没有继续维护,所以担心某一天出问题不好处理,所以最终决定自己实现文本插入emoji表情的效果。我们可以先简单看下本篇文章最终要实现的效果:

欢迎体验小程序,如果有修改建议可以在小程序提交意见反馈或加入技术群咨询。

我们既然要实现这个emoji表情的效果,那具体是什么样的业务逻辑呢。我这里将业务逻辑分成3个步骤:

  1. 下载emoji表情eif文件并使用eifBQJYTool工具进行解压得到emoji的表情文件。然后将图片上传到图片服务器中。
  2. 根据用户选择的emoji表情,选中对应emoji表情的字符串形式添加到输入文本中。
  3. 用户点击输入框右侧的表情按钮弹出浮层可以选择emoji表情,再次点击表情按钮或者点击发送按钮可以关闭浮层。

首先意义不没啥好说的,都是玩计算机的解压文件难不倒大家。至于eif文件和解压工具而我已经上传百度云,公众号回复emoji工具就可以得到下载链接。然后将图片上传图片服务器。首先刚才讲过了我们需要根据用户选择的emoji表情,选中对应emoji表情的字符串形式添加到输入文本中。所以首先需要在页面js文件的data中创建一个数组存储emoji表情的名称,再创建一个字符串存储emoji表情对应的字符串格式。不同的emoji字符串形式以-拼接。我们可以看下源码:

data: {    emoji: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35'],    emojiChar: '?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-☺-?-?-?-?-?-?-?-?-?-?-?-?-?-☀-☁-☔'  },

看到这里有读者会说图片我提供了,那emoji表情对应的字符串形式要在哪里看呢?要查看图片对应的字符串形式可以看下面的链接:

http://www.oicqzone.com/tool/emoji/

下面我们先来设计页面效果,我们设计一个view置于屏幕底部,view中存在三个组件:input组件负责输入文本,表情按钮点击会弹出浮层以供用户选择emoji表情,发送按钮用于连接服务端保存留言数据。接着我们先看看页面布局:

<view class="message">  <form bindreset="cleanInput" class="sendMessage">    <input type="text" placeholder="留言内容.." value="{{message}}" bindinput='messageInput'></input>    <image class="add" src="/images/bq.png" bindtap='increase'></image>    <button type="primary" bindtap='send' form-type="reset" size="small" button-hover="blue">发送</button>  </form>
  <view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}">    <block wx:for="{{emoji}}" wx:key="index">      <view class="emoji-cell">        <image class="touch-active" data-id="{{index}}" bindtap="emojiChoose" src="https://pic.niyueling.cn/upload_avatar/2019/11/19/0/0/{{item}}.jpg"></image>      </view>    </block>  </view></view>

实际上看到布局代码可以发现emoji浮层我设置了一个wx:if属性,然后监听表情按钮的点击事件,在点击事件中更改increase的值,当increase值为true则浮层显示,当increase为false浮层隐藏。然后浮层显示时使用wx:for循环emoji表情数组,每循环一次可以得到文件名,根据我们图片服务器地址拼接成可访问的emoji表情url,放入image标签的src中。至于页面布局效果实际上就是使用flex布局,然后浮层显示隐藏加了个简单的动画效果:

@keyframes slidedown {  from {    transform: translateY(0);  }
  to {    transform: translateY(100%);  }}
.slidedown {  animation: slidedown 0.5s linear;}
.slideup {  animation: slideup 0.5s linear;}
@keyframes slideup {  from {    transform: translateY(100%);  }
  to {    transform: translateY(0);  }}

到这一步我们实际上已经可以实现emoji浮层的显示与隐藏。我们可以先看下页面效果:

界面效果没有问题了,那下一步就需要来实现留言的功能了。实际上我们的需求很简单,就是文字和emoji表情结合,在我们选择emoji表情时,将emoji表情对应的字符串形式添加到输入文本中。首先我们需要在data中设置message参数保存输入文本,我们刚才已经在input输入框绑定了bindInput事件,可以监听文本输入。在用户输入文本就将文本值动态添加到data的message参数中,当用户选择emoji表情时将message已有的输入文本和对应的emoji表情的字符串形式进行拼接。然后input的value值显示的就是data中的message参数。这样就可以保证我们选择emoji表情时输入框可以显示。接下来我们看看js文件的关键代码:

data: {    message: '',    emoji: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35'],    emojiChar: '?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-☺-?-?-?-?-?-?-?-?-?-?-?-?-?-☀-☁-☔'  },
  //监听input值的改变  messageInput(res) {    this.setData({      message: res.detail.value    });  },
  cleanInput() {    //button会自动清空,所以不能再次清空而是应该给他设置目前的input值    this.setData({      message: this.data.message    });  },
 increase() {    this.setData({      increase: !this.data.increase,      aniStyle: true    });  },
  emojiChoose: function(e) {    var index = e.target.dataset.id    var emojiArr = this.data.emojiChar.split('-');    this.setData({      message: this.data.message + emojiArr[index]    });  },
  //点击空白隐藏message下选框  outbtn() {    this.setData({      increase: false,      aniStyle: true    });  },

我们从代码可以看到,用户输入文本时动态将值存入message中,在用户选择emoji表情这时候需要使用split拆分字符串为数组,因为我们将emoji自复式形式以-为分隔符拼接成字符串形式,所以需要先将emoji表情字符串形式分割成一个数组与emoji表情一一对应,然后将message原有的值加上emoji字符串形式的值。increase方法其实就是改变increase参数的值来动态的进行浮层的显示与隐藏。最后实现发送按钮的点击事件send,逻辑实际上很简单,就是保存留言内容。点击发送按钮需要关系emoji浮层,所以需要更改increase值为false。

send: function() {    this.setData({      increase: false    });
    if(!this.data.message) {      $Toast({        content: '不能留言空消息!',        type: 'error'      });    } else {      //chatInfo 中 friendInfo 是作者信息,userInfo 是留言者信息也就是登陆者信息      var that = this;      var chatInfo = that.data.chatInfo;      chatInfo.message = that.data.message;
      wx.request({        url: util.basePath + '/article/v1/saveMessageBoard',        method: "post",        data: {          chatInfo: chatInfo543        },        header: {          'content-type': 'application/json'        },        success(res) {          if (res.data.status == 200) {            $Toast({              content: res.data.payload,              type: 'success'            });
            that.setData({message: '', messageboard: []});            that.onLoad();          } else {            $Toast({              content: res.data.err,              type: 'error'            });          }        }      });    }  }

后端就是一个insert语句的问题就不展示代码了,但是这里要注意一个问题,这里的表情字符串形式并非任何格式都可以存储的。所以这里数据库留言内容的字符编码处理最简单的方法就是字符集修改为utf8mb4,这样我们就可以成功存储emoji表情的字符串形式,存储成功我们可以发现数据库存储的是?但是实际上读取出来是可以正常转换成原有的emoji表情字符形式的。

但是正式开发字符集肯定不是可以随意进行修改的。所以存取的时候有可能会出现报错,所以这时候我们保存留言记录时的时候就可以使用base64_encode()对message的值进行编码,取数据时再使用base64_decode()进行解码操作。这样也可以保证我们可以正常存取emoji表情字符形式到数据库并且正常读取数据渲染。我们现在可以看下完整的页面渲染效果:

博客小程序功能正在不断完善,目前已经开源于码云。欢迎star。源码地址:

https://gitee.com/mqzuimeng_admin/wx_blog.git

本文分享自微信公众号 - 程序猿周先森(zhanyue_org)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【简单的CV】1.5 相机控制

    相机技术由胶片向图像传感器的进化,极大的推动了摄像的普及。图像的载体由胶卷转变为计算机存储这也为计算器视觉的形成做了很重要的铺垫。

    EdenChen
  • 简单的CV(计算机视觉)学习

    计算机图形学(Computer Graphics,简称CG),计算机图形学的主要研究内容就是研究如何在计算机中表示图形、以及利用计算机进行图形的计算、处理和显示...

    EdenChen
  • 搞定数据结构-数组结构

    从数组存储的内存模型来看,“下标”最确切的定义应该是”偏移”,如果用a来表示数组的首地址,a0 就是偏移为0的位置,也就是首地址,a k就表示偏移k个type_...

    用户3045442
  • 人工智能相关的术语介绍

    随着人工智能不再是一个模棱两可的营销术语,而是一个更精确的意识形态,很多人被人工智能相关的各种术语所困扰。因此,我们为您介绍了人工智能世界中一些最重要的术语。

    程序你好
  • 算法图解 第1章 算法简介

    一种算法,输入是一个有序的元素列表,如果查找的元素包含在列表中,则二分查找返回其位置,否则返回null;

    村雨
  • 使用SharpGL三维建模技术生成3D井眼轨迹图

    最近需要在项目的软件中增加一个功能,根据连续测斜数据展示三维的井眼轨迹图,由于购买的厂商的图件效果不理想,所以研究自己写代码实现类似的功能。

    程序你好
  • 【简单的CV】1.4 图片导入与像素值

    在学习导入图片和像素值之前,我们先讨论一个问题,为什么电脑中图片文件的格式会有JPG/PNG/BMP/....等不同格式呢?

    EdenChen
  • 搞定数据结构-栈和队列

    如下,使用栈结构操作. “网”这个错别字在栈顶,“网”改成”望”只需要将“网”从栈顶移除重新写入”望”.

    用户3045442
  • JVM架构介绍

    每个Java开发人员都知道字节码将由JRE (Java Runtime Environment)执行。但是很多人不知道JRE是Java虚拟机(JVM)的实现,它...

    程序你好
  • Redis 基础数据结构

    Redis用到的底层数据结构有:简单动态字符串、双端链表、字典、压缩列表、整数集合、跳跃表等,Redis并没有直接使用这些数据结构来实现键值对数据库,而是基于这...

    luoxn28

扫码关注云+社区

领取腾讯云代金券