微信小程序本身是没有开屏的,所以我们通过我们自己的逻辑制作一个自己的开屏,需求就是,当用户打开小程序的时候我们会先显示一个开屏,然后开屏自动关闭。如果进入的不是首页那么我们的开屏就不展示。并且还要使用各种手机的屏幕。
我们的开屏其实是显示的一张大图片,我们让宽度等于屏幕的宽度,高度通过图片的宽高比计算出来,在图片外面加一个view,这个view的背景色和图片的背景色一样这样就可以适应不同的屏幕了。
首先我们先来写下样式
<!-- 开屏 -->
<view wx:if='{{kaiping}}' style=' position: fixed;top: 0;left: 0;display: flex;flex-direction: row;justify-content: center;align-items: center;width: 100%;height: 100vh;z-index: 99999999;background:#a00b0a;'>
<view style='position: fixed;'>
<image src="../../kaiping.png" style='width:{{width}}px;height:{{width*1.51}}px' />
</view>
</view>
然后在我们的js里面写下逻辑:
在data里面设置:kaiping: false
在onload里面把kaiping: true
that.setData({
kaiping: true
})
在onshow里面写一个定时器关闭开屏
if (that.data.kaiping) {
setTimeout(function() {
that.setData({
kaiping: false
})
}, 4000);
}