uni-app 安卓打开小程序有几率页面白屏并报错 Uncaught TypeError: Cannot read property 'setStatusBarStyle' of undefined

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

uni-app 安卓打开小程序有几率页面白屏并报错 Uncaught TypeError: Cannot read property ‘setStatusBarStyle’ of undefined

产品分类:uni小程序SDK
手机系统:Android
手机系统版本号:Android 14
手机厂商:小米
手机机型:小米11、小米14
页面类型:vue
SDK版本号:4.29、4.24

示例代码:

button1.setOnClickListener(new View.OnClickListener() {  
    @Override  
    public void onClick(View view) {  
        try {  
            // 延迟加载 Uni-App sdk, 这里是点击 button1 的时候,在打开 uni-app 前初始化 sdk  
            initUniAppSDK();  
            if (!DCUniMPSDK.getInstance().isInitialize()) {  
                Toast.makeText(mContext, "uni-app sdk 未初始化", Toast.LENGTH_SHORT).show();  
                return;  
            }  
            UniMPOpenConfiguration uniMPOpenConfiguration = new UniMPOpenConfiguration();  
            // 为了方便观察白屏现象,不设置 SplashView  
            // uniMPOpenConfiguration.splashClass = MySplashView.class;  
            uniMPOpenConfiguration.extraData.put("darkmode", "light");  
            IUniMP uniMP = DCUniMPSDK.getInstance().openUniMP(mContext,"__UNI__F743940", uniMPOpenConfiguration);  
            mUniMPCaches.put(uniMP.getAppid(), uniMP);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  
});
public void initUniAppSDK() {  
    if (DCUniMPSDK.getInstance().isInitialize()) {  
        Log.i("unimp","uni-app sdk 已初始化过,不再初始化");  
        return;  
    }  

    try {  
        WXSDKEngine.registerModule("TestModule", TestModule.class);  
        WXSDKEngine.registerComponent("myText", TestText.class);  
    } catch (Exception e) {  
        e.printStackTrace();  
    }  
    //初始化 uni小程序SDK ----start----------  
    MenuActionSheetItem item = new MenuActionSheetItem("关于", "gy");  

    MenuActionSheetItem item1 = new MenuActionSheetItem("获取当前页面url", "hqdqym");  
    MenuActionSheetItem item2 = new MenuActionSheetItem("跳转到宿主原生测试页面", "gotoTestPage");  
    List<MenuActionSheetItem> sheetItems = new ArrayList<>();  
    sheetItems.add(item);  
    sheetItems.add(item1);  
    sheetItems.add(item2);  
    Log.i("unimp","onCreate----");  
    DCSDKInitConfig config = new DCSDKInitConfig.Builder()  
            .setCapsule(false)  
            .setMenuDefFontSize("16px")  
            .setMenuDefFontColor("#ff00ff")  
            .setMenuDefFontWeight("normal")  
            .setMenuActionSheetItems(sheetItems)  
            // 改动点: 禁用在后台运行  
            .setEnableBackground(false)  
            .setUniMPFromRecents(false)  
            .build();  
    DCUniMPSDK.getInstance().initialize(this, config, new IDCUniMPPreInitCallback() {  
        @Override  
        public void onInitFinished(boolean b) {  
            Log.d("unimpaa","onInitFinished----"+b);  
        }  
    });  

    //初始化 uni小程序SDK ----end----------  
}

操作步骤:

  1. 运行附件中的代码到手机上
  2. 进入 App,进入步骤2
  3. 点击第一个按钮button1,进入小程序,看是否白屏,如果没有白屏,则进入步骤3,如果有白屏,则复现成功
  4. 退出app,进入步骤1

预期结果:

预期结果,在 uni-app sdk 初始化成功(DCUniMPSDK.getInstance().isInitialize() 为 true)之后,打开uni小程序不应该出现白屏,实际是有几率出现白屏

实际结果:

在 uni-app sdk 初始化成功(DCUniMPSDK.getInstance().isInitialize() 为 true)之后,打开 uni小程序,有几率出现白屏,此时logcat的报错信息为:

com.example.unimpdemo                E  weex_runtime_v2_v8.cpp:528, createInstanceContext and ExecuteJavaScript Error :Uncaught TypeError: Cannot read property 'setStatusBarStyle' of undefined  
                                         at restoreGlobal (uni-jsframework.js:1:193144)  
                                         at  (uni-jsframework.js:1:94074)
com.example.unimpdemo                E  reportJSException &gt;&gt;&gt;&gt; instanceId:2, exception function:createInstanceContext, exception:Uncaught TypeError: Cannot read property 'setStatusBarStyle' of undefined  
                                         at restoreGlobal (uni-jsframework.js:1:193144)  
                                         at  (uni-jsframework.js:1:94074)
com.example.unimpdemo                E  onJSException -9700,Uncaught TypeError: Cannot read property 'setStatusBarStyle' of undefined  
                                         at restoreGlobal (uni-jsframework.js:1:193144)  
                                         at  (uni-jsframework.js:1:94074)
com.example.unimpdemo                E  commitCriticalExceptionRT :WX_RENDER_ERR_JS_CREATE_INSTANCE_CONTEXTexceptionwhite screen cause create instanceContext failed,check js stack -&gt;Uncaught TypeError: Cannot read property 'setStatusBarStyle' of undefined  
                                                                                                     at restoreGlobal (uni-jsframework.js:1:193144)  
                                                                                                     at  (uni-jsframework.js:1:94074)

bug描述:

延迟初始化 uni-app sdk 的场景。即打开 uni 小程序前 才初始化 uni-app sdk。此时在打开小程序时,有一定几率页面白屏,logcat日志后续给出

附件1:白屏复现录屏

由于官方demo代码有较多aar,压缩之后体积也较大,无法上传到附件,所以我这边提供 github demo地址: https://github.com/tianma8023/UnimpDemo
此工程代码是在官方提供的demo中的基础下,作出如下改动:

  1. 将uni-app sdk的初始化时机推迟到打开 uni-app 之前
  2. 将小程序 setEnableBackground 置为 false
  3. 为方便观察白屏现象,不设置 SplashView

具体改动具体可以看 commit 的提交记录

官方demo中的uni sdk 是4.24,本人在 4.29 的 sdk 上也能复现。测试手机是 小米11 和 小米14,也均能复现。

我在另一个帖子 https://ask.dcloud.net.cn/question/162328 里面也提及到我这边的应对方案,但这只是临时方案,非长久之计。烦请官方留意此问题。


5 回复

收到,在排查


好的,麻烦了

遇到同样的问题,有解决方案不,望回复,谢谢

临时解决方案就是提早对 uni-sdk 初始化,参考 https://ask.dcloud.net.cn/question/162328

针对您提到的 uni-app 在安卓平台上打开小程序时出现页面白屏并报错 Uncaught TypeError: Cannot read property 'setStatusBarStyle' of undefined 的问题,这通常是由于尝试调用未定义或未正确初始化的对象方法时引发的。在 uni-app 中,setStatusBarStyle 方法通常用于设置状态栏样式,但如果在不支持该方法的平台上调用,或者调用时机不正确(例如在平台或页面生命周期未完全就绪时),就可能引发此类错误。

以下是一些可能的解决方案和代码示例,帮助您定位和解决问题:

  1. 检查平台条件编译: 确保 setStatusBarStyle 的调用被包裹在正确的平台条件编译中。例如,如果您只在微信小程序中使用该方法,应使用条件编译来避免在安卓原生应用中调用它。

    #ifdef MP-WEIXIN
    uni.setStatusBarStyle('dark'); // 仅微信小程序有效
    #endif
    
  2. 延迟调用: 如果错误发生在页面加载初期,可能是因为相关API或组件尚未准备好。尝试在页面的 onLoadonReady 生命周期钩子中调用 setStatusBarStyle

    Page({
      onLoad() {
        setTimeout(() => {
          #ifdef MP-WEIXIN
          uni.setStatusBarStyle('dark');
          #endif
        }, 500); // 延迟调用,确保页面已加载
      }
    });
    
  3. 全局配置: 如果需要在整个应用中使用统一的状态栏样式,可以考虑在 pages.jsonmanifest.json 中进行全局配置,而不是在每个页面中单独设置。

    // pages.json 或 manifest.json 中设置(具体路径根据uni-app版本可能有所不同)
    {
      "mp-weixin": {
        "app-plus": {
          "statusBarStyle": "dark"
        }
      }
    }
    
  4. 错误处理: 添加错误处理逻辑,以避免因调用未定义方法而导致整个应用崩溃。

    try {
      #ifdef MP-WEIXIN
      uni.setStatusBarStyle('dark');
      #endif
    } catch (error) {
      console.error('Failed to set status bar style:', error);
    }
    

通过上述方法,您可以尝试解决 Uncaught TypeError: Cannot read property 'setStatusBarStyle' of undefined 的问题。如果问题依旧存在,建议检查 uni-app 和相关依赖库的版本是否最新,或者查看是否有其他开发者遇到并解决了类似的问题。

回到顶部