如何使用Cordova开发适配iOS、Android的WebXR-AR应用？XR不支持如何解决？

开发者阿泽

2026-10-5

问题成因

Cordova加载的原生WebView（安卓WebView、iOS WKWebView）默认不内置WebXR支持，依赖cordova-webxr-plugin注入适配层对接原生AR能力，插件未正确加载或配置时，navigator.xr属性不存在，检测逻辑直接进入不支持分支
代码执行时机错误：XR检测逻辑在Cordovadeviceready事件触发前执行，此时插件尚未完成注入，无法读取到xr属性
原生端配置缺失：未开通ARCore（安卓）/ARKit（iOS）权限、系统版本不满足最低要求、未配置相机/传感器权限，导致即使插件加载完成，也无法返回AR会话支持状态
所用cordova-webxr-plugin版本存在适配bug，未完成原生能力与Web侧的对接

解决建议

调整XR检测代码的执行时机，必须等Cordova插件加载完成后再运行，调整后代码示例：

document.addEventListener('deviceready', () => {
    if ('xr' in navigator) {
        navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
            if (supported) {
                const collection = document.getElementsByClassName("ar-button");
                [...collection].forEach(el => {
                    el.style.display = 'block';
                });
            }
        }).catch(err => {
            // 可在此处打印报错排查权限、插件调用问题
            console.log('XR检测异常：', err)
        });
    } else {
        alert("not supported");
    }
}, false);

补全两端原生配置：

安卓端：确保minSdkVersion >=24，在config.xml中添加<preference name="WebXREnableARCore" value="true" />，在AndroidManifest.xml中声明相机权限、ARCore依赖
iOS端：确保minOSVersion >=15.0，在config.xml中添加<preference name="WebXREnableARKit" value="true" />，在Info.plist中添加相机使用权限、运动传感器使用权限的描述字段

插件适配优化：如果当前使用的cordova-webxr-plugin版本无响应，可更换维护状态更稳定的fork版本，或直接采用原生AR插件组合（安卓端用cordova-plugin-arcore、iOS端用cordova-plugin-arkit）替代WebXR方案，原生适配性更强
调试排查：使用Chrome远程调试安卓WebView、Safari远程调试iOS WKWebView，查看控制台报错信息，确认navigator.xr是否被正常注入，调用检测接口时是否存在权限拒绝类报错

内容的提问来源于stack exchange，提问作者Buke