微信小程序发展之路（五）

我很久没有写过关于微信小程序的文章了。我最近正好在做一个小程序项目，我也遇到了一些小问题。让我和你分享。

1、 如何在视频、地图、画布和其他组件上定位元素？

在小程序中，视频、地图和画布等组件是具有最高级别的本地组件。我们无法通过CSS样式控制它们的级别，但有时我们确实需要在这些组件上定位元素，例如文本和图像。

此时，我们需要使用小程序本身提供的封面视图和封面图像组件。我们可以使用它们分别放置文本和图像。请注意，封面视图中只能嵌套封面视图和封面图像。例如：

/*wxs软件*/

视频{位置：相对；宽度：100%；}

.text｛位置：绝对；底部：60rpx；左侧：0；右侧：0；文本对齐：居中；｝

视频文本</cover view>

最终效果如下：

我们可以看到，您想要在视频上显示的文本可以嵌套在视频标记中。我们需要使用封面视图标签（而不是视图标签）。同样，如果我们想在视频中显示图像，我们需要使用封面图像标签（而不是图像标签）。当然，有时我们可能希望嵌套更多的文本和图像，因此我们只能使用封面视图和封面图像组件，否则文本和图像将被视频组件遮挡，无法显示。

例如，以下书写错误：

<；text>视频文本<；text><；/封面视图>

也许您可以在开发工具上正常显示文本，但您会发现在实际机器测试中缺少文本。

正确的方法是用封面视图标记替换文本标记。

<；封面视图>视频文本<；/cover视图><；/封面视图>

2、 如何解决视频组件固定的问题。当页面滑动时，视频将随页面滚动？

最好的解决方案不是固定视频组件的位置，而是直接使用正常的文档流布局。换句话说，我们可以使用滚动视图组件来替换视图组件。例如：

/*wxs软件*/

#myVideo｛显示：块；宽度：100%；高度：32vh；｝

.text｛高度：68vh；｝

如果您想了解更多前端知识，请关注微信公众号：前端微信<；/视图>

应注意以下两点：

① 视频组件和滚动视图组件的高度之和应该是屏幕的总高度，可以直接以vh单位实现。

② 滚动视图组件需要添加scroll-y属性。

3、 如果自定义组件不能正常使用怎么办？

通常来说，自定义组件无法正常使用（组件无法正常渲染）的原因有几种：

① 开发工具或调试库的版本太低

② 未配置组件

③ 未引入组件

他们相应的解决方案很简单，关键是找出具体问题在哪里。上述三个问题的解决方案如下：

1.升级开发工具或更改调试库版本

升级开发工具可以直接在官方微信小程序平台上。

要更改调试库的版本，可以执行以下步骤：

① 单击开发工具右上角的“详细信息”按钮

② 单击按钮展开并找到“调试基本库”，然后从下拉列表中选择最新的基本库（即顶部选项）

2.将以下配置代码添加到组件的json文件中

{

“组件”：真

}

实际上，模块被声明为组件。

3.将以下配置代码添加到需要导入组件的页面的json文件中

{

“使用组件”：{

“组件标记名”：“路径/到/