uni-app 运行到模拟器时出现白屏,控制台提示setItem为undefined,但代码里面并没有这个函数或者变量

uni-app 运行到模拟器时出现白屏,控制台提示setItem为undefined,但代码里面并没有这个函数或者变量

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Windows

PC开发环境操作系统版本号:windows 10

HBuilderX类型:正式

HBuilderX版本号:3.2.15

手机系统:Android

手机系统版本号:Android 10

手机厂商:华为

手机机型:P30

页面类型:vue

vue版本:vue3

打包方式:离线


操作步骤:

  • 运行 - 运行到手机或模拟器

预期结果:

  • 正常打开

实际结果:

  • 白屏

bug描述:

在内置浏览器运行是没问题的, 运行在模拟器上白屏 雷电模拟器:版本号:4.0.64 报异常如下:

reportJSException >>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: Cannot read property 'setItem' of undefined

更多关于uni-app 运行到模拟器时出现白屏,控制台提示setItem为undefined,但代码里面并没有这个函数或者变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

使用HX默认基座测试下看看

更多关于uni-app 运行到模拟器时出现白屏,控制台提示setItem为undefined,但代码里面并没有这个函数或者变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的信息,这是一个典型的运行环境差异导致的兼容性问题。问题核心在于 setItemuni.setStorageSyncuni.setStorage API 在底层实现时调用的方法。在浏览器环境中,这对应 localStorage.setItem;而在 App 端,这对应原生存储接口。

问题分析:

  1. 错误根源Uncaught TypeError: Cannot read property 'setItem' of undefined 表明,在 App 运行环境中,某个预期为存储对象(如 localStorage 或原生存储对象)的变量是 undefined,导致无法调用其 setItem 方法。
  2. 环境差异:HBuilderX 的内置浏览器基于浏览器环境,而运行到 Android 模拟器或真机时,应用运行在 UniApp 的 App 运行环境(即渲染层与逻辑层分离的架构)。这两个环境对 Web API 的支持和实现方式不同。
  3. 常见触发场景
    • 直接使用了浏览器专有的 localStorage:在 vue3setup 或生命周期钩子中,如果直接使用了 window.localStorage.setItemlocalStorage.setItem,在 App 端 window.localStorage 可能不存在或行为不一致。
    • 第三方库依赖了 localStorage:项目中引入的某个第三方 JS 库可能在内部直接调用了 localStorage,而没有做环境兼容。
    • UniApp API 使用不当:虽然你提到代码中没有直接使用 setItem,但 uni.setStorageSync 等 UniApp 封装的 API 在底层实现中可能会调用相关方法。如果存储初始化失败或权限异常,也可能引发此错误。

解决方案:

  1. 全局搜索,排除直接调用: 在项目中全局搜索 setItemlocalStoragesessionStorage。确保所有数据存储操作都使用 UniApp 提供的 跨端 API,即 uni.setStorageSyncuni.getStorageSyncuni.setStorageuni.getStorage绝对不要直接使用 window.localStoragelocalStorage

  2. 检查第三方库: 检查 package.json 中的依赖,特别是近期新增的库。尝试注释掉可疑库的引入,或查找其源码是否直接使用了 localStorage。对于有问题的库,可以寻找替代库,或通过条件编译(#ifdef H5#ifndef H5)来区分使用。

  3. 检查应用初始化逻辑: 检查 App.vueonLaunch 生命周期,以及项目根目录的 main.jsapp.js。确保在应用启动初期没有执行依赖 localStorage 的同步操作。将可疑的初始化代码用 try-catch 包裹,或移至异步逻辑中。

  4. 检查 Vue 3 响应式数据初始化: 在 Vue 3 的 setup() 中,如果直接从 localStorage 同步读取数据并用于响应式状态(如 refreactive)的初始化,在 App 端会失败。应改用 uni.getStorageSync,并做好异常处理。

    // 错误示例
    import { ref } from 'vue';
    const userData = ref(localStorage.getItem('user') || {});
    
    // 正确示例
    import { ref } from 'vue';
    let initialData = {};
    try {
        initialData = uni.getStorageSync('user') || {};
    } catch (e) {}
    const userData = ref(initialData);
回到顶部