uni-app中使用web-view 预览文件

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

官网链接：web-view | uni-app官网 (dcloud.net.cn) 

借鉴：如何在uni-app正确使用web-view - 简书 (jianshu.com)

uniapp 完整实例：Link 链接 (dcloud.net.cn) 

定义一个内部页面，然后就只放一个web-view，然后在列表点击的时候，跳转到该内部页面，并且把需要打开的链接传递到该页面 

不适配所有移动端

<template>
    <view class="history">
        <view class="list">
            <view
                class="item"
                v-for="(item, index) in list"
                :key="index"
                @click="itemClick(item)"
            >
                <view class="date">
                    {{item.title}}
                </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: []
            }
        },
        methods: {
            itemClick (data) {
                 // 跳转到内部窗口并且传递链接
                 // 重点！！！
                uni.navigateTo({
                    url: `/pages/webview/webview?url=${data.link}`
                })
            }
        },
        created() {
//异步获取数据啦，没什么好说的
        }
    }
</script>

webview内部页面

<template>
    <view>
        <web-view :src="url"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                url: ''
            }
        },
        onLoad(e) {
             // 获取传递过来的链接
            this.url = e.url
        }
    }
</script>

效果

适配所有移动端

 移动端-H5-小程序在线预览pdf，图片，视频 - DCloud 插件市场

预览图片  

uni.previewImage(options) @previewimage | uni-app官网 (dcloud.net.cn)

uni.previewImage({
   	urls: this.imageList,  数组
   	current: index     预览图片个数  current: 0
})