16-1,认识图片image组件
image组件:主要用来显示图片,可以是本地图片,也可以是网络图片。
官方学习文档:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
当我们不给image设置宽高时,image组件的默认宽度是320px,高度240px。
16-1-1,src属性显示网络图片
我们通过src属性来设置要显示的图片资源,图片资源有两种
- 本地图片资源
- 网络图片资源
由于我们本地的图片会占用小程序软件包的大小,所以这里推荐大家尽量使用网络图片。
我们设置显示图片的语法如下
如下图,我们显示一个网络图片。
这里给大家两个网络图片地址:
https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg
https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2273029747,2912173232&fm=15&gp=0.jpg
16-1-2,src属性显示本地图片
用image显示本地图片,我们需要提前把图片放在小程序项目里,如下图我们把本地图片放在images目录里,这个images目录需要我们自己新建。
然后在image组件里设置src属性,指向这个本地图片,就可以在小程序里展示了。
我把网络图片和本地图片都在小程序里展示,给大家对比着学习下。
16-1-3,通过mode设置图片裁剪、缩放的模式
image组件另外一个比较重要的属性就是mode了。我们在使用图片时,不能百分之百保证图片的比例正好是我们想要的,这个时候就要用到图片的裁剪和缩放了。
mode 的常用设置如下
值 | 说明 |
---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 2.10.3 |
top | 裁剪模式,不缩放图片,只显示图片的顶部区域 |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 |
left | 裁剪模式,不缩放图片,只显示图片的左边区域 |
right | 裁剪模式,不缩放图片,只显示图片的右边区域 |
top left | 裁剪模式,不缩放图片,只显示图片的左上边区域 |
top right | 裁剪模式,不缩放图片,只显示图片的右上边区域 |
bottom left | 裁剪模式,不缩放图片,只显示图片的左下边区域 |
bottom right | 裁剪模式,不缩放图片,只显示图片的右下边区域 |
比如我们有一个原图如下。
设置不同的mode值,可以很明显的看出来区别
后面我们需要对图片做裁剪或者伸缩处理时,就可以设置不同的mode值来实现不同的效果。
16-1-4,图片懒加载
小程序里image组件是支持图片懒加载的,当我们一个列表页有很多图片时,我们可以使用懒加载,来加快页面加载速度。使用懒加载时,我们只需要给image设置lazy-load就可以了。
16-2,认识视频video组件
video组件:主要用来实现视频播放。
官方学习文档:https://developers.weixin.qq.com/miniprogram/dev/component/video.html
16-2-1,src属性设置视频地址
video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。
我把这几个mp4格式的视频链接贴给大家
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
https://media.w3.org/2010/05/sintel/trailer.mp4
http://vjs.zencdn.net/v/oceans.mp4
如果上面链接失效,我们可以去官方文档拿官方的视频链接
16-2-2,设置视频弹幕属性来显示弹幕
我们上面设置src只能保证视频的正常播放,如果我们想使用弹幕功能,就要为video设置别的属性了。
我们如果想在视频上显示弹幕,就要设置danmu-list属性。可以看出danmu-list属性是一个数组,而这个数组就要放置我们弹幕的一些数据了。
下面我在代码里给大家简单的演示下弹幕的显示。
首先在wxml里设置danmu-list属性,并且给danmu-list绑定数据danmuList
而这个danmuList就要在js里设置了。
我们可以在danmuList的每个弹幕对象里设置弹幕显示的内容,弹幕的颜色,弹幕显示的时间。
通过上图可以看到,我们设置的弹幕成功的显示在了视频上。这样我们就可以轻松的实现弹幕展示功能了。
16-2-3,发送弹幕功能
我们上面只是简单的展示了弹幕,如果我们想让用户发送弹幕该怎么做呢。下面就来教大家实现弹幕的发送功能。
简单起见,我这里设置一个input来获取用户输入的内容,用一个button按钮来触发弹幕的发送。
wxml文件如下:
这里我们特意设置了一个id属性,我们下面发送弹幕时,需要先初始化一个视频对象,而初始化视频对象时就用到了这个id。
js文件如下:
可以看出,我们在onReady页面渲染完成时,初始化了一个视频对象videoContext,然后通过bindInput获取用户输入的弹幕内容。最后在点击发送弹幕按钮时,通过videoContext.sendDanmu来发送弹幕到视频的屏幕上。
到这里,我们发送弹幕的功能也实现了,当然video视频组件还有很多别的属性,这里就不再一个个介绍了。大家可以自己去看官方文档:
https://developers.weixin.qq.com/miniprogram/dev/component/video.html