实现的效果图

用户在打开小程序时，映入眼帘的第一感觉对用户使用者来说很重要，美观的启动页可以为你的小程序加分，好看的启动页能给用户留下美好的记忆印象

实现代码

.js

代码如下：

Page({/** 页面的初始数据 */data: {bg_img: 'start_bg.png',//背景图地址，可相对/绝对，可本地/远程count: 4,//倒计时秒数show_button:false,//初始不显示跳过按钮},//初始化进入程序onLoad() {this.countDown();this.show_button();},//延迟一秒显示跳转按钮show_button() {let that = thissetTimeout(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)},
})

.json

代码如下：

{"navigationStyle": "custom"
}

.wxml

代码如下：

<view wx:if="{{show_button}}" class="count_botton fade_in" bindtap="switchTab">跳过{{count}}s</view>
<image class="bg_img" src="{{bg_img}}"></image>

.wxss

代码如下：

page {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: 100%;height: 100%;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: 3s; /*动画持续时间*/animation-iteration-count: 1; /*动画次数*/animation-delay: 0s; /*延迟时间*/
}/*定义动画，名称为fadeIn*/@keyframes fadeIn {0% {opacity: 0; /*初始状态 透明度为0*/}50% {opacity: 0.6; /*中间状态 透明度为0.6*/}100% {opacity: 1; /*结尾状态 透明度为1*/}
}

写在最后

最后：感谢原作者 @橡皮糖

本文转载自博客: 橡皮糖.

完整源代码下载请: 点击这里.

微信小程序启动页完整模板相关推荐

微信小程序启动页的实现
加班偷着懒没做一堆九月份迭代的工作,实现了一下小程序的启动页.效果是这样的: 关注公众号查看效果 app.json 将启动页路径放在pages数组的第一项,tabBar中list正常放置. start ...
分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
python写微信小程序源码示例_python实现微信小程序用户登录、模板推送
python实现微信小程序用户登录.模板推送来源:中文源码网浏览: 次日期:2019年11月5日 [下载文档: python实现微信小程序用户登录.模板推送.txt ] (友情提示 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序官网DEMO模板
简介: 微信小程序官方原版DEMO模板,小程序开发参考必备人手一份,分享给大家. 网盘下载地址: http://kekewangLuo.cc/xtsm1j0hn5X0 图片:
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序云开发完整案例
微信小程序云开发完整案例本项目获高校微信小程序开发大赛华中赛区三等奖 [注]: 本人对该程序功能.UI等方面比较满意,分析总结了比赛成绩不算太好的原因,下一篇博客具体分享,给想参加该比赛的同学一些参 ...
微信小程序大转盘完整代码
微信小程序大转盘完整代码效果图 wxml片段  <view class="container"><image sr ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...

微信小程序启动页完整模板

我是坚韧的目录

实现的效果图

实现代码

.js

.json

.wxml

.wxss

写在最后

微信小程序启动页完整模板相关推荐

最新文章

热门文章