微信内引导用户使用"在浏览器打开"开发参考
准备工作
准备App Linking链接
参考文档：developer.huawei.com/consumer/cn...
准备H5落地页
H5页面主要逻辑：
1、应用已安装时，通过"在浏览器打开"，拉起应用详情页；
2、应用未安装时，通过"在浏览器打开"，跳转系统浏览器，在浏览器中拉起应用市场下载页；
参考代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 或者其他指定高度 */
}
.overlay {
position: fixed; /* 固定定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
display: flex;
justify-content: flex-end;
align-items: flex-start;
color: white;
z-index: 1000; /* 确保遮罩层在其他内容之上 */
}
</style>
<script>
function isHarmonyOSWeiXin() {
const isHarmonyOS = (ua) => /OpenHarmony/i.test(ua);
const isMicroMessenger = (ua) => /MicroMessenger/.test(ua);
const ua = navigator.userAgent;
const result = isHarmonyOS(ua) && isMicroMessenger(ua); // 判别为HarmonyOS设备的微信拉端
return result;
}
function isHarmonyOS() {
const isHarmonyOS = (ua) => /OpenHarmony/i.test(ua);
const ua = navigator.userAgent;
const result = isHarmonyOS(ua); // 判别为HarmonyOS设备
return result;
}
function showOverlay() {
if(isHarmonyOSWeiXin()) {
document.querySelector('.overlay').style.display = 'flex';
} else if(isHarmonyOS()) {
location.href = "https://appgallery.huawei.com/app/detail?id=xxx" // XXX改成应用的bundleName
}
}
</script>
</head>
<body onload="showOverlay()">
<div class="overlay" style="display: none;font-size:70px;">
点击右上角"..." ↗<br>
选择"在浏览器打开"
</div>
</body>
</html>页面效果：
识别鸿蒙UA和鸿蒙微信UA方法
微信内置浏览器的UA标识示例如下：
scss
Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile MicroMessenger/8.0.7.34(0xf3100722) Weixin NetType/WIFI Language/zh_CN MMWEBID/7692 MMWEBSDK/202505040007 XWEB/1140227建议鸿蒙微信UA识别OpenHarmony+MicroMessenger，参考代码如下：
ts
const isHarmonyOS = (ua) => /OpenHarmony/i.test(ua);
const isMicroMessenger = (ua) => /MicroMessenger/.test(ua);
const ua = navigator.userAgent;
const result = isHarmonyOS(ua) && isMicroMessenger(ua); // 判别HarmonyOS设备的微信拉端 建议鸿蒙UA识别OpenHarmony，参考代码如下：
const isHarmonyOS = (ua) => /OpenHarmony/i.test(ua);
const ua = navigator.userAgent;
const result = isHarmonyOS(ua); // 判别为HarmonyOS设备的拉端页面跳转逻辑开发实现
用户点击页面中"打开/下载"按钮时，根据UA判断在鸿蒙微信环境中，跳转H5落地页；
ts
const result = isHarmonyOS(ua) && isMicroMessenger(ua); // 判别为HarmonyOS设备的微信拉端
<br/>if(result) {
// 跳转到AppLinking落地页
location.href = 'https://www.example.com?param=value'; // AppLinking落地页
} else {
// 处理其他端引导逻辑
}H5落地页同样根据UA判断在鸿蒙微信环境中，引导用户点击右上角更多-"在浏览器打开"按钮；
用户点击"在浏览器打开"按钮后，如应用已安装出现应用选项，用户选择后打开应用，应用根据传入的applinking参数，跳转具体详情页；
如应用未安装出现浏览器选项，用户选择后浏览器后，浏览器加载H5页面，此页面根据UA判断在鸿蒙环境中，直接跳转应用市场下载页；
