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

  1. 在 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"
      }
    ]
  }
}
  1. 创建启动页面的代码文件
    在start.js页面的 onLoad 生命周期中,使用 setTimeout 函数延迟 3 秒后跳转到小程序的首页。
    start.js 文件内容:
Page({
  onLoad: function () {
    setTimeout(function () {
      wx.switchTab({
        url: "/pages/index/index"
      })
    }, 3000)
  }
})
  1. start.wxml 文件内容:
<view class="container">
  <image class="logo" src="/images/logo.png"></image>
  <text class="text">小程序启动中,请稍候...</text>
</view>

  1. 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;
}

  1. 在 app.js 文件中注册启动页面
    在 app.js 文件中使用 onLaunch 生命周期中调用 wx.redirectTo 函数跳转到启动页面。
    app.js 文件内容
App({
  onLaunch: function () {
    wx.redirectTo({
      url: "/start/start"
    })
  }
})

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

原文地址:https://blog.csdn.net/weixin_46504346/article/details/131471317

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇2023年09月18日 03:09
下一篇 2023年09月18日 03:13