uni-app TypeError: Cannot read property 'navigator' of undefined

发布于 1周前 作者 vueper 来自 Uni-App

uni-app TypeError: Cannot read property ‘navigator’ of undefined

操作步骤：

  • 运行 > 运行到手机 > 运行到Android App基座

预期结果：

  • 首页正常显示

实际结果：

  • 首页显示空白，编辑器控制台报错 TypeError: Cannot read property ‘navigator’ of undefined

bug描述：

  • 真机调试到安卓app报错 TypeError: Cannot read property ‘navigator’ of undefined
  • 之前都没有出现过这个问题，今天运行到手机出现这个问题

| 开发环境         | 版本号       | 项目创建方式 |
|------------------|--------------|--------------|
| Windows          | Windows 10 专业版 | HBuilderX    |
| HBuilderX        | 4.29         |              |
| 手机系统         | Android      |              |
| 手机系统版本号   | Android 13   |              |
| 手机厂商         | OPPO         |              |
| 手机机型         | Reno0 5G     |              |
| 页面类型         | vue          |              |
| vue版本          | vue2         |              |
| 打包方式         | 云端         |              |
| 项目创建方式     | HBuilderX    |              |

Harmonyos Next教程
2 回复

可以运行到h5看看


在uni-app中遇到“TypeError: Cannot read property ‘navigator’ of undefined”这类错误，通常是因为尝试访问了未定义对象的属性。在uni-app框架中，尤其是在跨平台开发时（如同时支持H5、小程序、App等平台），需要注意不同平台的环境差异。navigator对象通常是在浏览器环境中存在的，用于提供有关浏览器的信息，但在小程序或App环境中则不存在。

分析问题

假设你的代码中有类似以下的调用：

let userAgent = window.navigator.userAgent;

在H5环境中，window.navigator是有效的，但在小程序或App中，window对象本身可能就是undefined，因此访问window.navigator会引发错误。

解决方案

为了解决这个问题，你需要根据运行环境条件性地访问navigator对象。uni-app提供了一个全局对象uni，可以用来判断当前平台。

示例代码

以下是一个根据平台判断并安全访问navigator对象的示例：

// 判断当前平台
if (process.env.PLATFORM === 'h5') {
    // 仅在H5平台访问window.navigator
    let userAgent = window.navigator.userAgent;
    console.log('User Agent in H5:', userAgent);
} else {
    // 小程序或App平台，可以使用其他方式获取相关信息（如果需要）
    console.log('Current platform is not H5, navigator is not available.');
    // 例如，可以使用uni-app提供的系统信息API
    #ifdef MP-WEIXIN // 小程序特定代码
    wx.getSystemInfo({
        success: function(res) {
            console.log('System Info:', res);
        }
    });
    #endif

    #ifdef APP-PLUS // App平台特定代码
    plus.system.getInfo(function(info) {
        console.log('System Info:', info);
    });
    #endif
}

注意事项

  1. 条件编译：上面的代码中使用了#ifdef和#endif来进行条件编译，这是uni-app特有的语法，用于区分不同平台的代码。
  2. API选择：对于非H5平台，应使用对应平台提供的API来获取所需信息，如小程序的wx.getSystemInfo或App平台的plus.system.getInfo。
  3. 测试：在不同平台上测试你的应用，确保代码能够正确运行并适应不同的环境。

通过上述方法，你可以有效地避免因平台差异导致的“TypeError: Cannot read property ‘navigator’ of undefined”错误。

回到顶部