uniapp 小程序点击 跳转外部 webview 页面, weiview 点击事件在跳回到小程序的某个页面
时间: 2024-09-20 11:10:03 浏览: 79
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
5星 · 资源好评率100%
UniApp 的小程序想要实现点击外部 Webview 页面并能返回到小程序内部指定页面,可以借助 UniApp 提供的`uni.navigateTo`或者`uni.switchTab`方法配合 Webview 组件。步骤如下:
1. 首先,在小程序内创建一个 Webview 组件,并设置它作为外部链接打开:
```html
<web-view url="https://www.example.com" @load="onWebViewLoad"></web-view>
```
2. 在对应的 JavaScript 文件里,添加 `onWebViewLoad` 方法处理 Webview 加载完成后的回调:
```javascript
Page({
onWebViewLoad: function(e) {
// 当 Webview 加载完成后,这里可以监听用户操作,如点击事件
this.webView = e.target;
this.webView.addEventListener('click', handleExternalLinkClick);
},
handleExternalLinkClick(event) {
const {url} = event.detail; // 获取被点击的链接
if (url.startsWith('http')) { // 判断是否为外部链接
// 使用 uni.navigateTo 或者 uni.switchTab 转换回小程序页面
uni.navigateTo({
url: '/pages/your-target-page/your-target-page',
});
}
}
})
```
在这个例子中,当 Webview 内部有链接被点击时,会触发 `handleExternalLinkClick` 函数,判断如果是外部链接,就通过导航跳转到目标小程序页面。
阅读全文