如何在小程序中接入微信默认表情?仿微信表情组件emoji运用

仿微信表情组件。使用前需将文档下方提供的表情雪碧图上传 CDN,再传入表情组件。

#属性列表

属性类型默认值必填说明
sourcestring表情雪碧图地址
heightnumber300表情盘高度
background-colorstring#EDEDED表情盘背景色
show-sendbooleantrue是否显示发送按钮
show-delbooleantrue是否显示删除按钮
show-historybooleantrue是否显示最近使用
bindinsertemojieventhandle插入表情,e.detail={emotionName}
binddelemojieventhandle点击删除按钮
bindsendeventhandle点击发送按钮

#示例代码

代码片段(opens new window)icon-default.png?t=N7T8https://developers.weixin.qq.com/s/cKyK0jmE7lgd

#使用方式

点击表情图标将会获得对应的中文含义,例如😊->[微笑]。在实际输入过程中,我们通常仅展示中文含义即可。

对文字和表情混合的评论需要解析后才能展示,组件内提供了 parseEmoji 解析函数,获取方式如下:

// .mp-emoji 为表情组件的选择器
const emojiInstance = this.selectComponent('.mp-emoji')
const emojiNames = emojiInstance.getEmojiNames()
const parseEmoji = emojiInstance.parseEmoji
const comment = '测试[得意][偷笑]文本'
const parsedCommnet = parseEmoji(comment)

解析后的评论结构如下,文字和表情分割构成的数组,type=1 为纯文本,type=2 为表情 iconimageClass 记录了表情在雪碧图上的位置。需注意的是组件开启了 styleIsolation: 'page-shared',组件内样式与页面共享。

[
  {type: 1, content: '测试'},
  {type: 2}, content: '[得意]', imageClass: 'smiley_4'}
  {type: 2}, content: '[偷笑]', imageClass: 'smiley_20'},
  {type: 1, content: '文本'},
]

由于表情 icon 采用雪碧图生成,展示时可采用如下的结构。需要注意的是每个 icon 的实际大小为 64px,因此在段落中通过 scale 进行缩放,缩放的比例为 行高 / 64。

<view class="comment">
  <block wx:for="{{parsedComment}}" wx:key="*this">
    <block wx:if="{{item.type === 1}}">{{item.content}}</block>
    <view wx:if="{{item.type === 2}}" style="display: inline-block; width: {{lineHeight}}px; height: {{lineHeight}}px">
      <view 
        class="{{item.imageClass}}"
        style="background-image: url({{emojiSource}});transform-origin: 0 0; transform: scale({{lineHeight / 64}});">
      </view>
    </view>
  </block>
</view>
.comment {
  font-size: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 24px;
}

如何与 input 结合使用,参考示例代码。

#表情雪碧图

关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办,是一家致力于H5前端技术研究的科技创新型公司,为合作伙伴提供专业高效的前端解决方案,合作伙伴遍布中国及东南亚地区,行业涵盖广告,教育, 医疗,餐饮等。有效的解决了合作伙伴的前端技术难题,节约了成本,实现合作共赢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值