欢迎光临
我们一直在努力

微信小程序制作9

lueluelue1026

微信小程序制作9 小程序营销 第1张


01


学习篇
今天继续完善视频播放小程序。先讲一下使用到的video组件,它可用于播放本地或网络视频资源,其默认宽度为300rpx、高度为225rpx。(所以我们在wxss里面只设定了他的宽度为100%

该组件对应的常用属性如下:
src:要播放视频的资源地址;
controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间);
danmu-list:弹幕列表;
更加详细的说明可以参见微信开放文档:
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
昨天的视频内容是都加在wxml里面的,但是如果视频内容太多的话,内容会很密集,我觉得不是很好看。
所以我们采用数组循环的方式,把我们的内容放在js文件的data下,直接遍历读取它。
 data: { list: [ { id: '1', title: '第一个视频', videourl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' }, { id: '2', title: '第二个视频', videourl: 'http://www.w3school.com.cn//i/movie.mp4' }, { id: '3', title: '第三个视频', videourl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' }, { id: '4', title: '第四个视频', videourl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' } ], src: '', },
接着就是遍历读取它,在wxml里的区域3部分。

<!-- 区域3 视频列表区域 --><view class="videolist"> <view class="video1" wx:for='{{list}}' wx:key='video{{index}}' data-url="{{item.videourl}}" bindtap="playvideo"> <image src="/images/1.jpg"></image> <text>{{item.title}}</text> </view></view>
里面的
bindtap
=
“playvideo”就是点击触发事件。需要实现播放我们点击的视频这个功能。同时,生命周期函数里面,我们要加播放的监听页面。
 playvideo: function (e) { this.videoctx.stop() // 停止播放之前正在播放的视频 this.setData({ src: e.currentTarget.dataset.url }) // 更新视频地址 this.videoctx.play() // 播放新的视频 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.videoctx = wx.createVideoContext('myVideo') },
这样,播放功能可以实现了。明天继续最后的弹幕发送功能。完整代码也明天再贴出来吧。

02



生活篇

1.每日锻炼计划

  • 散步+慢跑30分钟

  • 引体向上10×3

  • 深蹲30×1

  • 俯卧撑30×2

2.每日体重记录

  • 111

    微信小程序制作9 小程序营销 第2张

3.今日歌单







4.小lue

微信小程序制作9 小程序营销 第3张

微信小程序制作9 小程序营销 第4张



更新进度:
16/365

今日关键词:小程序9

赞(0) 打赏
未经允许不得转载:小程序营销 » 微信小程序制作9
分享到: 更多 (0)

小程序营销

联系我们联系我们