微信小程序实现开屏启动页面

在 app.json 文件中配置启动页面:
在 window 节点下面，使用 backgroundImage 属性指定开屏启动页面的背景图片。可以通过 backgroundSize 属性设置图片的显示方式。

{
  "pages": [
    "pages/index/index",
    "pages/login/login"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "backgroundColor": "#F7F7F7",
    "backgroundImage": "/images/startup.png",
    "backgroundSize": "cover"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#5677FC",
    "borderStyle": "white",
    "backgroundColor": "#FDFDFD",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/tabbar/home.png",
        "selectedIconPath": "/images/tabbar/home_select.png"
      },
      {
        "pagePath": "pages/login/login",
        "text": "登录",
        "iconPath": "/images/tabbar/login.png",
        "selectedIconPath": "/images/tabbar/login_select.png"
      }
    ]
  }
}

创建启动页面的代码文件
在start.js页面的 onLoad 生命周期中，使用 setTimeout 函数延迟 3 秒后跳转到小程序的首页。
start.js 文件内容：

Page({
  onLoad: function () {
    setTimeout(function () {
      wx.switchTab({
        url: "/pages/index/index"
      })
    }, 3000)
  }
})

start.wxml 文件内容：

<view class="container">
  <image class="logo" src="/images/logo.png"></image>
  <text class="text">小程序启动中，请稍候...</text>
</view>

start.wxss 文件内容：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.logo {
  width: 200rpx;
  height: 200rpx;
}

.text {
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}

在 app.js 文件中注册启动页面
在 app.js 文件中使用 onLaunch 生命周期中调用 wx.redirectTo 函数跳转到启动页面。
app.js 文件内容

App({
  onLaunch: function () {
    wx.redirectTo({
      url: "/start/start"
    })
  }
})

这样就可以实现微信小程序的开屏启动页面，可以根据实际需求进行修改和优化。文章来源地址https://uudwc.com/A/AA6OO