小程序的 web-view 组件：实现点击跳转外部链接的高级技巧
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
在小程序中，web-view 组件用于嵌入网页。如果你想要实现点击 web-view 内的某个链接后在小程序外打开浏览器访问，可以在网页中通过 JavaScript 监听点击事件并调用 wx.miniProgram.navigateToMiniProgram 方法来实现跳转至小程序的其他页面，或者直接在网页中打开外部链接。
以下是在网页中打开外部链接的示例代码：
<!-- 假设这是你的 web-view 中加载的网页内容 -->
<!DOCTYPE html>
<html>
<head>
<title>Web View Test</title>
<script type="text/javascript">
// 监听点击事件
function openLink(url) {
// 在小程序中打开外部链接
if (typeof wx === 'object' && typeof wx.miniProgram === 'object') {
wx.miniProgram.navigateToMiniProgram({
appId: 'your-miniprogram-appid', // 你的小程序 appId
path: 'pages/index/index', // 跳转的小程序页面路径
extraData: {
url: url // 需要传递的额外参数
},
success(res) {
// 打开小程序页面成功的回调
}
});
} else {
// 在浏览器中打开外部链接
window.location.href = url;
}
}
</script>
</head>
<body>
<a href="https://www.example.com" onclick="openLink(this.href); return false;">访问外部链接</a>
</body>
</html>在上述代码中，openLink 函数会在点击链接时被调用。如果在小程序环境中，它会使用 wx.miniProgram.navigateToMiniProgram 方法跳转至小程序内的指定页面，并通过 extraData 传递了外部链接的 URL。如果不在小程序环境中，它会使用 window.location.href 在浏览器中打开链接。注意替换 your-miniprogram-appid 和 pages/index/index 为你自己的小程序 appId 和页面路径。
评论已关闭