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

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

一、如何在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;}

最终效果如下：

我们可以看到，video标签中可以嵌套想要在视频上显示的文字，我们需要使用cover-view标签（非view标签）。同样的，如果想要在视频上显示图片，我们就需要使用cover-image标签（非image标签）。当然，有时候我们可能想要嵌套更多文字和图片，那么同样的只能使用cover-view和cover-image组件，否则文字和图片就被视频组件遮挡，无法显示出来。

例如下面的写法就是错误的：

可能你在开发工具上也能正常显示文字，但真机测试你就会发现文字不见了。

正确方式应该同样是将text标签替换成cover-view标签。

视频文字

二、video组件固定定位，当滑动页面时，视频会跟着页面滚动如何解决？

最好的解决办法就是不要对video组件进行固定定位，而是直接使用正常的文档流布局方式。换句话说，我们可以使用scroll-view组件来替代view组件。例如：

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




  想要学习更多前端知识，欢迎关注微信公众号：前端微站。

需要注意以下两点：

① 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"只是示例，需要替换成实际的组件路径。