很久没有写有关微信小程序的文章了，正好最近在做小程序项目，也遇到了一些小问题，与大家分享一下。
一、如何在video、map和canvas等组件上定位元素？
在小程序中video、map和canvas等组件是原生组件，层级是最高的，我们无法通过CSS样式来控制其层级，但是有时候我们确实需要在这些组件上定位元素，比如文字和图片。
这时我们就需要用到小程序自身提供的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标签中可以嵌套想要在视频上显示的文字，我们需要使用cover-view标签（非view标签）。同样的，如果想要在视频上显示图片，我们就需要使用cover-image标签（非image标签）。当然，有时候我们可能想要嵌套更多文字和图片，那么同样的只能使用cover-view和cover-image组件，否则文字和图片就被视频组件遮挡，无法显示出来。
例如下面的写法就是错误的：
<!--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>
可能你在开发工具上也能正常显示文字，但真机测试你就会发现文字不见了。
正确方式应该同样是将text标签替换成cover-view标签。
<cover-view class='text'><cover-view>视频文字</cover-view></cover-view>
二、video组件固定定位，当滑动页面时，视频会跟着页面滚动如何解决？
最好的解决办法就是不要对video组件进行固定定位，而是直接使用正常的文档流布局方式。换句话说，我们可以使用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>想要学习更多前端知识，欢迎关注微信公众号：前端微站。</view>
</scroll-view>
需要注意以下两点：
① video组件与scroll-view组件高度之和应为屏幕总高度，可以直接使用 vh 单位来实现。
② scroll-view组件需要加上scroll-y属性。
三、自定义组件无法正常使用怎么办？
一般来说遇到自定义组件无法正常使用（组件未正常渲染）有以下几种可能的原因：
① 开发工具或调试基础库版本过低
② 未配置组件
③ 未引入组件
它们分别对应的解决方案很简单，关键是我们得找出具体问题出在哪里。以上三个问题分别对应的解决方案如下：
1. 升级开发工具或更改调试基础库版本
升级开发工具可以直接上微信小程序官方平台上下载。
更改调试基础库版本可以按以下步骤操作：
① 点击开发工具右上角的“详情”按钮
② 点击按钮展开后找到“调试基础库”，并下拉选择最新基础库（即最顶部选项）
2. 在组件的json文件中添加以下配置代码
{
"component": true
}
其实就是将该模块声明为组件。
3. 在需要引入组件的页面json文件中添加以下配置代码
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
这步当然就是为了引入组件啦，其中component-tag-name代表组件所在路径，"path/to/the/custom/component"只是示例，需要替换成实际的组件路径。
