开始前，请先完成自定义底部导航的开发，详见
【微信小程序-原生开发】实用教程03-自定义底部导航（含自定义tabBar导航高亮需点击两次的解决方案）
https://blog.csdn.net/weixin_41192489/article/details/128707606
需求描述
手机上的app启动时，通常会先展示一个倒计时 3 秒的广告页（更良心一点的，可能是启动页，或欢迎页）
代码实现
app.json
新增欢迎页路径，并放在第一行（小程序启动后，默认展示第一个路径）
"pages/welcome/index",
保存后，pages 文件夹会自动生成对应的 welcome 页的四个文件
pages\welcome\index.wxml
<view class="topBox"> <view class="jumpBox"> <view class="time">{{time}}</view> <view bind:tap="gotoIndex">跳过</view> </view> </view> <view class="slogan slogan_left"> 诚挚缘分 </view> <view class="slogan slogan_right"> 成就梦想 </view>
标签 view
功能同 html 中的 div，就是一个默认撑满整行的盒子。
{{ }}
与 vue 的语法相同，用于在页面上渲染变量
bind:tap
- bind: 为绑定
- tap 为移动端的点击事件
所以 bind:tap 的含义即绑定点击事件，同 vue 的 @click
( gotoIndex 是 js 中定义的事件函数，详见下文 js 中的代码 )
pages\welcome\index.wxss
/* pages/welcome/index.wxss */ .topBox { display: flex; justify-content: flex-end; padding-top: 20rpx; padding-right: 20rpx; } .jumpBox { color: white; background: rgba(182, 179, 179, 0.911); display: flex; align-items: center; border-radius: 30rpx; padding: 10rpx 20rpx; } .time{ padding-right: 10rpx; } .slogan { font-size: 80rpx; font-weight: bold; color: #027CBE; line-height: 2; } .slogan_left { padding-left: 60rpx; } .slogan_right { text-align: right; padding-right: 60rpx; }
wxss 的语法和css基本相同，只是将单位px改为 rpx，因其能自适应不同宽度和设备像素比的移动端设备。
pages\welcome\index.js
// 定义定时器 timer let timer = null Page({ data: { // 页面读秒 time: 3, }, // 事件函数--跳转到首页 gotoIndex: function () { // 清除定时器 clearInterval(timer) // 跳转到首页 - 关闭所有页面后，打开指定页面 wx.reLaunch({ url: '/pages/index/index' }) }, // 生命周期--页面渲染完成时执行 onReady() { // 开始倒计时 timer= setInterval(() => { // 每过 1 秒，倒计时减一 this.setData({ time: this.data.time - 1 }) // 当倒计时为0时，跳转到首页 if(this.data.time===0){ this.gotoIndex() } }, 1000) }, })
定义变量
data: { time: 3, },
与 vue 不同，无需 return。
读取变量
this.data.time
与 vue 不同，this 代表的当前页面实例，需从 data 属性中读取变量
修改变量的值
this.setData({ time: this.data.time - 1 })
定义函数
gotoIndex: function () { },
通常用于绑定事件，当然，也可以用于封装特定的业务逻辑。
类似 vue 中 methods 里写的方法，留心写法的差异！
调用函数
this.gotoIndex()
与 vue 相同
页面跳转 wx.reLaunch
会先关闭所有页面后，再打开指定页面
wx.reLaunch({ url: '/pages/index/index' })
- url 的值需和 app.json中定义的页面路径对应，注意
pages前有/
生命周期 onReady
小程序的页面渲染和 vue 一样，也有完整的生命周期
onReady 与 vue 的 mounted 对应，即在页面渲染完成后执行。
