创新互联小程序教程：微信小程序扩展组件·仿微信表情组件

emoji

仿微信表情组件。使用前需将文档下方提供的表情雪碧图上传 CDN，再传入表情组件。为提升首次加载表情图片的性能，可通过 image 组件提前触发雪碧图的下载，利用浏览器的缓存机制。在不使用表情面板的页面，可将 emoji 组件隐藏或移出屏幕外，仅使用 parseEmoji 的功能。

在永清等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、成都网站建设 网站设计制作按需策划,公司网站建设,企业网站建设,成都品牌网站建设,网络营销推广,外贸网站建设,永清网站建设费用合理。

属性列表

示例代码：

{
  "disableScroll": true,
  "navigationBarTitleText": "",
  "usingComponents": {
    "mp-emoji": "../components/emoji/emoji"

  }
}

使用方式

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

对文字和表情混合的评论需要解析后才能展示，组件内提供了 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 为表情 icon，imageClass 记录了表情在雪碧图上的位置。需注意的是组件开启了 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。

  
    {{item.content}}
    
      
      
    
  

.comment {
  font-size: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 24px;
}

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

表情雪碧图

网站栏目：创新互联小程序教程：微信小程序扩展组件·仿微信表情组件
转载来源：http://www.shufengxianlan.com/qtweb/news23/206473.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联