Skip to content

C
CFFP-HB
Commit d7e9929b by Sweet Zhang
Options

解决ios加载webview缓慢

parent a01e6a90
Showing with 50 additions and 71 deletions
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<script> <!-- ===== vConsole 提前加载 ===== -->
// ============ 新增：解析 URL 参数并设置状态栏占位 ============ <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
//解决项目以h5的方式内嵌到app的webview中，手机状态栏和页面顶部内容重叠的问题 <script>
(function() { // 立即初始化，不依赖任何框架
function getQueryParam(name) { var vConsole = new window.VConsole();
// 从 hash 中提取查询参数 console.log('[vConsole] 已初始化');
const hash = window.location.hash; </script>
const queryIndex = hash.indexOf('?'); <!-- ===== vConsole 加载结束 ===== -->
console.log('queryIndex', queryIndex); <!-- ===== 1. 状态栏占位 ===== -->
if (queryIndex === -1) return null; <script>
const queryString = hash.substring(queryIndex + 1); (function() {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); function getQueryParam(name) {
const r = queryString.match(reg); var searchParams = new URLSearchParams(window.location.search);
console.log('匹配结果', r); if (searchParams.has(name)) return searchParams.get(name);
if (r != null) return decodeURIComponent(r[2]); var hash = window.location.hash;
return null; var queryIndex = hash.indexOf('?');
} if (queryIndex !== -1) {
const statusBarHeight = getQueryParam('statusBarHeight'); var params = new URLSearchParams(hash.substring(queryIndex + 1));
console.log('状态栏高度', statusBarHeight); if (params.has(name)) return params.get(name);
if (statusBarHeight) { }
const height = parseInt(statusBarHeight, 10); return null;
if (!isNaN(height) && height > 0) { }
document.write('<style>' +
'html, body { margin:0; padding:0; height:100%; overflow:hidden; }' +
'body { padding-top: ' + height + 'px; box-sizing: border-box; }' +
'#app { height: 100%; overflow-y: auto; }' +
'</style>');
}
}
})();
// ============ 新增结束 ============
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
// 判断是否在小程序Webview环境中 var statusBarHeight = getQueryParam('statusBarHeight');
function isInMiniProgram() { if (statusBarHeight) {
// 更安全的小程序环境判断 var height = parseInt(statusBarHeight, 10);
try { if (!isNaN(height) && height > 0) {
return typeof wx !== 'undefined' && wx.miniProgram && wx.miniProgram.getEnv; var style = document.createElement('style');
} catch (e) { style.textContent =
return false; 'html, body { margin:0; padding:0; height:100%; overflow:hidden; }' +
} 'body { padding-top: ' + height + 'px; box-sizing: border-box; }' +
} '#app { height: 100%; overflow-y: auto; }';
document.head.appendChild(style);
}
}
})();
</script>
// 页面加载完成后执行 <!-- ===== 2. Viewport ===== -->
document.addEventListener('DOMContentLoaded', function() { <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
// 非小程序环境才加载微信JS-SDK
if (!isInMiniProgram()) { <title>银盾家办</title>
var script = document.createElement('script'); <link rel="stylesheet" href="./static/font/iconfont.css">
script.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'; <link rel="shortcut icon" href="./static/suplogo.ico">
document.head.appendChild(script); </head>
console.log('加载微信JS-SDK'); <body>
} else { <div id="app"></div>
console.log('小程序Webview环境，不加载微信JS-SDK'); <script type="module" src="/main.js"></script>
} </body>
});
</script>
<title>银盾家办</title>
<link rel="stylesheet" href="./static/font/iconfont.css">
<link rel="shortcut icon" href="./static/suplogo.ico">
</head>
<body>
<div id="app">
<!--app-html-->
</div>
<script type="module" src="/main.js"></script>
</body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment