- 在 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://www.toymoban.com/news/detail-694742.html
文章来源：https://www.toymoban.com/news/detail-694742.html
到了这里，关于微信小程序实现开屏启动页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
