首先我们要在app.js里面插入一个路径:
然后根据路径“ "pages/start/start", ”添加相关的文件夹
然后在“ start ”里面添加微信小程序专属的四个文件
**.js **.json **.wxml **.wxss
start.js
/** 页面的初始数据 */
data: {
bg_img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0ce61fd5-5fa5-4cc4-a011-21b7d6d14dc5/9715d6d1-c5ce-4b1f-989d-5c340d49fbd9.jpg',//背景图地址,可相对/绝对,可本地/远程
count: 4,//倒计时秒数
show_button:false,//初始不显示跳过按钮
},
//初始化进入程序
onLoad() {
this.countDown();
this.show_button();
},
//延迟一秒显示跳转按钮
show_button() {
let that = this
setTimeout(function() {
that.setData({
show_button: true
})
}, 1000)
},
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
switchTab() {
clearInterval(this.data.time); //清除倒计时
wx.switchTab({
url: '/pages/index/index'
})
},
//倒计时计数
countDown: function() {
let that = this;
let count = that.data.count;
that.data.time = setInterval(function() {
if (count > 0) {
count--
that.setData({
count: count
})
} else {
that.setData({
count: count
})
that.switchTab();
clearInterval(that.data.time)
}
}, 1000)
},
})
start.json
"navigationStyle": "custom"
}
start.wxml
<image class="bg_img" src="{{bg_img}}"></image>
start.wxss
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
flex-direction: column-reverse;
align-items: center;
box-sizing: border-box;
}
.bg_img {
z-index: -1;
width: 760rpx;
height: 1280rpx;
border-radius: 20px;
position: fixed;
left: 0;
top: 0;
}
.count_botton {
position: relative;
margin-bottom: 6vh;
width: 300rpx;
height: 100rpx;
/*渐变色网站https://webgradients.com*/
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
color: #fff;
font-weight: bold;
font-size: 32rpx;
letter-spacing: 4rpx;
border-radius: 50rpx;
/*flex布局、横向纵向居中*/
display: flex;
justify-content: center;
align-items: center;
}
/*在ID或类中增加如下的动画代码*/
.fade_in {
animation-name: fadeIn; /*动画名称*/
animation-duration: 5s; /*动画持续时间*/
animation-iteration-count: 1; /*动画次数*/
animation-delay: 0s; /*延迟时间*/
}
/*定义动画,名称为fadeIn*/
@keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0.6; /*中间状态 透明度为0.6*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
PS:昨天我因为少打了一个","号,堂堂一个2000人群的管理,居然被群友骂我沙雕。555555,找个机会把他们都封了!!!