创建一个名为webview的uni-app页面,并在该页面中使用web-view组件,如下所示:
export default {
data() {
return {
url: '',
}
},
onLoad (option) {
// 从路由传参获取URL地址
this.url = option.url
}
}
在这个页面中,我们定义了一个名为url的data属性,用于设置web-view组件的URL地址,通过从路由传参获取URL,即可在页面加载时根据传参设置web-view的URL地址。需要使用onLoad生命周期函数来获取路由传参。
在其他页面中使用uni.navigateTo函数跳转至webview页面,并把目标URL地址传递给webview页面
uni.navigateTo({
url: '/pages/webview/webview?url=https://www.baidu.com/'
})
在这个示例中,我们在一个页面中使用uni.navigateTo函数,跳转到webview页面,同时通过query参数传递百度网址的URL。即:url=https://www.baidu.com/。这样,当跳转到webview页面时,会通过onLoad生命周期函数获取该URL,从而使用web-view组件加载该链接的内容。 通过以上操作,就可以在uni-app中以新的webview窗口打开外部链接的页面了。具体代码如下:
// index.vue
export default {
methods: {
openBaidu() {
uni.navigateTo({
url: '/pages/webview/webview?url=https://www.baidu.com/'
})
}
}
}
// webview.vue
export default {
data() {
return {
url: '',
}
},
onLoad (option) {
// 从路由传参获取URL地址
this.url = option.url
}
}
相关文章
发表评论