很久沒有寫有關(guān)微信小程序的文章了，正好最近在做小程序項(xiàng)目，也遇到了一些小問題轧粟，與大家分享一下蛇券。

一、如何在video摔认、map和canvas等組件上定位元素？

在小程序中video、map和canvas等組件是原生組件派哲，層級(jí)是最高的，我們無法通過CSS樣式來控制其層級(jí)掺喻，但是有時(shí)候我們確實(shí)需要在這些組件上定位元素芭届，比如文字和圖片。

這時(shí)我們就需要用到小程序自身提供的cover-view和cover-image組件感耙，我們可以分別用它們來放置文字和圖片褂乍，需要注意的是，cover-view中只能嵌套cover-view和cover-image即硼。例如：

/* WXSS */
video{ position: relative; width: 100%;}
.text{ position: absolute; bottom: 60rpx; left: 0; right: 0; text-align: center;}

<!--WXML-->
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400">
  <cover-view class='text'>視頻文字</cover-view>
</video>

最終效果如下：

我們可以看到逃片，video標(biāo)簽中可以嵌套想要在視頻上顯示的文字，我們需要使用cover-view標(biāo)簽（非view標(biāo)簽）只酥。同樣的褥实，如果想要在視頻上顯示圖片呀狼，我們就需要使用cover-image標(biāo)簽（非image標(biāo)簽）。當(dāng)然性锭，有時(shí)候我們可能想要嵌套更多文字和圖片赠潦，那么同樣的只能使用cover-view和cover-image組件，否則文字和圖片就被視頻組件遮擋草冈，無法顯示出來她奥。

例如下面的寫法就是錯(cuò)誤的：

<!--WXML-->
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400">
  <cover-view class='text'><text>視頻文字</text></cover-view>
</video>

可能你在開發(fā)工具上也能正常顯示文字，但真機(jī)測(cè)試你就會(huì)發(fā)現(xiàn)文字不見了怎棱。

正確方式應(yīng)該同樣是將text標(biāo)簽替換成cover-view標(biāo)簽哩俭。

<cover-view class='text'><cover-view>視頻文字</cover-view></cover-view>

二、video組件固定定位拳恋，當(dāng)滑動(dòng)頁面時(shí)凡资，視頻會(huì)跟著頁面滾動(dòng)如何解決？

最好的解決辦法就是不要對(duì)video組件進(jìn)行固定定位谬运，而是直接使用正常的文檔流布局方式隙赁。換句話說，我們可以使用scroll-view組件來替代view組件梆暖。例如：

/* WXSS */
#myVideo{ display: block; width: 100%; height: 32vh;}
.text{ height: 68vh;}

<!--WXML-->
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video>
<scroll-view class='text' scroll-y>
  <view>想要學(xué)習(xí)更多前端知識(shí)伞访，歡迎關(guān)注微信公眾號(hào)：前端微站。</view> 
</scroll-view>

需要注意以下兩點(diǎn)：

① video組件與scroll-view組件高度之和應(yīng)為屏幕總高度轰驳，可以直接使用 vh 單位來實(shí)現(xiàn)厚掷。
② scroll-view組件需要加上scroll-y屬性。

三级解、自定義組件無法正常使用怎么辦冒黑？

一般來說遇到自定義組件無法正常使用（組件未正常渲染）有以下幾種可能的原因：

① 開發(fā)工具或調(diào)試基礎(chǔ)庫版本過低
② 未配置組件

③ 未引入組件

它們分別對(duì)應(yīng)的解決方案很簡(jiǎn)單，關(guān)鍵是我們得找出具體問題出在哪里勤哗。以上三個(gè)問題分別對(duì)應(yīng)的解決方案如下：

1. 升級(jí)開發(fā)工具或更改調(diào)試基礎(chǔ)庫版本

升級(jí)開發(fā)工具可以直接上微信小程序官方平臺(tái)上下載抡爹。

更改調(diào)試基礎(chǔ)庫版本可以按以下步驟操作：

① 點(diǎn)擊開發(fā)工具右上角的“詳情”按鈕

② 點(diǎn)擊按鈕展開后找到“調(diào)試基礎(chǔ)庫”，并下拉選擇最新基礎(chǔ)庫（即最頂部選項(xiàng)）

2. 在組件的json文件中添加以下配置代碼

{
  "component": true
}

其實(shí)就是將該模塊聲明為組件芒划。

3. 在需要引入組件的頁面json文件中添加以下配置代碼

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

這步當(dāng)然就是為了引入組件啦豁延，其中component-tag-name代表組件所在路徑，"path/to/the/custom/component"只是示例腊状，需要替換成實(shí)際的組件路徑。

相關(guān)推薦：

微信小程序開發(fā)之路（一）
微信小程序開發(fā)之路（二）
微信小程序開發(fā)之路（三）
微信小程序開發(fā)之路（四）