16-1,认识图片image组件
image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。
官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
当我们不给image设置宽高时，image组件的默认宽度是320px，高度240px。
image
16-1-1，src属性显示网络图片
我们通过src属性来设置要显示的图片资源，图片资源有两种
- 本地图片资源
- 网络图片资源
由于我们本地的图片会占用小程序软件包的大小，所以这里推荐大家尽量使用网络图片。
image
我们设置显示图片的语法如下
<image src="图片资源地址"></image>
如下图，我们显示一个网络图片。
image
这里给大家两个网络图片地址：
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
然后在image组件里设置src属性，指向这个本地图片，就可以在小程序里展示了。
我把网络图片和本地图片都在小程序里展示，给大家对比着学习下。
image
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 | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
比如我们有一个原图如下。
image
设置不同的mode值，可以很明显的看出来区别
image
后面我们需要对图片做裁剪或者伸缩处理时，就可以设置不同的mode值来实现不同的效果。
16-1-4，图片懒加载
小程序里image组件是支持图片懒加载的，当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。
image
16-2,认识视频video组件
video组件：主要用来实现视频播放。
官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html
16-2-1，src属性设置视频地址
image
video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。
image
我把这几个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
如果上面链接失效，我们可以去官方文档拿官方的视频链接
image
16-2-2，设置视频弹幕属性来显示弹幕
我们上面设置src只能保证视频的正常播放，如果我们想使用弹幕功能，就要为video设置别的属性了。
image
我们如果想在视频上显示弹幕，就要设置danmu-list属性。可以看出danmu-list属性是一个数组，而这个数组就要放置我们弹幕的一些数据了。
image
下面我在代码里给大家简单的演示下弹幕的显示。
首先在wxml里设置danmu-list属性，并且给danmu-list绑定数据danmuList
image
而这个danmuList就要在js里设置了。
image
我们可以在danmuList的每个弹幕对象里设置弹幕显示的内容，弹幕的颜色，弹幕显示的时间。
image
通过上图可以看到，我们设置的弹幕成功的显示在了视频上。这样我们就可以轻松的实现弹幕展示功能了。
16-2-3，发送弹幕功能
我们上面只是简单的展示了弹幕，如果我们想让用户发送弹幕该怎么做呢。下面就来教大家实现弹幕的发送功能。
简单起见，我这里设置一个input来获取用户输入的内容，用一个button按钮来触发弹幕的发送。
wxml文件如下：
image
这里我们特意设置了一个id属性，我们下面发送弹幕时，需要先初始化一个视频对象，而初始化视频对象时就用到了这个id。
js文件如下：
image
可以看出，我们在onReady页面渲染完成时，初始化了一个视频对象videoContext，然后通过bindInput获取用户输入的弹幕内容。最后在点击发送弹幕按钮时，通过videoContext.sendDanmu来发送弹幕到视频的屏幕上。
image
到这里，我们发送弹幕的功能也实现了，当然video视频组件还有很多别的属性，这里就不再一个个介绍了。大家可以自己去看官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
网友评论