前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >支付宝小程序聊天功能中发送QQ表情

支付宝小程序聊天功能中发送QQ表情

作者头像
lyudev
发布2022-08-04 10:52:23
4550
发布2022-08-04 10:52:23
举报
文章被收录于专栏:代码即数据

qqface组件

代码语言:javascript
复制
{
  "component": true,
  "usingComponents": {}
}
代码语言:javascript
复制
.facelist {
  width: 48rpx;
  height: 48rpx;
  padding: 5rpx;
  float: left;
  margin: 13rpx;
}

.face {
  width: 100%;
  height: 100%;
}

.facemore2 {
  overflow: hidden;
  height: 432rpx;
  padding: 5rpx 38rpx;
  background: rgba(245, 247, 250, 1);
  overflow-y: scroll;
}
代码语言:javascript
复制
<view class="facemore2">
  <view a:for="{{facearrs}}" a:key="{{index}}" class="facelist">
    <image src="{{item.qqfaceimg}}" class="face" data-name="{{item.name}}" onTap="onTapEmoji"></image>
  </view></view>
代码语言:javascript
复制
// pages/my_chat/component/qqface/qqface.js
Component({
  /**
   * 组件的属性列表
   */
  props: {
    onClickemoji: (data) => console.log(data),
    value: String, // 输入框的值
  },
  data: {
    facelist: { "104": "[右太极]", "103": "[左太极]", "102": "[献吻]", "101": "[街舞]", "100": "[激动]", "99": "[投降]", "98": "[跳绳]", "97": "[回头]", "96": "[磕头]", "95": "[转圈]", "94": "[怄火]", "93": "[发抖]", "92": "[跳跳]", "91": "[飞吻]", "90": "[爱情]", "89": "[OK]", "88": "[NO]", "87": "[爱你]", "86": "[差劲]", "85": "[拳头]", "84": "[勾引]", "83": "[抱拳]", "82": "[胜利]", "81": "[握手]", "80": "[弱]", "79": "[强]", "78": "[拥抱]", "77": "[礼物]", "76": "[太阳]", "75": "[月亮]", "74": "[便便]", "73": "[瓢虫]", "72": "[足球]", "71": "[刀]", "70": "[炸弹]", "69": "[闪电]", "68": "[蛋糕]", "67": "[心碎]", "66": "[爱心]", "65": "[嘴唇]", "64": "[凋谢]", "63": "[玫瑰]", "62": "[猪头]", "61": "[饭]", "60": "[咖啡]", "59": "[乒乓]", "58": "[篮球]", "57": "[啤酒]", "56": "[西瓜]", "55": "[菜刀]", "54": "[可怜]", "53": "[吓]", "52": "[亲亲]", "51": "[阴险]", "50": "[快哭了]", "49": "[委屈]", "48": "[鄙视]", "47": "[哈欠]", "46": "[右哼哼]", "45": "[左哼哼]", "44": "[坏笑]", "43": "[糗大了]", "42": "[鼓掌]", "41": "[抠鼻]", "40": "[擦汗]", "39": "[再见]", "38": "[敲打]", "37": "[骷髅]", "36": "[衰]", "35": "[疯了]", "34": "[晕]", "33": "[嘘]", "32": "[疑问]", "31": "[咒骂]", "30": "[奋斗]", "29": "[大兵]", "28": "[憨笑]", "27": "[流汗]", "26": "[惊恐]", "25": "[困]", "24": "[饥饿]", "23": "[傲慢]", "22": "[白眼]", "21": "[愉快]", "20": "[偷笑]", "19": "[吐]", "18": "[抓狂]", "17": "[囧]", "16": "[酷]", "15": "[难过]", "14": "[惊讶]", "13": "[呲牙]", "12": "[调皮]", "11": "[发怒]", "10": "[尴尬]", "9": "[大哭]", "8": "[睡]", "7": "[闭嘴]", "6": "[害羞]", "5": "[流泪]", "4": "[得意]", "3": "[发呆]", "2": "[色]", "1": "[撇嘴]", "0": "[微笑]" },
    arr: [],
    facearrs: []
  },
  didMount() {
    var that = this

    var facearr;
    for (let i in that.data.facelist) {
      that.data.arr.push(that.data.facelist[i]);
      facearr = {
        id: i,
        name: that.data.facelist[i],
        qqfaceimg: "../../image/faces/qq/" + i + ".png",

      }
      that.data.facearrs.push(facearr)
    }

    that.setData({
      facearrs: that.data.facearrs
    })

  },
  /**
   * 组件的方法列表
   */
  methods: {
    //发送QQ表情
    onTapEmoji: function (e) {
      console.log(e)
      const {
        currentTarget: {
          dataset: {
            emoji
          }
        }
      } = e;
      const {
        value
      } = this.props;
      var res = {}
      res.emoji = e.currentTarget.dataset.name;
      res.value = value + e.currentTarget.dataset.name
      this.props.onClickemoji(res);
    },
  }
})

input组件

代码语言:javascript
复制
{
  "component": true,
  "usingComponents": {
    "qqface": "../../component/qqface/qqface"
  }
}
<view hidden="{{weuiinput}}">
        <input class="weui-input" style="width:{{forwidth}}" focus="{{focus}}" onInput="getTitle" value='{{mess}}' name='message' onBlur="inputblur" onFocus="bindfocus" /></view>
<view hidden="{{hideFaceName}}">
    <qqface onClickemoji="onClickemoji" value="{{mess}}"></qqface></view>
代码语言:javascript
复制
 getTitle: function (e) {
      var value = e.detail.value;
      //console.log(value)
      if (value != '') {
        this.setData({
          mess: value,
          openadd: true,
          hideSendName: false,
          forwidth: "480rpx"
        })
      } else {
        this.setData({
          mess: "",
          openadd: false,
          hideSendName: true,
          forwidth: "530rpx"
        })
      }
    },
//失去焦点触发
    inputblur: function (e) {
      var that = this
      that.setData({
        inputmore: true,
        hideFaceName: true,
        key_hd: true,
        face_hd: false
      })
    },
    //获取焦点触发
    bindfocus: function () {
      this.setData({
        key_hd: true,
        face_hd: false,
        
      })
    },
onClickemoji: function (e) {
      this.setData({
          mess: e.value,
          openadd: true,
          hideSendName: false,
          forwidth: "480rpx"
        })
    },
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-02-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 代码即数据 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档