一、使用uniapp开发小程序时,要跳转外部链接,实现的效果如下:
二、实现的步骤:
①先在自己uniapp项目pages.json中建一个页面webview.vue
{"path" : "pages/webview/webview","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}
}
②页面webview.vue中的全部代码如下:
<template><web-view :src="url"></web-view>
</template><script>export default {data() {return {url: ''}},onLoad(e) {// 传入需要跳转的链接 使用web-view标签进行跳转this.url = decodeURIComponent(e.url)// console.log(this.url)}}
</script>
③在需要操作的页面,通过点击事件触发跳转
<template><view @click="mycat()">点击跳转</view>
</template><script>//跳转外部链接mycat() {let url = 'https://www.baidu.com/'// 填写要跳转的链接 uni.navigateTo({url: '/pages/webview/webview?url=' + url// page.json定义的路径 传url到webview界面去接收-实现跳转})
},
</script>
tips:如果链接地址不是https的,可能会出现页面无法跳转的问题:需要通过一下步骤去配置一下:
https://smartprogram.baidu.com/docs/develop/component/open_web-view/