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>

tips:如果链接地址不是https的，可能会出现页面无法跳转的问题：需要通过一下步骤去配置一下：

https://smartprogram.baidu.com/docs/develop/component/open_web-view/

到这里的完成啦~okk