记录安卓与uni-app混合开发遇到的坑——图片预览问题

一、场景描述

	用uni-app开发嵌套在安卓里面使用

二、需求描述

	点击图片实现，预览、以及放大缩小拖拽功能（第一反应就是使用uni.previewImage）

三、问题描述

使用uni-app 中的uni.previewImage预览图片，在浏览器正常，但是打包到app 显示不出来,一般如果图片路径有问题，最起码会出现黑色背景，图片加载中，或加载失败的情况，但是app 点击图片，直接显示空白，有大神遇到过这个问题吗?

四、问题解决方式

为了解决以上问题，决定使用 movable-area + movable-view 结合实现该功能（本身这个组件就可以实现放大缩小以及拖拽），样式设置 外层盒子 100vw * 100vh,但是放到app上以后，图片显示不全，全屏的背景色也没有显示，后猜想可能是 高度问题，所以不使用 100vh 而使用 rpx或者px 的 实际高度后，图片能正常预览了

五、奉上代码（组件）

<template>
	<view class="box"  v-if="preview">
		<movable-area scale-area class="movable-area"  @click.stop="preview=false">
			<movable-view class="movable-view" direction="all" scale="true"
				scale-min="1" scale-max="4" :scale-value="scale">
				//为啥使用img, 因为发现使用image 图片显示不了（传入的图片地址没有域名，只有域名后面的部分）
				<img  class="img" :src="src" mode="widthFix"></img>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
			name: 'PreviewPic',
			props: {
				src: {
					type: String,
					required: true
				}
			},
			data() {
				return {
					scale: 1,
					current: '',
					preview: false,
				};
			},
			onLoad() {
			},
			methods: {
			}
		}
</script>

<style lang="scss" scoped>
	.box{
		position: fixed;
		z-index: 99999;
		left: 0;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 800px;
		background-color: #000;
	}
	.movable-area {
		width: 100vw;
		height: 800px;
		
	}
 
	.movable-view {
		width: 100vw;
		height: 100%;
		display: flex;
		justify-content: center; 
		align-items: center;
	}
	.img{
		width: 100%;
    }
</style>

使用时，引入组件，点击图片传入src，控制 组件内 preview 显示就可以了，点击关闭，组件内已经做了，就可以不用管了