如何在uni-app正确使用web-view

转自：https://www.jianshu.com/p/adc72eae0593

最近在开发个人的一个小项目的时候遇到一个问题，原因是有一个列表，在点击某一项的时候要跳转到详情，这个详情是一个外部链接，并不是内部的
查了一下uni-app的文档，嗯，很好，果然很顺利的找到了web-view组件，然后很天真的直接把web-web放到列表中

<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>
        <!--web-viwe的位置-->
        <web-view :src="url" v-if="url.length"></web-view>
    </view>
</template>

点击列表的某一项，打开了外部链接是这样子的

打开外部的链接

 

乍一看，好像没什么问题，但是！！嗯，我看完了，我怎么返回列表啊！！！（此时心态发生了一些变动，嗯，看看文档，哇！！文档也没说！！只有一些回调函数！！难道我要在回调函数里面给他加一个返回按钮吗？？？这也太蠢了吧！！

弄了快10分钟，突然！想到我好像可以定义一个内部页面，然后就只放一个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>

最终效果

 

有返回按钮啦！