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

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"
        })
    },

input

0 人点赞