uniapp解决app端不能用＜web-view＞将外部页面嵌入当前页面的问题
uniapp解决app端不能用将外部页面嵌入当前页面的问题
- 参考资料
- 代码（兼容h5与app）
-
- 父页面
- 子组件
-
- Vue2
- Vue3、组合式、ts
参考资料
android项目嵌套uniapp页面及交互 uniapp嵌套h5页面
代码（兼容h5与app）
父页面
<template>
<view class="contract view-container">
<view class="contract-box f-s-s">
// #ifdef H5
<scroll-view :scroll-y="true" class="scroll">
<web-view src="XXX">
web-view>
scroll-view>
// #endif
// #ifdef APP-PLUS
<Content :url="XXX"
:paddingTop="57.65" :paddingBottom="16.75" :paddingLeft="16.75" :paddingRight="16.75">Content>
// #endif
view>
view>
template>
<script setup lang="ts">
import Content from './content.vue'
script>
<style lang="scss" scoped>
.contract {
position: relative;
height: 100vh;
padding: 57.65rpx 16.75rpx 16.75rpx;
&:before {
position: absolute;
left: 0;
top: 0;
content: '';
width: 100%;
height: 114rpx;
background: linear-gradient(180deg, rgba(61, 61, 61, 0.5) 0%, rgba(61, 61, 61, 0) 100%);
}
&-box {
position: relative;
height: 100%;
overflow: hidden;
.scroll {
height: 100%;
}
}
}
style>
子组件
Vue2
<template>
<view>
view>
template>
<script>
//将要创建的webview对象
var wv;
export default {
props: {
url: {
type: String,
default: '',
},
paddingTop: {
type: Number,
default: 0,
},
paddingBottom: {
type: Number,
default: 0,
},
paddingLeft: {
type: Number,
default: 0,
},
paddingRight: {
type: Number,
default: 0,
},
},
data() {
return {
windowInfo: null
}
},
mounted() {
uni.getSystemInfo({
success: (res) => {
this.windowInfo = res;
this.createWvAndLoadUrl(this.url);
}
});
},
beforeDestroy() {
//关闭webview对象
if (wv) {
wv.close();
//wv.hide();
}
},
methods: {
createWvAndLoadUrl(url) {
// #ifdef APP-PLUS
wv = plus.webview.create(url, "webview", {
plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
top: uni.upx2px(this.paddingTop),
left: uni.upx2px(this.paddingLeft),
scalable: true, // 窗口是否可缩放
height: this.windowInfo.windowHeight - uni.upx2px(this.paddingTop + this.paddingBottom),
width: this.windowInfo.windowWidth - uni.upx2px(this.paddingLeft + this.paddingRight),
background: 'transparent'
})
var currentWebview = this.$parent.$scope
.$getAppWebview(); // 此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
setTimeout(function() {
console.log(wv.getStyle());
}, 1000); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
// #endif
}
}
}
script>
Vue3、组合式、ts
<template>
<view>
view>
template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
const props = withDefaults(
defineProps<{
url : string;
paddingTop : number;
paddingBottom : number;
paddingLeft : number;
paddingRight : number;
}>(),
{
url: '',
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
}
);
var wv : any;
const windowInfo = ref();
const createWvAndLoadUrl = (url : string) => {
// #ifdef APP-PLUS
wv = plus.webview.create(url, "webview", {
plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
top: uni.upx2px(props.paddingTop) as unknown as string,
left: uni.upx2px(props.paddingLeft) as unknown as string,
scalable: true, // 窗口是否可缩放
height: (windowInfo.value.windowHeight - uni.upx2px(props.paddingTop + props.paddingBottom)) as unknown as string,
width: (windowInfo.value.windowWidth - uni.upx2px(props.paddingLeft + props.paddingRight)) as unknown as string,
background: 'transparent'
})
let pages = getCurrentPages();
let page : any = pages[pages.length - 1];
let currentWebview = page.$getAppWebview();
currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
setTimeout(function () {
console.log(wv.getStyle());
}, 1000); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
// #endif
}
onMounted(() => {
uni.getSystemInfo({
success: (res) => {
windowInfo.value = res;
createWvAndLoadUrl(props.url);
}
});
})
onUnmounted(() => {
//关闭webview对象
if (wv) {
wv.close();
}
})
script>