131 lines
4.2 KiB
JavaScript
131 lines
4.2 KiB
JavaScript
import { ref, onMounted } from "vue";
|
||
import "@/assets/uni-webview"
|
||
|
||
export function useWebView() {
|
||
const platform = ref("");
|
||
const token = ref("");
|
||
// 检测环境并通知父窗口加载完毕
|
||
const handleBridgeReady = () => {
|
||
if (platform.value) {
|
||
h5PostMessage("loaded", true);
|
||
}
|
||
};
|
||
|
||
|
||
// 获取 Token（从 URL 中解析）
|
||
const getTokenFromUrl = () => {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const tokenFromUrl = urlParams.get("token");
|
||
token.value = tokenFromUrl || ""; // 如果 URL 没有 token，返回空字符串
|
||
if (token.value) {
|
||
localStorage.setItem("token", token.value);
|
||
}
|
||
return tokenFromUrl;
|
||
};
|
||
|
||
// 封装 postMessage 方法
|
||
const postMessage = (data) => {
|
||
if (platform.value === "h5") {
|
||
h5PostMessage("postMessage", data);
|
||
} else if (uni && uni.webView.postMessage) {
|
||
uni.webView.postMessage(data);
|
||
} else {
|
||
console.error("uni.webView.postMessage is not available.");
|
||
}
|
||
};
|
||
|
||
const redirectTo = (data) => {
|
||
if (platform.value === "h5") {
|
||
h5PostMessage("redirectTo", data)
|
||
} else if (uni && uni.webView.redirectTo) {
|
||
// 非 H5 环境，调用 uni.webView.redirectTo
|
||
uni.webView.redirectTo(data);
|
||
} else {
|
||
console.error("uni.webView.redirectTo is not available.");
|
||
}
|
||
};
|
||
|
||
// 封装 navigateBack 方法
|
||
const navigateBack = (data) => {
|
||
if (platform.value === "h5") {
|
||
window.top.history.back();
|
||
// h5PostMessage("navigateBack", data)
|
||
} else if (uni && uni.webView.navigateBack) {
|
||
// 非 H5 环境，调用 uni.webView.navigateBack
|
||
uni.webView.navigateBack(data);
|
||
} else {
|
||
console.error("uni.webView.navigateBack is not available.");
|
||
}
|
||
};
|
||
|
||
// 封装 navigateTo 方法
|
||
const navigateTo = (data) => {
|
||
if (platform.value === "h5") {
|
||
// h5PostMessage("navigateTo", data)
|
||
window.top.location.href = "/app" + data.url
|
||
} else if (uni && uni.webView.navigateTo) {
|
||
uni.webView.navigateTo(data);
|
||
} else {
|
||
console.error("uni.webView.navigateTo is not available.");
|
||
}
|
||
};
|
||
const payment = (data) => {
|
||
if (platform.value === "h5") {
|
||
h5PostMessage("payment", data)
|
||
} else if (uni && uni.webView.navigateTo) {
|
||
// 非 H5 环境，调用 uni.webView.navigateTo
|
||
uni.webView.navigateTo(data);
|
||
} else {
|
||
console.error("uni.webView.navigateTo is not available.");
|
||
}
|
||
}
|
||
const getEnv = () => {
|
||
return new Promise((resolve, reject) => {
|
||
let env = localStorage.getItem(platform)
|
||
if (env) {
|
||
platform.value = env
|
||
resolve(env);
|
||
} else {
|
||
uni.webView.getEnv((env) => {
|
||
// 遍历 env 对象，找到值为 true 的键
|
||
const platformKey = Object.keys(env).find(key => env[key] === true);
|
||
platform.value = platformKey;
|
||
if (platformKey) {
|
||
resolve(platformKey); // 返回键名（如 'h5', 'mp-weixin' 等）
|
||
} else {
|
||
reject('未知平台');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const envValue = await getEnv();
|
||
console.log("当前环境", envValue)
|
||
// 将返回的键名（如 'h5', 'mp-weixin'）存储到 platform
|
||
handleBridgeReady();
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
// 获取 Token
|
||
getTokenFromUrl();
|
||
});
|
||
|
||
return {
|
||
platform,
|
||
token,
|
||
getEnv,
|
||
redirectTo,
|
||
postMessage,
|
||
navigateTo,
|
||
navigateBack,
|
||
payment
|
||
};
|
||
}
|
||
const h5PostMessage = (action, data) => {
|
||
window.parent.postMessage({ action, data, messageId: generateUniqueId(action) }, "*");
|
||
}
|
||
const generateUniqueId = (action) => `msg_${action}_${new Date().getTime()}`;
|