广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

小程序里的弹幕类应用大部分只支持文字，而图片和音频这一块功能是缺失的，本文会从产品角度来讲诉如何打造一款支持表情的弹幕小程序。

实现效果

思路：

input 获取输入文字，richtext显示包含图片的弹幕，设置richtext中文字的方向并滚动起来，滑动改变文字大小，文字颜色等操作

实现代码：

1.使用input输入文字、支持emoji表情

先定义的一个"danmu"对象来保存input输入的弹幕文字以及弹幕样式、

danmu: {      fontColor: "#ffffff",      text: "默认弹幕~",      fontSize: "40px",      glow: "#ffff00",      speed: '10s',},

接着定义"nodes"对象显示数据text:弹幕文字；fontSize:文字大小；fontColor:文字颜色；glow：文字发光；speed：滚动速度。

使用input组件输入文字：

<input type='text'        bindconfirm='changeDanmuText'        value='{{danmu.text}}'         placeholder='输入弹幕~'         placeholder-style='color:#fff'         cursor-spacing='28'></input>

cursor-spacing设置input中光标与键盘的距离

2.richText显示包含图片的弹幕

定义nodes对象来更新弹幕

nodes: [{    name: 'div',    attrs: {    class: 'danmu-text'},    children: [        {        type: 'text',        text: '弹幕文本
以上就是微信小程序把文字玩出花样（弹幕）的详细内容，更多请关注9543建站博客其它相关文章！
广告：SSL证书一年128.66元起，点击购买~~~