微信小程序把文字玩出花样(弹幕)

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

实现效果

思路:

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

实现代码:

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

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

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

使用input组件输入文字:

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

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

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

定义nodes对象来更新弹幕

来源链接:
免责声明:
1.资讯内容不构成投资建议,投资者应独立决策并自行承担风险
2.本文版权归属原作所有,仅代表作者本人观点,不代表本站的观点或立场
标签: 微信开发
上一篇:php获取远程图片并下载保存到本地的方法分析 下一篇:微信小程序开发遇到的问题汇总

相关资讯