【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页（含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)-阿里云开发者社区

【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页（含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)

2024-07-04 24

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页（含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)

开始前，请先完成自定义底部导航的开发，详见

【微信小程序-原生开发】实用教程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 对应，即在页面渲染完成后执行。