Uniapp中如何获取App端当前webview的URL方法

文
章
目
录

• 一、需求背景
• 二、技术要点概述
• 三、实现代码及解析
• （一）getCurrentPages()
• （二）page.$getAppWebview()
• （三）currentWebview.children()[0].getURL()

本文将详解在Uniapp的App端获取当前webview的URL这一问题，详细介绍具体实现方法和相关原理，帮助大家轻松解决此类开发难题。

一、需求背景

最近在进行uniapp项目开发时，我碰到了这样一个需求：需要获取当前webview的URL，然后依据获取到的页面URL来执行不同的操作逻辑。不知道各位开发者朋友在项目中是否也遇到过类似的需求呢？

二、技术要点概述

本次涉及的技术栈是uniapp，并且仅针对App端。这里要获取的URL可能来自第三方链接，需要注意的是，它并非当前webview的路径。如果直接通过web – view组件的src属性或者message事件去监听URL变化，是无法获取到当前实际加载的URL的，得到的仅仅是当前webview的路径。

三、实现代码及解析

实现获取当前webview的URL，完整代码如下：

// 获取页面栈，这是一个包含所有已打开页面实例的数组
let pages = getCurrentPages();
// 获取页面栈中最后一个页面实例，即当前显示的页面
let page = pages[pages.length - 1];
// 获取当前页面对应的原生WebView对象
let currentWebview = page.$getAppWebview();
// 从原生WebView对象中获取当前加载的URL
let pageUrl = currentWebview.children()[0].getURL();
console.log(\'获取当前web - view的URL\', pageUrl);

接下来，对代码中的关键部分进行详细解析：

（一）getCurrentPages()

• 作用：获取页面栈，也就是所有已经打开的页面实例组成的数组。
• 说明：getCurrentPages()是uniapp官方提供的API。通过调用它，能返回一个数组，数组中的每个元素都是一个页面实例，而数组的最后一个元素就代表当前正显示在用户面前的页面。这就好比你打开了多个网页标签，通过这个API可以找到当前正在浏览的那个标签对应的页面实例。

（二）page.$getAppWebview()

• 作用：获取当前页面对应的原生WebView对象。
• 说明：$getAppWebview()并非uniapp官方公开的API，它是HBuilderX内部的方法，仅在App平台上有效。如果在其他平台（像H5、小程序）调用这个方法，程序就会报错。简单理解，它是App端特有的一个“秘密通道”，能让我们访问到原生的WebView对象。

（三）currentWebview.children()[0].getURL()

• 作用：从原生WebView对象中提取URL。
• 说明：
  • currentWebview.children()用于获取WebView的子组件列表，就像是查看一个容器里装了哪些东西。
  • children()[0]这里假定WebView子组件列表中的第一个组件就是我们要找的目标WebView。不过要注意，这种依赖层级结构的方式可能不太稳定，如果WebView的层级结构发生变化，可能就获取不到正确的组件了。
  • .getURL()则是调用原生WebView的方法，用来获取当前正在加载的URL，这就是我们最终想要得到的结果。

通过以上步骤，就能在Uniapp的App端成功获取当前webview的URL啦。希望这篇文章能对大家的开发工作有所帮助，如果觉得有用，常来本博客看看！