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

很久没有写有关微信小程序的文章了，正好最近在做小程序项目，也遇到了一些小问题，与大家分享一下。

一、如何在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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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"只是示例，需要替换成实际的组件路径。

相关推荐：

微信小程序开发之路（一）
微信小程序开发之路（二）
微信小程序开发之路（三）
微信小程序开发之路（四）

作者：前端王睿
链接：https://www.jianshu.com/p/f410cc252e72