uniapp使用web-view跳转外部链接

1.创建webView跳转公用文件(home是调用处);

<template>
<web-view :src="url"></web-view>
</template>

<script>
export default {
    name: "index",
    data(){
        return{
            url:''
        }
    },
    onLoad(val){
    	//动态获取的url
        this.url=decodeURIComponent(val.url)
    }
}
</script>

<style scoped>
</style>

2.在使用页面调用webview跳转(encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。敲黑板~重点)

//页面调用处
<uni-grid-item @tap="queryCorpInfo">
	<image class="image" src="../../../static/img/home/corpInfoImage.png" mode="aspectFill"></image>
	<text class="text">跳转外部连接</text>
</uni-grid-item>


//执行方法
queryCorpInfo(){
				let url = this.baseHtmlUrl+'qhbs_h5_v1/pages/corpInfo/corpInfo.html'
				var typefrom = 'wechat';
				url = encodeURIComponent(url + '?typefrom=${typefrom}');
				uni.navigateTo({
					url: '../../webview/index?url='+ url
				});
			}

3.html中获取携带的参数。

//获取地址栏参数,name:参数名称
function getUrlParms (name) {
   let url = window.location.href;//获取请求进来的完整url
   let tstr = url.substring(url.indexOf('?') + 1).split('&');//先截取url的?后面的参数部分,在根据&分割成参数数组
   let result = {};
   tstr.forEach((item) => {
   let res = item.split('=');//res为type,my-component1.vue。  res[0]为type,res[1为]my-component1.vue
   result[res[0]] = res[1];//构造成键值对形式 res[0]为键,res[1]为值 例:type: "my-component1.vue" 
  })
  return result[name];//通过键取值
}

var type = getUrlParms("type");//调用函数即可

猜你喜欢

转载自blog.csdn.net/qq_41992943/article/details/107955815