uni-app小程序Web页面加载与返回处理

在我开发uni-app小程序的过程中，遇到了需要加载外部Web页面并处理返回事件的需求。这期间，我积累了不少宝贵的经验，尤其是关于使用web-view组件时的各种细节。

一、实现Web页面加载与返回逻辑

我所编写的这个页面组件，主要是通过web-view来展示外部网页。先来看模板部分的代码：

<template>
    <view>
        <web-view v-if="newurl" :src="newurl"></web-view>
    </view>
</template>

在这里，web-view组件是关键，它负责承载外部网页。v-if="newurl"确保只有当newurl有值时才会渲染，避免了不必要的错误。而:src="newurl"则是将newurl变量绑定为网页地址。

再看脚本部分的代码：

<script>
    export default {
        data() {
            return {
                newurl: ''
            }
        },
        onBackPress(e) {
            if (e.from === 'navigateBack') {
                return false;
            }
            console.log('点击返回....');
            let pages = getCurrentPages()
            let page = pages[pages.length - 1];
            let currentPages = page.$getAppWebview()
            currentPages.close()
            uni.navigateBack({ delta: 2 })
            return true;
        },
        onShow() {
        },
        onLoad(opts) {
            this.newurl = "https://www.xxx.com/index"
        },
        methods: {}
    }
</script>

在data中，我定义了newurl变量，初始为空字符串，用于存放要加载的网页URL。onBackPress方法是处理返回事件的核心。当用户触发返回操作时，首先判断e.from === 'navigateBack'，如果是，则直接返回false，防止重复处理。然后，获取当前页面栈，找到最后一个页面实例，通过$getAppWebview()获取对应的Webview实例并关闭它，最后使用uni.navigateBack({ delta: 2 })返回到上两级页面，实现了我想要的导航逻辑。onShow方法目前为空，后续如果有页面显示时的操作需求，我可以在这里添加代码。onLoad方法则是在页面加载时，将目标网页地址赋值给newurl，让web-view能够顺利加载网页。

至于样式部分，我只是简单地设置了页面背景颜色为白色：

<style>
    page {
        background-color: #FFF;
    }
</style>

这使得页面看起来简洁干净，当然，后续还可以根据实际设计需求进行更丰富的样式调整。

二、使用webview跳转页面的业务域名问题

在使用web-view跳转页面时，有一个非常重要的事项，那就是业务域名的设置。小程序中使用web-view加载外部页面，所加载的页面的域名必须在小程序的业务域名列表中进行配置。

如果不配置业务域名，小程序将无法加载对应的网页，会出现页面无法显示的错误。配置业务域名的过程也并不复杂，首先要在小程序的管理后台找到业务域名相关的设置选项。然后，按照要求上传校验文件到对应的域名服务器上，完成域名的校验。只有通过校验的域名，才能被添加到业务域名列表中，从而被小程序的web-view组件正确加载。

我在开发过程中就遇到过因为没有配置业务域名而导致页面加载失败的情况，当时找了很久原因，最后才发现是这个问题。所以，在这里提醒大家，一定要重视业务域名的配置，在使用web-view跳转页面之前，确保目标页面的域名已经正确添加到业务域名列表中。

通过这次开发经历，我对uni-app中web-view组件的使用有了更深入的理解，也更加清楚了业务域名配置的重要性。这不仅让我顺利完成了当前的功能需求，也为我今后开发类似功能积累了宝贵的经验。