微信小程序弹幕功能开发实例

小程序的弹幕功能推出以后获得了很多用户的青睐，大家觉得这种方式很有意思，不少开发者也表示要给自己的小程序开发这项新功能，那么究竟要怎样开发呢？看看以下的微信小程序弹幕功能开发实例你就知道了。

1、微信小程序-弹幕功能

效果图：

我的思路是这样的，先用标签确定是否打开弹幕，若打开弹幕则出现弹幕文本框和发射按钮，还有弹幕小程序遮罩层。

先贴页面结构和页面样式表代码。

页面结构代码如下：

？

弹幕

发射

{{item。弹幕_ shoottext } }

页面样式表代码如下：

？

/* pages/index/index.wxss */.幻灯片图像{宽度： ；}

/* 弹幕选择按钮的操作*/.弹幕开关{位置：；bottom : 10pxright :10pxz-index : 2；}

/* 弹幕输入框的操作*/.barra-输入文本{位置：；显示： flex背景-color : # bfbfbf；宽度： ;height : 40pxflex-方向： rownav-index : 2；正义-内容：中心；对齐-项目：居中；底部：10%；}.弹幕-输入{背景色：绿色黄光；宽度： 60%;高度：30px}。弹幕射击

左边距： 10px宽度： 25%;高度：30px }。拍摄{宽度： ；颜色：黑色；}

/*弹幕飞飞飞*/.弹幕飞行{ z-index : 3；高度： 80%;宽度： ;位置：值；top : 0；}.弹幕-text fly { position : absolute；

}

这样基本的样式就都实现了。接下来要对弹幕上的字进行处理。

文字是从右往左移动，文字出现的位置顶端是随机，左侧则是取屏幕的宽度。移动的时候是用定时器进行处理。

还有就是小程序字体的颜色是随机出现的。这些功能都是利用射流研究…处理的。

射流研究…的代码如下：

？

var barak _ style _ arr=[]；var弹幕_ style _ obj={ }；var电话宽度=0；var timers=[]；var计时器；页面({ data : { imgurls :[' http://img 02。太开放了。com/images/2021 09 28/tooopen _ sy _ 143912755726。jpg '，' http://img 06。太开放了。com/images/2021 08 18/tooopen _ sy _ 175866434296。jpg '，' 3358 img 06。太开放了。com/2021 08 18/tooopen _ sy _ 175866434296。jpg '，' http://img 0

//生命周期函数-监听页面加载onload :函数(选项){ var=this//获取屏幕的宽度wx。getsystem info({ success : function(res){那。设置数据({ barra _ phone width : res . window width-100，})} } phone width=那个。数据。barra _ phone宽度；控制台。log(电话宽度)；},

//是否打开弹幕.barrageswitch:函数(e){控制台。log(e)；//先判断没有打开if(！e.detail.value){ //清空弹幕弹幕_ style _ arr=[]；//设置数据的值这个。设置数据({ barragetextcolor : ' # d3d 3d 3 '，barrage _ inputtext: ' none '，barragefly_display:'none '，barra _ style : barra _ style _ arr，})；//清除定时器clearinterval(计时器);} else { this。设置数据({ barragetextcolor : ' # 04 be 02 '，barrage _ inputtext: ' flex '，barragefly_display:'block '，})；//打开定时器定时器=设置时间间隔(这。barragetext _ move，800) } }，//发射按钮枪击：功能(e){

//字体颜色为random var text color=' rgb(' parseint (math.random * 256)'，' parse int(math . random * 256)'，' parse int(math . random * 256)')'；////设置弹幕字体的水平位置样式//var text width=-(此。data . bind _ shot value . length * 0)；//设置弹幕字体var barragetext _ height=(数学)的垂直位置样式。random)* 266；弹幕_ style _ obj={//text width : text width，barragetext _ height : barragetext _ height，弹幕_ short text : this . data . bind _ short value，弹幕_ shoottextcolor : textcolor，弹幕_ phone width : phone width }；弹幕_样式_arr.push(弹幕_样式_ obj)；这个。setdata({ barrege _ style : barrege _ style _ arr，//发送弹幕bind _ short value : ' '/'//清空输入框})

//定时器使弹幕移动//这个。timer=setinterval (this。barragetext _ move，800)；

},

//定时器使弹幕移动。barragetext _ move:函数{ var timer num=barragestyle _ arr . length；var textmovefor(var i=0；我

},

//绑定传输输入框，将值传递给数据中的bind _ shotvalue，传输时调用bind _ shot : function(e){ this . set data({ bind _ shot value 3360 e . detail . value })}。

})

以上是微信小程序弹幕功能开发实例的详细说明。相应的步骤和开发所需的代码都在文中。如果有什么不明白的地方，可以在源代理网的小程序频道搜索。

下面是如何解决标题开头的微信小程序缓存问题。标题到此结束

开发微信小程序的时候会遇到很多不同的问题，微信小程序缓存问题就是其中之一，但是估计很多人还是不明白怎么解决。我来介绍一些具体的方法。

在h5之前，cookie一般用于缓存，但是cookie的存储空间太小。所以h5增加了新的缓存机制，即localstorage和sessionstorage，不需要详细介绍。微信小程序中，数据缓存的原理和localstorage类似，不难理解。大家一起体会一下。

效果图显示：

我们把数字11放在索引页，然后跳转到新的小程序页，然后取出缓存中的数字11，渲染到当前页。具体代码如下：

索引页：

跳转到新的页面发布请求

跳转到当前页面

存款

1234567891012345678910

索引的js:

//index.js

//获取应用程序实例

var app=getapp

页面({

数据： {

storage: ' '

},

onload:函数{

变量=这个

//获取输入值

getinput:function(e){

this.setdata({

storage:e.detail.value

})

},

//存储输入值

saveinput:function{

wx.setstoragesync('storage '，this.data.storage)

}

})

12345678910111213141516171819202122231234567891011121314151617181920212223

跳转页面：

从存储器：{{storage}}11获得的数据

跳转页面的js:

var app=getapp

变化；

页面({

数据： {

storage: ' '

},

onload:函数(选项){

那=这个；

//获取存储信息

wx.getstorage({

key: '存储'，成功：功能(res){

//成功

that.setdata({

storage:res.data

})

}

})

}