16-1,認識圖片image組件

image組件：主要用來顯示圖片，可以是本地圖片，也可以是網(wǎng)絡圖片。

官方學習文檔：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

當我們不給image設(shè)置寬高時，image組件的默認寬度是320px，高度240px。

16-1-1，src屬性顯示網(wǎng)絡圖片

我們通過src屬性來設(shè)置要顯示的圖片資源，圖片資源有兩種

• 本地圖片資源

• 網(wǎng)絡圖片資源

由于我們本地的圖片會占用小程序軟件包的大小，所以這里推薦大家盡量使用網(wǎng)絡圖片。

我們設(shè)置顯示圖片的語法如下

<image src="圖片資源地址"></image>

• 1

如下圖，我們顯示一個網(wǎng)絡圖片。

這里給大家兩個網(wǎng)絡圖片地址：
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組件里設(shè)置src屬性，指向這個本地圖片，就可以在小程序里展示了。
我把網(wǎng)絡圖片和本地圖片都在小程序里展示，給大家對比著學習下。

16-1-3，通過mode設(shè)置圖片裁剪、縮放的模式

image組件另外一個比較重要的屬性就是mode了。我們在使用圖片時，不能百分之百保證圖片的比例正好是我們想要的，這個時候就要用到圖片的裁剪和縮放了。
mode 的常用設(shè)置如下

值說明scaleToFill縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素aspectFit縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。aspectFill縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。widthFix縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變heightFix縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變 2.10.3top裁剪模式，不縮放圖片，只顯示圖片的頂部區(qū)域bottom裁剪模式，不縮放圖片，只顯示圖片的底部區(qū)域center裁剪模式，不縮放圖片，只顯示圖片的中間區(qū)域left裁剪模式，不縮放圖片，只顯示圖片的左邊區(qū)域right裁剪模式，不縮放圖片，只顯示圖片的右邊區(qū)域top left裁剪模式，不縮放圖片，只顯示圖片的左上邊區(qū)域top right裁剪模式，不縮放圖片，只顯示圖片的右上邊區(qū)域bottom left裁剪模式，不縮放圖片，只顯示圖片的左下邊區(qū)域bottom right裁剪模式，不縮放圖片，只顯示圖片的右下邊區(qū)域

比如我們有一個原圖如下。

設(shè)置不同的mode值，可以很明顯的看出來區(qū)別

后面我們需要對圖片做裁剪或者伸縮處理時，就可以設(shè)置不同的mode值來實現(xiàn)不同的效果。

16-1-4，圖片懶加載

小程序里image組件是支持圖片懶加載的，當我們一個列表頁有很多圖片時，我們可以使用懶加載，來加快頁面加載速度。使用懶加載時，我們只需要給image設(shè)置lazy-load就可以了。

16-2,認識視頻video組件

video組件：主要用來實現(xiàn)視頻播放。

官方學習文檔：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

16-2-1，src屬性設(shè)置視頻地址

video組件里也是通過src屬性來設(shè)置視頻資源的。這里的視頻資源都是網(wǎng)絡連接。

我把這幾個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，設(shè)置視頻彈幕屬性來顯示彈幕

我們上面設(shè)置src只能保證視頻的正常播放，如果我們想使用彈幕功能，就要為video設(shè)置別的屬性了。

我們?nèi)绻朐谝曨l上顯示彈幕，就要設(shè)置danmu-list屬性?？梢钥闯鰀anmu-list屬性是一個數(shù)組，而這個數(shù)組就要放置我們彈幕的一些數(shù)據(jù)了。

下面我在代碼里給大家簡單的演示下彈幕的顯示。
首先在wxml里設(shè)置danmu-list屬性，并且給danmu-list綁定數(shù)據(jù)danmuList

而這個danmuList就要在js里設(shè)置了。

我們可以在danmuList的每個彈幕對象里設(shè)置彈幕顯示的內(nèi)容，彈幕的顏色，彈幕顯示的時間。

通過上圖可以看到，我們設(shè)置的彈幕成功的顯示在了視頻上。這樣我們就可以輕松的實現(xiàn)彈幕展示功能了。

16-2-3，發(fā)送彈幕功能

我們上面只是簡單的展示了彈幕，如果我們想讓用戶發(fā)送彈幕該怎么做呢。下面就來教大家實現(xiàn)彈幕的發(fā)送功能。
簡單起見，我這里設(shè)置一個input來獲取用戶輸入的內(nèi)容，用一個button按鈕來觸發(fā)彈幕的發(fā)送。

wxml文件如下：

這里我們特意設(shè)置了一個id屬性，我們下面發(fā)送彈幕時，需要先初始化一個視頻對象，而初始化視頻對象時就用到了這個id。

js文件如下：

可以看出，我們在onReady頁面渲染完成時，初始化了一個視頻對象videoContext，然后通過bindInput獲取用戶輸入的彈幕內(nèi)容。最后在點擊發(fā)送彈幕按鈕時，通過videoContext.sendDanmu來發(fā)送彈幕到視頻的屏幕上。

到這里，我們發(fā)送彈幕的功能也實現(xiàn)了，當然video視頻組件還有很多別的屬性，這里就不再一個個介紹了。大家可以自己去看官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/component/video.html

持續(xù)更新中，敬請關(guān)注。。。

視頻講解：

https://www.bilibili.com/video/BV12T4y1E7k6/

站內(nèi)視頻：

零基礎(chǔ)入門小程序