最近研究小程序,发现需要引入外部链接,其实很容易实现:
1、新建一个wenView页面:
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(e) {
console.log("e",e)
// 获取传递过来的链接
this.url = e.url
}
}
</script>
2、需要引入外部链接的页面
<template>
<view class="history">
<view class="list">
<view
class="item"
v-for="(item, index) in list"
:key="index"
>
<u-button @click="itemClick(item)">{{item.title}}</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
title: "百度跳转",
link: 'https://www.baidu.com/index.php?tn=request_21_pg&ch=5'
}]
}
},
methods: {
itemClick (data) {
// 跳转到内部窗口并且传递链接
uni.navigateTo({
url: `/pages/webview/webview?url=${data.link}`
})
}
},
created() {
//异步获取数据啦,没什么好说的
}
}
</script>
<style lang="scss">
.item {
width: 100%;
}
</style>
3、效果图: