uniapp开发小程序：使用webview 跳转外部链接-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp开发小程序：使用webview 跳转外部链接。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、使用uniapp开发小程序时，要跳转外部链接，实现的效果如下：

uniapp开发小程序：使用webview 跳转外部链接

二、实现的步骤：

①先在自己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>