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

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

作者头像
lyudev
发布于 2022-08-04 02:52:23
发布于 2022-08-04 02:52:23
49700
代码可运行
举报
文章被收录于专栏:代码即数据代码即数据
运行总次数:0
代码可运行

qqface组件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "component": true,
  "usingComponents": {}
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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
代码运行次数:0
运行
AI代码解释
复制
<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
代码运行次数:0
运行
AI代码解释
复制
// 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
代码运行次数:0
运行
AI代码解释
复制
{
  "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
代码运行次数:0
运行
AI代码解释
复制
 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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
快递100快递实时物流快递查询接口API案例代码
<a href="https://api.kuaidi100.com/manager/openapi/download/kdbm.do" style="color: #027eff;" target="_blank"><u>下载表格</u></a>
快递100API
2021/05/18
1.9K0
快递100快递实时物流快递查询接口API案例代码
快递100快递查询地图轨迹API接口案例代码
提供统一格式的HTTP POST或GET调用接口,并返回格式支持JSON,xml,text,html数据。
快递100API
2021/05/17
1.6K0
快递100快递查询地图轨迹API接口案例代码
快递100API实测:一键查询快递物流+实时推送,开发者的物流神器!
在电商、供应链、仓储管理等行业,物流信息的实时查询与推送已成为刚需。传统手动查询方式效率低下,而自建物流追踪系统成本高昂。因此,第三方快递查询API成为开发者的首选解决方案。小编最近就发现了一款超级好用的快递物流查询API接口软件——快递100旗下「百递云·API开放平台」,今天就让我们一起从实测角度来聊聊。
xcLeigh
2025/04/12
2820
快递100API实测:一键查询快递物流+实时推送,开发者的物流神器!
城市末端全链协同的快件物流资源共享平台研究 | 热文回顾
针对现有快递物流企业独立开展仓、转、运、配业务时存在的成本高、效率低、服务碎片化、非集约等问题,及现有共享模式发展面临的瓶颈问题,本文主要聚焦城市末端全链协同的快件物流资源共享平台搭建,研究和探讨了如何促进城市末端仓、运、转、配全链条资源共享,更大程度提升资源配置效率,从而促进快递物流的转型升级和行业高质量发展。
用户9868602
2022/09/02
6060
城市末端全链协同的快件物流资源共享平台研究 | 热文回顾
物流快递查询API接口怎么对接(中通、申通、韵达/顺丰、韵达)
快递查询API接口是使用的物流单号即可实现查询物流信息。主要应用在电商商城、ERP系统商、WMS系统商、快递柜、银行等企业。多家快递物流公司接口统一接入,建议对接接口提供商,一次性可以接入多家快递,在后期的技术维护也会省下很多工作。
用户4199839
2019/07/23
4.4K0
物流快递查询API接口怎么对接(中通、申通、韵达/顺丰、韵达)
客快物流大数据项目(三):项目解决方案
干线运输指的是运输的主干线, 在主干线上有最大的运力,一般快件的运行都是由支线去向主干线去汇集, 由主干线运输过去
Lansonli
2021/12/27
9220
客快物流大数据项目(三):项目解决方案
国内主流快递公司快递单号查询API接口对接指南
看完物流快递API接教程这篇文章,然后把源码复制到你的项目上,就能快速完成快递接口对接,调用快递查询API接口,能查询到快递单号从收件、运输,到转运中心,派送到签收等各个环节的物流发货状态。接口不区分开发语言,支持Java,C#,PHP,Python,net、go等多种开发语言的程序调用
用户4199839
2021/05/17
1.8K0
原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示
全国快递物流查询 API 是一种提供实时、准确、可靠的快递物流信息查询服务的接口。它基于现有的物流信息系统,通过API接口的方式,向用户提供快递物流信息的查询、跟踪、统计等功能。使用全国快递物流查询 API,用户可以在自己的应用程序或网站上,快速、方便地查询快递物流信息。
不是海碗
2023/04/14
1K0
原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示
快递公司接入快递100的快递实时查询接口示例
https://api.kuaidi100.com/document/60509213a52d305ab4d2a1cb.html
快递100API
2021/05/20
8670
快递公司接入快递100的快递实时查询接口示例
快递100快递信息订阅推送API接口案例代码
当我方调用贵方的回调接口(callbackurl)时,贵方需要先将我方提交的数据保存至贵方的数据库,接着向我方返回是否成功接收的响应报文及代码,即贵公司直接在回调接口的地址的response中填写如下内容:
快递100API
2021/05/19
1.6K0
快递100快递信息订阅推送API接口案例代码
快递100轨迹查询-电商快递地图轨迹推送服务API接口案例代码
1.使用http协议表单提交的方式进行信息交互,字符编码默认统一采用UTF-8,数据格式:application/x-www-form-urlencoded;
快递100API
2021/05/18
1.8K0
快递100轨迹查询-电商快递地图轨迹推送服务API接口案例代码
【v2版本】天气接口 返回JSON数据
免费的天气接口 v2版本 请求模式:GET/POST 请求地址:https://api.shunnet.top/weather/api?edition=v2&city=泸溪 【参数说明】 名称 解释
Shunnet
2021/06/11
7770
JQ + PHP + TrackMore物流信息跟踪
在使用之前,您需要先去trackmore官方网站申请API_KEY,传送门:TrackMore
Yiiven
2022/12/15
1.8K0
JQ + PHP + TrackMore物流信息跟踪
APISpace 全国快递物流地图轨迹查询API接口案例代码
APISpace 的 全国快递物流地图轨迹查询,在地图中展示包裹运输轨迹,支持单号的订阅与推送。包括顺丰、圆通、申通等主流快递公司。
用户10428865
2023/10/31
3750
时间轴、物流信息。你根本不需要StepView
完整Demo:https://github.com/yechaoa/TimeLineDemo
yechaoa
2022/06/10
2200
时间轴、物流信息。你根本不需要StepView
常用快递鸟物流信息查询接口-查询快递信息API接口对接指南
零售电商平台及ISV商家对物流api接口的需求有很多,今天我们主要分享的就是快递鸟快递单号查询接口的对接指南,快递单号查询接口对接的应用场景有很多,很多场景会遇到,最主要的就是电商网站用户打开“我的订单”时调用此API显示物流信息详情,电商管理后台的物流系统,客服在对账前查询所有运单的签收状态,并追踪问题,电商平台对商家物流管控,要求必须在多久快递必须发出要看到揽件状态,多久必须收到货物看到签收状态,根据这些状态对商家管控从而提高用户的整体满意度。
用户4199839
2022/03/29
1.9K0
python接口自动化(十九)--Json 数据处理---实战(详解)
  上一篇说了关于json数据处理,是为了断言方便,这篇就带各位小伙伴实战一下。首先捋一下思路,然后根据思路一步一步的去实现和实战,不要一开始就盲目的动手和无头苍蝇一样到处乱撞,撞得头破血流后而放弃了。不仅什么没学习
北京-宏哥
2019/09/11
9360
python接口自动化(十九)--Json 数据处理---实战(详解)
顺丰的野心:物流带动生态圈
导读:进口有全球顺、海购丰运,出口有欧洲、俄罗斯小包等产品,合力解决物流;优选国际、业内风传的“亚历山大”海淘平台在顺丰的支持下解决信息流,帮助国内消费者找到国外商品……顺丰正在试图打造一个生态圈。或许在未来,你与想要的生活只差一个顺丰的距离。 最近业内好像刮起解读顺丰的风潮,各种揭秘层出不穷。不过在和顺丰内部人士的沟通中发现,通过向零担、生鲜、跨境、农村市场渗透,顺丰正在试图打造一个由顺丰链接而成的生态圈。 11月19日来自顺丰的消息,今年“双11”当日单量涨幅146%。截止目前
用户1756920
2018/06/20
9350
2019物流行业年度总结:谁发力入局,谁黯然出局?
2019年看起来既是丰富多彩的一年,又是很糟糕的一年,有人说2019是物流行业的“冰川时代”,远成、全峰、国通等二线企业纷纷宣告破产,品骏“卖身”顺丰退出游戏。也有人说2019是物流行业的“爆发元年”,中通、韵达年业务量争相突破100亿件。
庄帅
2020/01/05
4110
2019物流行业年度总结:谁发力入局,谁黯然出局?
顺丰快递单号查询api接口免费对接参数以及demo
顺丰快递对物流信息的管控较为严格,官网上也加上了由腾讯云提供的滑动验证码进行保护,如果需要大批量查询顺丰的物流信息,必须要对接顺丰官方的路由查询接口。注意,对接接口必须要有顺丰月结账户,对接成功后只能查询自己发货的物流单号的路由信息。
app玩家
2019/08/13
4.7K0
顺丰快递单号查询api接口免费对接参数以及demo
推荐阅读
相关推荐
快递100快递实时物流快递查询接口API案例代码
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档