华为机型:鸿蒙OS ;
小米机型:澎湃OS;
使用 wx-open-launch-app 都会 报 error , e.detail : launch:fail;
其他 普通Android机型 以及 IOS机型 均可以正常 唤起app ,不报错,流程正常;
提供的案例日志:(手机微信上传日志: 我->设置->帮助与反馈右上角上报日志的入口,微信号以及时间点)
微信号为:nlddjqcl
时间点为:2024年08月20日 15:48 左右,
目前的问题还是 华为机型 鸿蒙的系统 会报 launch:fail;
其他的iPhone 小米 vivo OPPO 都没问题;
-------------
Web报错log:
初始化函数:
const initWechatJsSDK = async () => {
// 微信开放标签 逻辑
// lcsc/wxChat/getWXConfig
// 获取JS-SDK标签 配置信息
const res = await Network.call('lcsc/wxChat/getWXConfig', { url: location.href });
const { wxConfig } = res.cxlb[0];
// 设置微信JS-SDK的配置信息
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: wxConfig.appId, // 必填,公众号的唯一标识
timestamp: wxConfig.timestamp, // 必填,生成签名的时间戳
nonceStr: wxConfig.nonceStr, // 必填,生成签名的随机串
signature: wxConfig.signature, // 必填,签名
jsApiList: wxConfig.jsApiList, // 必填,需要使用的JS接口列表
openTagList: wxConfig.openTagList, // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
// 配置完成后调用微信Js-SDK的ready函数
wx.ready(() => {
// 在ready函数中可以调用微信Js-SDK的其他接口
console.log('初始化完成, wx config success');
// 注入成功之后 才会显示 拉起app 按钮 (wx-open-launch-app)
launchAppActions.ready();
wx.checkJsApi({
jsApiList: wxConfig.jsApiList, // 需要检测的JS接口列表,所有JS接口列表见附录2
success: (res) => {
console.log('[ checkJsApi ] >', res);
},
fail: (res) => {
console.log('检查Api', res);
},
});
wx.hideMenuItems({
menuList: [
'menuItem:share:appMessage',
'menuItem:share:timeline',
'menuItem:share:qq',
'menuItem:share:weiboApp',
'menuItem:favorite',
'menuItem:share:facebook',
'menuItem:share:QZone',
],
});
// 监听返回事件 关闭微信窗口
pushHistory();
window.addEventListener("popstate", () => {
wx.closeWindow();
}, false);
try {
window.tbs_bridge.nativeExec('network', 'type', 0, null);
} catch (e) {
console.error(e);
}
// window.addEventListener('beforeunload', () => {
// // 处理页面即将离开的逻辑,可以在这里执行你的返回操作
// wx.closeWindow();
// console.log('用户即将离开页面');
// });
});
// 在配置出错的情况下调用错误处理函数
wx.error((err) => {
console.error(err);
});
document.addEventListener('WeixinOpenTagsError', (e) => {
console.error('无法使用开放标签的错误原因', e.detail);
console.error('无法使用开放标签的错误原因', e.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开放标签,JS-SDK其他功能不受影响
});
};
封装组件为:
**
* 覆盖式 微信开放标签 样式 方法 (微信中 未注册成功 wx-open-launch-app,不会影响 外部父元素 点击; 采用 子绝父相 的方式,高度由 open-btn 默认撑开)
* 注:wx-open-launch-app 未注册成功,微信内部浏览器 将不会生成 插槽 内的 元素,相当于 wx-open-launch-app标签下 没有元素 ,无高度
* 引用组件时 需要传入父元素id(不能与项目内id重复),且给父元素 增加相对定位;
*/
// TODO extinfo 需要与APP 对接参数 两种情况:1.进入首页的 理财tab 2.新开webview 进入理财路由的 ewe/transfer
// TODO extinfo 默认不传 应该 是进入首页的 理财tab , 在组件外部判断是否 传还是不传 分享组合详情 account 参数判断
const LaunchAppWrapper = ({ _downloadApp, style, targetAppId, extinfoUrl, openBtnRealHeightBoxId}) => {
// 如果没有app 下载app方法
const downloadApp = _downloadApp || dowloadAPP;
const appId = targetAppId || TARGET_APP_ID;
const wxRef = useRef(null);
useEffect(() => {
console.log('wxRef.current', wxRef.current);
if (wxRef.current) {
const script = document.createElement('script');
script.type = `text/wxtag-template`;
// 微信标签的 内部插槽(text/wxtag-template) 的元素 不支持外部样式编写,只能在style中填写
// getDomByIdHeight(openBtnRealHeightBoxId)
script.innerHTML = `
<style>.open-btn{
width:100%;
height:${getDomByIdHeight(openBtnRealHeightBoxId)}px;
}
</style>
<div class="open-btn">
</div>
`;
wxRef.current.appendChild(script);
wxRef.current.addEventListener('launch', (e) => {
console.log('success', e.detail);
});
wxRef.current.addEventListener('error', (e) => {
const { errMsg, appId, extInfo } = e.detail;
console.log('fail', e.detail);
console.log('appId', appId);
console.log('extInfo', extInfo);
// errMsg
// "launch:fail" -> 当前场景不支持跳转,或Android上该应用未安装,或iOS上用户在弹窗上点击确认但该应⽤未安装
// "launch:fail_check fail" -> 校验App跳转权限失败,请确认是否正确绑定AppID
if (errMsg === 'launch:fail_check fail') {
Toast.show('校验App跳转权限失败,请确认是否正确绑定AppID');
return;
}
if(errMsg === 'launch:fail'){
// TODO 未下载 去下载app
downloadApp();
return
}
Toast.show(errMsg);
});
document.addEventListener('WeixinOpenTagsError', (e) => {
console.error('无法使用开放标签的错误原因', e.detail);
console.error('无法使用开放标签的错误原因', e.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开放标签,JS-SDK其他功能不受影响
});
}
return () => {
if (wxRef.current) {
wxRef.current.removeEventListener('launch', () => {});
wxRef.current.removeEventListener('error', () => {});
}
};
}, []);
return (
<div>
<wx-open-launch-app ref={wxRef} appid={appId} extinfo={extinfoUrl} style={style}></wx-open-launch-app>
</div>
);
};
LaunchAppWrapper.defaultProps = {
_downloadApp: func.downloadPrompt,
style: {
position: 'absolute',
overflow: 'hidden',
top: '0',
left: '0',
right: '0',
zIndex: 199,
opacity: 0,
},
targetAppId: '',
extinfoUrl: 'upchina://fund/main',
openBtnRealHeightBoxId: '',
};
LaunchAppWrapper.propTypes = {
_downloadApp: PropTypes.func, // 下载app方法
style: PropTypes.object, // 微信开放标签 wx-open-launch-app 的 外部样式
targetAppId: PropTypes.string, // 移动应用的 appID 不同于 服务号ID
extinfoUrl: PropTypes.string, // 跳转所需额外信息 ( 跳转的原生app 解析)
openBtnRealHeightBoxId: PropTypes.string, // 微信开放标签 外部套壳 的 父元素 id
};
export default React.memo(LaunchAppWrapper);