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

一、使用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>

到这里的完成啦~okk