小程序进阶-emoji表情

一、简介

小程序如何发送表情，微信小程序官方文档“扩展能力”为我们提供了emoji组件，即仿微信表情组件。

二、开发流程

（1）npm方式构建

//初始化项目，在node开发中使用npm init会生成一个pakeage.json文件，
//这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，
//以及项目的详细信息等记录在这个项目中。- npm init 或 npm init -y
//安装生产环境- npm install --production
//安装vant，Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，
//两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。- npm i vant-weapp -S --production
//安装emoji- npm install @miniprogram-component-plus/emoji- 微信开发工具-->工具-->构建npm-  page.json引入组件：
{"usingComponents": {"mp-emoji": "@miniprogram-component-plus/emoji"}
}

（2）直接从官方组件库源码拷贝，使用方法同上。

（3）官方演示

（4）源码分析

组件选择器，创建emoji实例

const emojiInstance = this.selectComponent('.mp-emoji')
//表情中文列表
this.emojiNames = emojiInstance.getEmojiNames()
//parseEmoji 解析函数
this.parseEmoji = emojiInstance.parseEmoji

组件渲染
hidden控制元素显示，mp-emoji引用组件，source指定雪碧图地址，bindinsertemoji点击表情获取表情文本如“[微笑]”，binddelemoji实现删除键，bindsend实现发送键。

<view class="reply_panel {{emojiShow ? 'show': ''}}" hidden="{{!emojiShow}}"><mp-emoji source="{{emojiSource}}" class="mp-emoji" bindinsertemoji="insertEmoji" binddelemoji="deleteEmoji" bindsend="onsend"></mp-emoji>
</view>

文本解析

const = comment = '啊的四个[微笑]撒地方'
//文本解析，type为1代表普通文本，2为表情，并给出imageClass样式。
const parsedCommnet = parseEmoji(comment)
[{type: 1, content: '啊的四个'},{type: 2, content: '[微笑]', imageClass: 'smiley_4'},{type: 1, content: '撒地方'},
]

文本输出
js将文本解析后输出数组，我们循环该数组。根据type属性判断文本类型，为1普通输出，为2根据imageClass指定表情图片样式。显示原理：background-image指定view元素背景视图，background-position: -66px -264px设置背景图像的起始位置，transform-origin: 0 0设置视图转换的基点，transform: scale(height/64)设置表情缩放比例。背景图片表情的尺寸为64px。
```
<view class="comment"><block wx:for="{{parsedComment}}" wx:key="item"><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>
```

小程序进阶-emoji表情相关推荐

禁止小程序输入Emoji表情符
前言: 在小程序中<textarea>刚开始是可以输入表情符号,但是后来因为输入表情会导致一个下拉bug,所以微信就默不作声的将这个共功能给关闭了. 但是我们在开发小程序的时候,有时会涉及 ...
微信小程序解码emoji表情
// 解码emoji表情 uncodeUtf16(str) {var reg = /\&#.*?;/g;var result = str.replace(reg, function(char) ...
小程序存emoji表情不改变数据库
1.小程序:提交前先编码 encodeURIComponent(data) 2.服务端解码(PHP) urldecode(data) 3.如果有空格字符串的,保存之前先对空格进行处理,不然空格在页面会 ...
微信小程序添加emoji表情组件，雪碧图版本
预览截图: demo详细代码:https://gitee.com/mosmos_admin/wxemoji 页面引入js:emoji-parser.esm.js // 表情组件 const emoji ...
h5 和微信小程序添加emoji表情处理
入库之前操作(数据库编码不用更改本人用mysql): var patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则 content = c ...
微信小程序：热门表情包+头像+壁纸自动采集多分类微信小程序
这是一款自动采集的一款微信小程序源码内由表情包,头像,还有壁纸组合而成的一款图片小程序每一个都自带多种分类,内容丰富运营适合另外支持插屏广告,激励视频广告,等多种广告小程序源码下载地址: 微信 ...
微信小程序获取带表情的微信名乱码问题
微信小程序获取带表情的微信名乱码问题在后台获取完微信用户数据后,对微信名进行UTF-8编码 URLEncoder.encode(nickName, "utf-8") ,将编码后的 ...
《微信小程序-进阶篇》package.json版本说明及各类版本符号详解（一）
大家好,这是小程序系列的第十一篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序-基础 ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...

小程序进阶-emoji表情

一、简介

二、开发流程

小程序进阶-emoji表情相关推荐

最新文章

热门文章