【小程序】小程序评论板块加入emoji表情

直接上稿:
这里写图片描述
图中的【笑脸.icon】功能就是类似手机输入法的表情功能,下方升起一个包含很多表情的区域,供选择。纳闷了手机输入法有表情,为什么还需要表情功能呢?(苦笑.gif),UI大佬:这功能,你写不出来就算了!。。。。
自己扛的需求,跪着也要写出来啊~ 网上一顿浪,大概了解了思路

借鉴了天下雪文章

1:从网上下载好表情包文件 ---------点击前往下载高清emoji表情包
2:搜索相应表情包的string类型表现形式--------点击前往查询表情代码表现形式
3:点击相应的表情,显示相应的string
4:最后将内容与表情拼接

1.2两步就不说了,自己可以下,查;
3,4代码如下:
这里写图片描述
emojichar为表情相应的string
emoji为表情的名称后面遍历到view中
这里写图片描述
利用wx:for遍历出来后结果如下(样式就不写了)
这里写图片描述
点击表情 和内容合并等等js

 //点击表情显示隐藏表情盒子
  emojiShowHide: function () {
    this.setData({
      isShow: !this.data.isShow,
      isLoad: false,
    })
  },
  // 选中表情
  emojiChoose:function (e){
    var index = e.target.dataset.id
    var emojiArr = this.data.emojiChar.split('-')
    this.setData({
      content: this.data.content + emojiArr[index]
    })
    console.log(this.data.content)
  },
  //用户输入内容
  getontentValue: function (e){
    this.setData({
      content: e.detail.value
    })
    console.log(this.data.content)
  },
  // 会话按钮 获取焦点
  commentFocus:function (){
    this.setData({
      conversBtn:true
    })
  }

注意:
emoji存入utf8编码的数据库,因为编码方式不同,可能会报错存不了。
解决办法:
存之前base64_encode(),取的时候base64_decode()

Git地址:https://github.com/yangcheng0605/weapp-emoji

  • 10
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 148
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 148
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值