在 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 文件内容：
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"
})
}
})
这样就可以实现微信小程序的开屏启动页面，可以根据实际需求进行修改和优化。