微信小程序把文字玩出花样（弹幕）

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

实现效果

思路：

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

实现代码：

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

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

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

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

使用input组件输入文字：

 input type= #39;text #39;
 bindconfirm= #39;changeDanmuText #39;
 value= #39;{{danmu.text}} #39; 
 placeholder= #39;输入弹幕~ #39; 
 placeholder- >
cursor-spacing设置input中光标与键盘的距离
2.richText显示包含图片的弹幕
定义nodes对象来更新弹幕
nodes: [{
    name: 'div',
    attrs: {
    class: 'danmu-text'},
    children: [
        {
        type: 'text',
        text: '弹幕文本
以上就是微信小程序把文字玩出花样（弹幕）的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！