Skip to content

C
CFFP-HB
Commit d7e9929b by Sweet Zhang
Options

解决ios加载webview缓慢

parent a01e6a90
Showing with 280 additions and 210 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
util/fiveshare.ts
// var wx = require("weixin-js-sdk/index.js") //引入刚下载的js文件 // fiveshare.ts
// import $H from '@/api/request.js' //封装好的接口请求
// import wx from 'weixin-js-sdk'
import api from "../api/api"; import api from "../api/api";
import {companyInfo,baseURL,shareURL} from "@/environments/environment"; import { shareURL } from "@/environments/environment";
let userInfo = {name:''}
if(uni.getStorageSync('cffp_userInfo')){
userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
}
// 初始化SDK
export function initJssdkShare(callback, url) {
const WxConfigRequestVO = {
url: url,
systemType: uni.getStorageSync('addSystemType') || '1'
};
// 后端的自定义分享接口，拿到分享的appId、signature等信息
api.Wxshare(WxConfigRequestVO).then(res => {
jWeixin.config({
debug: false, // 生产环境关闭调试
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage']
});
jWeixin.ready(() => { let userInfo = { name: '' };
console.log('微信SDK初始化完成'); if (uni.getStorageSync('cffp_userInfo')) {
if (callback) callback(); userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'));
}); }
jWeixin.error(err => { // ===== 环境判断工具 =====
console.error('微信SDK初始化失败', err); function isWechatBrowser(): boolean {
}); return /micromessenger/i.test(navigator.userAgent);
});
} }
// 设置微信分享内容（不自动覆盖，需手动调用） function isMiniProgramWebView(): boolean {
export function setWechatShare(data) { // 检查微信环境变量
console.log('分享data',data); if (typeof window.__wxjs_environment !== 'undefined' && window.__wxjs_environment === 'miniprogram') {
if (!jWeixin) { return true;
console.error('微信SDK未初始化'); }
return; // 检查 URL 参数
} if (window.location.search.indexOf('from=miniprogram') > -1 ||
if(!data){ window.location.hash.indexOf('from=miniprogram') > -1) {
const currentUrl = `${shareURL}/pages/index/index`; return true;
data = { }
title: '成为银盾合伙人，分享商品赚不停', return false;
// desc: `${userInfo.name || ''}邀您加入【家庭财策师联盟】，资源+伙伴，共赢未来！`, }
desc: `资源+伙伴，共赢未来！`,
link: currentUrl, // ===== 确保微信 SDK 已加载 =====
imgUrl: `${shareURL}/static/images/shareBg.png` function ensureWechatSDK(): Promise<void> {
}; return new Promise((resolve, reject) => {
} // 如果已经有 jWeixin 且不是占位对象
jWeixin.ready(() => { // @ts-ignore
// 新API（推荐） if (window.jWeixin && window.jWeixin.config !== function() { console.warn('[占位] wx.config'); }) {
jWeixin.updateAppMessageShareData({ resolve();
title: data.title, return;
desc: data.desc, }
link: data.link,
imgUrl: data.imgUrl, // 如果已经有 wx（原生对象）
success: () => console.log('好友分享设置成功') // @ts-ignore
}); if (typeof wx !== 'undefined' && wx.config) {
// @ts-ignore
jWeixin.updateTimelineShareData({ window.jWeixin = wx;
title: data.title, resolve();
link: data.link, return;
imgUrl: data.imgUrl, }
success: () => console.log('朋友圈分享设置成功')
// 动态加载微信 SDK
const script = document.createElement('script');
script.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
script.onload = function() {
// @ts-ignore
if (typeof wx !== 'undefined') {
// @ts-ignore
window.jWeixin = wx;
console.log('✅ 微信 SDK 动态加载成功');
resolve();
} else {
reject(new Error('微信 SDK 加载失败'));
}
};
script.onerror = function() {
reject(new Error('微信 SDK CDN 加载失败'));
};
document.head.appendChild(script);
}); });
}
// ===== 初始化微信 SDK =====
export function initJssdkShare(callback: any, url: string) {
// 只在微信浏览器且非小程序环境中初始化
if (!isWechatBrowser() || isMiniProgramWebView()) {
console.log('当前环境不需要初始化微信 SDK:',
isWechatBrowser() ? '微信浏览器' : '非微信浏览器',
isMiniProgramWebView() ? '小程序 WebView' : '普通环境'
);
if (callback) callback();
return;
}
console.log('🔄 开始初始化微信 SDK...');
// 旧API（兼容） ensureWechatSDK().then(() => {
jWeixin.onMenuShareAppMessage({ // @ts-ignore
title: data.title, const wx = window.jWeixin || window.wx;
desc: data.desc, if (!wx) {
link: data.link, console.error('❌ 无法获取微信 SDK');
imgUrl: data.imgUrl, if (callback) callback();
success: () => console.log('旧版分享设置成功') return;
}
const WxConfigRequestVO = {
url: url || window.location.href.split('#')[0],
systemType: uni.getStorageSync('addSystemType') || '1'
};
api.Wxshare(WxConfigRequestVO).then(res => {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage']
});
wx.ready(() => {
console.log('✅ 微信 SDK 初始化完成');
if (callback) callback();
});
wx.error((err: any) => {
console.error('❌ 微信 SDK 初始化失败', err);
if (callback) callback();
});
}).catch(err => {
console.error('❌ 获取微信签名失败', err);
if (callback) callback();
});
}).catch(err => {
console.error('❌ 微信 SDK 加载失败', err);
if (callback) callback();
}); });
});
} }
// 在页面上直接调用此方法实现h5的自定义分享 data是穿的参数 url是当前页面的链接
export function hshare(data,url){ // ===== 获取分享数据 =====
console.log('data,url',data,url); function getShareData(data?: any) {
// 确保分享的链接不包含时间戳 if (data) return data;
// initJssdkShare(data, url)
initJssdkShare(function(){
jWeixin.ready(function(){
var sharedata={
title: data.title, //标题
desc: data.desc, //描述
link: data.link ,//分享链接
imgUrl:data.imgUrl, //图片
success:(res=>{
})
};
jWeixin.updateAppMessageShareData(sharedata)//自定义微信分享给朋友
jWeixin.updateTimelineShareData(sharedata);//自定义微信分享给朋友
jWeixin.onMenuShareAppMessage(sharedata);//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
})
},url)
}
// 新的分享方法 直接调起微信好友弹窗
// 设置微信分享内容并直接调起分享
export function setWechatShareDirectly(data) {
if (!jWeixin) {
console.error('微信SDK未初始化');
return;
}
if(!data){
const currentUrl = `${shareURL}/pages/index/index`; const currentUrl = `${shareURL}/pages/index/index`;
data = { return {
title: '成为银盾合伙人，分享商品赚不停', title: '成为银盾合伙人，分享商品赚不停',
desc: `资源+伙伴，共赢未来！`, desc: '资源+伙伴，共赢未来！',
link: currentUrl, link: currentUrl,
imgUrl: `${shareURL}/static/images/shareBg.png` imgUrl: `${shareURL}/static/images/shareBg.png`
}; };
} }
jWeixin.ready(() => { // ===== 设置微信分享（主入口） =====
// 尝试直接调起分享 export function setWechatShare(data: any) {
console.log('📤 setWechatShare 被调用', data);
// 在小程序环境中，不执行微信分享
if (isMiniProgramWebView()) {
console.log('📱 小程序环境，跳过微信分享设置');
return;
}
// 在微信浏览器中执行
if (isWechatBrowser()) {
const shareData = getShareData(data);
// 确保 SDK 已加载
ensureWechatSDK().then(() => {
// @ts-ignore
const wx = window.jWeixin || window.wx;
if (!wx) {
console.error('❌ 微信 SDK 不可用');
return;
}
wx.ready(() => {
wx.updateAppMessageShareData({
title: shareData.title,
desc: shareData.desc,
link: shareData.link,
imgUrl: shareData.imgUrl,
success: () => console.log('✅ 好友分享设置成功'),
fail: (err: any) => console.error('❌ 好友分享设置失败', err)
});
wx.updateTimelineShareData({
title: shareData.title,
link: shareData.link,
imgUrl: shareData.imgUrl,
success: () => console.log('✅ 朋友圈分享设置成功'),
fail: (err: any) => console.error('❌ 朋友圈分享设置失败', err)
});
wx.onMenuShareAppMessage({
title: shareData.title,
desc: shareData.desc,
link: shareData.link,
imgUrl: shareData.imgUrl,
success: () => console.log('✅ 旧版分享设置成功')
});
});
}).catch(err => {
console.error('❌ SDK 加载失败，无法设置分享', err);
});
} else {
console.log('🌐 非微信环境，跳过微信分享设置');
}
}
// ===== hshare 主入口 =====
export function hshare(data: any, url: string) {
console.log('📤 hshare 被调用', data, url);
// 如果在非微信浏览器中，提示用户复制链接
if (!isWechatBrowser() || isMiniProgramWebView()) {
const shareData = getShareData(data);
// 降级方案：复制链接
fallbackShare(shareData);
return;
}
// 微信浏览器中执行分享
initJssdkShare(() => {
setWechatShare(data);
}, url);
}
// ===== 降级方案 =====
function fallbackShare(data: any) {
console.log('📋 降级方案：复制链接', data.link);
try { try {
// 注意：此接口需要特定权限，普通公众号可能无法使用 // @ts-ignore
jWeixin.invoke('shareWechatMessage', { if (typeof uni !== 'undefined' && uni.setClipboardData) {
title: data.title, // @ts-ignore
desc: data.desc, uni.setClipboardData({
link: data.link, data: data.link,
imgUrl: data.imgUrl success: () => {
}, function(res) { // @ts-ignore
if(res.err_msg === 'shareWechatMessage:ok') { uni.showToast({
console.log('分享成功'); title: '链接已复制，请分享给好友',
icon: 'none'
});
}
});
} else if (navigator.clipboard) {
navigator.clipboard.writeText(data.link).then(() => {
alert('链接已复制，请分享给好友');
}).catch(() => {
alert('请复制链接: ' + data.link);
});
} else { } else {
// fallback 到常规分享设置 alert('请复制链接: ' + data.link);
setWechatShare(data);
} }
});
} catch (e) { } catch (e) {
console.error('直接调起分享失败，使用常规分享', e); alert('请复制链接: ' + data.link);
// 常规分享设置
jWeixin.updateAppMessageShareData({
title: data.title,
desc: data.desc,
link: data.link,
imgUrl: data.imgUrl,
success: () => console.log('好友分享设置成功')
});
} }
}); }
// ===== 兼容旧方法 =====
export function setWechatShareDirectly(data: any) {
hshare(data, window.location.href);
} }
\ 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