微信小程序(二)

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

1.声明式导航

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

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

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.渲染

结构:

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgb({{item}});">{{item}}
</view>

 样式：

.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,可以构建出页面的结构

2.应用场景

3.wxs和Javascript的关系

 

 4.使用