c语言编程笔录

首页 >   > 笔记大全

笔记大全

uniapp启动页如何真机没有

更新时间：2023-09-17
在uniapp开发中，启动页是APP打开后的第一个界面，主要是为了提升用户体验，增加APP的专业感。有时我们需要自定义启动页，但是在真机上可能出现启动页显示不出来的情况，本文将介绍几种通用的解决方法。 一、检查manifest.json文件 首先，我们需要检查manifest.json文件，确保以下代码段存在并配置正确： ``` "app": { ... "launch_path": "pages/index/index.html", "subPackages": [ { "root": "pages/welcome/", "pages": [ { "path": "index", "style": { "navigationBarTitleText": "欢迎页" } } ] } ] }, ``` 其中，“launch_path”表示默认的启动页面路径，“subPackages”表示分包设置，确保“root”下的路径和“path”后面的对应正确。 二、清除缓存 出现启动页不显示的情况很可能是因为缓存造成的，这时我们可以尝试清除缓存。具体操作可按如下代码示例：

清除缓存代码示例：

// 清空缓存
uni.clearStorage();
// 将uni-app中的manifest.json更新至本地缓存
uni.request({
  url: '__UNI__/' + manifest,
  success: res => {
    // console.log(res.data);
  }
});
三、增加延迟 有时启动页没能在规定时间内加载出来，需要增加启动页的展示时间。我们可以在“manifest.json”中增加“splashscreen”配置：

“splashscreen”配置代码示例：

{
  ...
  "app-plus": {
    "useSplashscreen": true,
    "splashscreen": {
      "md5": "图片的md5值",
      "backgroundColor": "#FFFFFF",
      "url": "/static/splash.png",
      "width": "750",
      "height": "1334",
      "text": "",
      "textColor": "#000000",
      "textSize": "11",
      "textFont": "ok"
    }
  }
}
我们可以在“text”字段中增加文字提示信息，同时在“textSize”中调整字体大小。但如果无法显示，我们可以增加展示时间，比如将配置改为： 
{
  ...
  "app-plus": {
    "useSplashscreen": true,
    "splashscreen": {
      "md5": "图片的md5值",
      "backgroundColor": "#FFFFFF",
      "url": "/static/splash.png",
      "width": "750",
      "height": "1334",
      "text": "",
      "textColor": "#000000",
      "textSize": "11",
      "textFont": "ok",
      "delay": 3000
    }
  }
}
其中，“delay”是增加的延迟时间，单位为毫秒。 四、使用uni.createSplashScreen方法 如果以上方法仍无法解决问题，我们可以尝试使用uni.createSplashScreen方法来创建启动页。这种方法有利于控制启动页的展示内容和时长，同时也容易控制启动页的表现。

使用uni.createSplashScreen方法代码示例：

// 启动页隐藏的时长，单位为毫秒
const SPLASHSCREEN_DELAY = 3000;
// 创建启动屏窗口
const splash = uni.createSplashScreen({
  image: '/static/splash.png',
  backgroundColor: '#f7f7f7',
  duration: SPLASHSCREEN_DELAY,
  // splashcreen消失回调，利用回调函数来启动app主窗口
  onHide: () => {
    startMainPage();
  }
});

// 启动应用主窗口
function startMainPage() {
  uni.navigateTo({
    url: '/pages/main/index'
  });
}
在上述代码示例中，我们使用“uni.createSplashScreen”方法来创建了一个启动屏窗口，并设置了两个参数：图片路径和延迟时间。同时，在“onHide”回调中，我们调用“startMainPage”函数，实现在启动页消失后打开应用主窗体。 综上所述，阐述了在uniapp开发中解决真机启动页不显示的几种方案。在实际的开发中，应根据实际情况进行选择和组合使用，以保证启动页正常显示、流畅展现，并且增加用户体验。

图文推荐