uni-app 小程序完全白屏

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

uni-app 小程序完全白屏

示例代码：

java.lang.ClassNotFoundException: io.dcloud.common.util.net.http.LocalServer2
2024-09-29 17:09:34.558 22284-22284 System.err              com.hx.testmp2                       W      at java.lang.Class.classForName(Native Method)
2024-09-29 17:09:34.558 22284-22284 System.err              com.hx.testmp2                       W      at java.lang.Class.forName(Class.java:536)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at java.lang.Class.forName(Class.java:467)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at io.dcloud.common.ui.b.c(Unknown Source:1)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at io.dcloud.b.onCreate(Unknown Source:8)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at io.dcloud.WebAppActivity.onCreate(Unknown Source:22)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at io.dcloud.feature.sdk.DCUniMPActivity.onCreate(Unknown Source:49)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at android.app.Activity.performCreate(Activity.java:8523)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at android.app.Activity.performCreate(Activity.java:8487)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1417)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3786)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3951)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:101)
2024-09-29 17:09:34.559 22284-22284 System.err              com.hx.testmp2                       W      at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
2024-09-29 17:09:34.560 22284-22284 System.err              com.hx.testmp2                       W      at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
2024-09-29 17:09:34.560 22284-22284 System.err              com.hx.testmp2                       W      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2405)
2024-09-29 17:09:34.560 22284-22284 System.err              com.hx.testmp2                       W      at android.os.Handler.dispatchMessage(Handler.java:106)
2024-09-29 17:09:34.560 22284-22284 System.err              com.hx.testmp2                       W      at android.os.Looper.loopOnce(Looper.java:210)
2024-09-29 17:09:34.560 22284-22284 System.err              com.hx.testmp2                       W      at android.os.Looper.loop(Looper.java:299)

操作步骤：

  • 每次都会

预期结果：

  • 出现正常的小程序页面

实际结果：

  • 完全空白

bug描述：

  • 我按照教程接入小程序sdk ，小程序打开完全白屏，用你们的demo 是可以打开这个小程序的

Harmonyos Next教程
1 回复

针对uni-app小程序出现完全白屏的问题，这通常意味着小程序的页面没有正确渲染或者加载过程中出现了错误。以下是一些可能的代码案例和排查方法，帮助你定位和解决该问题。

1. 检查App.vue

首先，确保App.vue中的基本配置正确。App.vue是uni-app小程序的入口文件，其中的onLaunch方法是应用启动时首先执行的函数。

<script>
export default {
  onLaunch() {
    console.log('App Launch');
    // 可以在这里做一些初始化操作，比如检查用户登录状态等
  },
  onShow() {
    console.log('App Show');
  },
  onHide() {
    console.log('App Hide');
  }
}
</script>

确保没有在这里抛出异常，导致应用启动失败。

2. 检查页面文件

接着，检查引起白屏的具体页面文件。确保页面的.vue文件中的data、methods等没有语法错误，并且生命周期函数（如onLoad、onReady等）中没有抛出异常。

<template>
  <view>
    <text>{{message}}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  onLoad() {
    // 确保这里的代码不会抛出异常
    console.log('Page Loaded');
  }
}
</script>

3. 检查main.js

main.js是uni-app的入口JavaScript文件，确保其中没有错误。

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

4. 使用try-catch捕获异常

在关键的生命周期函数中使用try-catch语句来捕获并打印异常，这有助于定位问题。

onLoad() {
  try {
    // 你的代码
  } catch (error) {
    console.error('onLoad error:', error);
  }
}

5. 检查控制台和网络请求

使用开发者工具的控制台查看是否有错误信息，同时检查网络请求是否都成功返回，是否有资源加载失败。

6. 清理缓存和重启

有时候，简单的清理开发者工具的缓存和重启开发者工具可以解决一些莫名其妙的问题。

通过上述步骤，你应该能够定位并解决uni-app小程序出现完全白屏的问题。如果问题依然存在，可能需要更详细的日志信息来进一步分析。

回到顶部