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

r囧r小猫 2021-10-01 09:00 1175阅读 0赞

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

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

![18749935-1c7388851f063659.png][]

打开外部的链接

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

弄了快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>

最终效果

![18749935-38a78e846ac4e762.png][]

有返回按钮啦！

[18749935-1c7388851f063659.png]: /images/20210825/3a5bc479e6b34546b5c3423728e6aad9.png
[18749935-38a78e846ac4e762.png]: /images/20210825/fb6e0b5f735d46228d746bf91db6fd07.png