uniapp development applet: use webview to jump to external links

1. When using uniapp to develop small programs, you need to jump to external links. The effect is as follows:

insert image description here

Second, the steps to achieve:

① First build a page webview.vue in your uniapp project pages.json

{
    
    
    "path" : "pages/webview/webview",
    "style" :                                                                                    
       {
    
    
          "navigationBarTitleText": "",
          "enablePullDownRefresh": false
       }
}

② All the codes in the page webview.vue are as follows:

<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>

③On the page that needs to be operated, trigger the jump through the click event

<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>

It's done here~ okk

おすすめ

転載: blog.csdn.net/weixin_48596030/article/details/130153006