微信小程序(二)

发布时间：2022-08-19 14:22

一.实现页面导航的两种方式

1.声明式导航

(1)在页面上声明一个导航组件

(2)通过点击组件实现页面跳转

2.编程式导航

调用小程序的导航API,实现页面的跳转

3.通过声明式导航跳转

(1)tabbar页面

(2)非tabbar页面

非tabbar，open-type可以不写。

(3)传参

传:

收：

4.编程式导航跳转到tabbar页面

（1）tabbar页面

（2)非tabbar

(3)后退页面

(4)传参

5.声明式和编程式接收参数

无论声明式和编程式都可以在onload里面接收参数。

二.下拉刷新和上拉触底

1.启动下拉刷新有两种方式

(1)全局开启下拉刷新

在app.json的window节点中,将enablePullDownRefresh设置为true

(2)局部开启下拉刷新

在页面的.json的window节点中,将enablePullDownRefresh设置为true

在实际开发中,推荐使用第2种方式,为需要的页面单独开启下拉刷新的效果。

(3)监听页面下拉刷新的函数

(4)停止下拉刷新的效果

2.上拉触底

(1)定义

上拉触底是移动端的专有名词,通过手指在屏幕的上拉滑动操作,从而加载更多数据的行为
(2)监听的函数

(3)默认情况下是50px

(4)案例

1.定义方法

  getColors(){ //获取随机颜色的方法
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:({data:res})=>{
        console.log(res,123456);
        this.setData({
          colorList:[...this.data.colorList,...res.data]
        })
      }
    })
  },

 onLoad() { //触发
   this.getColors()
  },

2.渲染

结构:

{{item}}

样式：

.num-item{
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

3.上拉触底获取随机颜色

 onReachBottom: function () {
    this.getColors()
  },

在下拉触底的时候调用获取随机颜色的方法即可。

4.添加loading效果

5.节流的处理

步骤:

代码:

效果图

三.生命周期

1.生命周期的概念

生命周期是指一个对象从创建--->运行--->销毁的整个过程,强调的是一个时间段,例如

张三的出生到离世

2.生命周期的分类

应用生命周期

特指小程序从启动--->运行-->销毁的过程

页面的生成周期

特指小程序中,每个页面的加载--->渲染--->销毁的过程

3.生命周期函数

4.应用生命周期函数

5.页面的生命周期

四.wxs脚本

1.概念

WXS是小程序独有的一套脚本语言，结合WXML,可以构建出页面的结构