uniapp中遇到的坑

盘点下我最近使用uniapp开发app踩到的坑，欢迎补充。

因为项目需求需要开发安卓和iOS双端的app，我第一时间想到的只有uniapp，所以便用uniapp开发了。

我使用的技术栈是uniapp+uview框架+vue2。

uview官网

因为我所做的项目需要使用到视频列表，类似b站。我最开始测试的时候是使用h5测试，比较熟悉h5也不用每次用数据线连接安卓设备。等我做好了所有页面后用安卓设备测试的时候发现视频会脱离文档流，一直浮在最顶层，我尝试给视频和导航栏设置z-index。

/* 这是模拟代码 */
.box {
	position: reactive;
	z-index: 99999999999999 !important;
}
.video {
	position: absolute;
	z-index: 0 !important;
}

这样写并没有作用。于是我去uniapp官网查找资料，发现cover-view可以让组件跟原生组件一样。我就尝试这样去写。

<!-- 这是模拟代码 -->
<template>
	<view>
		<cover-view>
			<video src="xxx.mp4"></video>
		</cover-view>
	</view>
</template>

但是也没有起作用。于是我在百度和询问各位大佬听说可以使用nvue进行开发。我就把vue文件迁移成了nvue。我重新在安卓设备上运行我发现现在视频就正常可以被导航栏遮住了。但是此时又发生了一个新的问题，那就是html中的css属性有很多在nvue中并不支持，比如不支持设置百分比单位(100%)和相对于视口的单位(vw、vh)。具体的限制请去uniapp官网查看。

我在接着进行下一步修改另外一个页面的时候发现在nvue使用相对路径写死在视频的src中，可能会出现下面这个错误。

[DEBUG] :Error: Module parse failed: Unexpected character '

但是我全局搜索也都没有搜到’这个意外的字符。于是我找到文件后我一个地方一个地方注释并重新运行，最后发现是出现视频的src属性中。我当时是这样写的。

<!-- 这是模拟代码 -->
<template>
	<view>
		<video src="../xxx/xxx.mp4"></video>
	</view>
</template>

我又去看了我首页的视频代码是怎么写的，因为首页代码也是相对路径拿到的视频。我发现首页的src我是这么写的。

<!-- 这是模拟代码 -->
<template>
	<view>
		<video :src="videoSrc"></video>
	</view>
</template>

// 这是模拟代码
export default {
	data() {
		return {
			videoSrc: '../xxx/xxx.mp4'
		}
	}
}

改成这样后，至此问题解决了！

uview中的ScrollList在nvue中如果设置了indicatorWidth宽度(指示器的整体宽度)，则滑块会不会滑动。不设置宽度则正常滑动。但是我目前使用的时候会存在宽度太短导致滑倒顶以后会导致看不见滑块。目前还没解决，有技术的大佬可以在下方留言帮忙出出主意哦，我目前的解决办法是直接不显示指示器。

如果还有什么不足的地方欢迎给位大佬补充。最后祝大家事事顺心，代码永无bug。