uni-app移动端-H5-微信小程序在线预览pdf，图片，视频

封装了一个插件，可直接导入hbuilderx查看使用；
插件地址：uni-app移动端-H5-微信小程序在线预览pdf，图片，视频

<template>
	<view class="page">
		<!-- 预览图片 -->
		<view v-if="previews.type === '1'" class="g-p-16" style="width:100%;height:100vh;margin:0 auto;">
			<image :src="src" style="width:100%;height:100%;" mode="aspectFit"></image>
		</view>
		<!-- 预览文件 -->
		<web-view :webview-styles="webviewStyles" :src="src" v-if="previews.type === '2'"></web-view>
		<!-- 预览视频 -->
		<view class="video-detail-page" v-if="previews.type === '3'">
			<view class="video-box">
				<video v-if="src" :src="src"></video>
			</view>
		</view>	
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileSrc: '',
			webviewStyles: {
				progress: {
					color: '#FF3333'
				}
			},
			url: '',
			src: '',
			previews: {
				type: '1'
			}
		};
	},
	onLoad(option) {
		console.log('file', option.file);
		
		if (option.file) {
			console.log(333, option);
			this.previews.type = option.type;
			let types = option.file.substr(option.file.lastIndexOf('.'));
			if (types === '.doc' || types === '.docx' || types === '.xls' || types === '.xlsx' || types === '.pdf') {
				let url = option.file;
				this.fileSrc = encodeURIComponent(url);
				this.src = `/hybrid/html/pdf-reader/index.html?file=${this.fileSrc}`;
			}else{
				this.src = option.file;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	height: 100%;
	.video-detail-page{
		width:100%;
		uni-video{
			width:100%;
		}
		video{
			width:100%;
		}
	}
}
</style>