提交 1181277d 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

test: 优化 webview 平台截图对比测试例

上级 e612c8e2
<template> <template>
<web-view id="webview-screenshot" class="webview-screenshot" :webview-styles='webviewStyles' :src="src" <web-view id="webview-screenshot-comparison" class="webview-screenshot-comparison" :webview-styles="webviewStyles"
@loaded="loaded" @error="error"> :src="src" @loaded="loaded" @error="error">
</web-view> </web-view>
</template> </template>
...@@ -22,37 +22,39 @@ ...@@ -22,37 +22,39 @@
} }
}, },
onReady() { onReady() {
this.webviewContext = uni.createWebviewContext('webview-screenshot', this) this.webviewContext = uni.createWebviewContext('webview-screenshot-comparison', this)
}, },
methods: { methods: {
appendWebHeadPlaceholder() { appendWebHeadPlaceholder() {
if (this.src.indexOf('pages/template/navbar-lite/navbar-lite') > -1) { if (this.src.indexOf('pages/template/navbar-lite/navbar-lite') > -1) {
this.webviewContext?.evalJS(` this.webviewContext?.evalJS(`
const uniNavbar = document.querySelector('.uni-navbar'); const uniNavbar = document.querySelector('.uni-navbar');
uniNavbar.style.paddingTop = '${state.headerHeight - 44}px'; uniNavbar.style.paddingTop = '${state.headerHeight - 44}px';
`) `)
} else if (this.src.indexOf('pages/template/scroll-fold-nav/scroll-fold-nav') > -1) { } else if (this.src.indexOf('pages/template/scroll-fold-nav/scroll-fold-nav') > -1) {
this.webviewContext?.evalJS(` this.webviewContext?.evalJS(`
const heightSeat = document.querySelector('.height-seat'); const heightSeat = document.querySelector('.height-seat');
heightSeat.style.height = '125px'; heightSeat.style.height = '125px';
heightSeat.style.backgroundColor = '#f0f8ff'; heightSeat.style.backgroundColor = '#f0f8ff';
const topBox = document.querySelector('.top-box'); const topBox = document.querySelector('.top-box');
topBox.style.top = '35px'; topBox.style.top = '35px';
`) `)
} else if (this.src.indexOf('pages/template/pull-zoom-image/pull-zoom-image') > -1) {
return
} else { } else {
this.webviewContext?.evalJS(` this.webviewContext?.evalJS(`
const hasWebHeadPlaceholder = document.querySelector('.web-head-placeholder-for-screenshot-comparison'); const hasWebHeadPlaceholder = document.querySelector('.web-head-placeholder-for-screenshot-comparison');
if (hasWebHeadPlaceholder) { if (hasWebHeadPlaceholder) {
return; return;
} }
const webHeadPlaceholder = document.createElement('div'); const webHeadPlaceholder = document.createElement('div');
webHeadPlaceholder.style.height = '${state.headerHeight - 44}px'; webHeadPlaceholder.style.height = '${state.headerHeight - 44}px';
webHeadPlaceholder.style.backgroundColor = '#007aff'; webHeadPlaceholder.style.backgroundColor = '#007aff';
webHeadPlaceholder.classList.add('web-head-placeholder-for-screenshot-comparison'); webHeadPlaceholder.classList.add('web-head-placeholder-for-screenshot-comparison');
const uniPage = document.querySelector('uni-page'); const uniPage = document.querySelector('uni-page');
const uniPageHead = document.querySelector('uni-page-head'); const uniPageHead = document.querySelector('uni-page-head');
uniPage.insertBefore(webHeadPlaceholder, uniPageHead); uniPage.insertBefore(webHeadPlaceholder, uniPageHead);
`); `);
} }
}, },
loaded() { loaded() {
...@@ -66,7 +68,7 @@ ...@@ -66,7 +68,7 @@
} }
</script> </script>
<style> <style>
.webview-screenshot { .webview-screenshot-comparison {
flex: 1; flex: 1;
} }
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册