【微信小程序——开发DAY3（黑马程序员课程）】

页面导航

什么是页面导航，页面之间的相互跳转

声明式导航

（1）类型一：

• 在页面声明一个导航组件
• 通过点击组件实现页面跳转

在之前DAY1项目下编写——list.wxml——

跳转到tabBar页面

<!-- 注意：pages前面要写根目录，不能忘记，没写就不能成功跳转 -->

<!-- 注意：open-type属性等于switchTab是指定跳转的页面属于tabBar的 -->

<navigator url="/pages/index/index" open-type="switchTab">导航到index页面</navigator>

效果图：

跳转到非tabBar页面

在app.json中增加页面

在list.wxml中编写

<!-- 注意：open-type属性等于navigate是指定跳转的页面属于一半页面的，而非tabBar页面的，一般可以不指定，相当于默认 -->
<navigator url="/pages/new_page/new_page" open-type="navigate">导航到new_page页面</navigator>

效果图：

后退导航

代码如下：

<!--pages/new_page/new_page.wxml-->
<!--delta属性默认值就是“1”-->
<text>pages/new_page/new_page.wxml</text>
<navigator open-type="navigateBack" delta="1">后退一个页面</navigator>

编程式导航

（2）类型二：

• 调用·小程序的导航API，实现页面的跳转

调用wx.switchTab(Object obgect)方法，可以跳转到tabBar页面：

——在new_page.wxml中编写

<button bindtap="gotIndexpage">跳转到index页面</button>

——在new_page.js中编写——编写函数与data数据同级

//通过编程式导航跳转到tabBar页面——index页面——wx.switchTab接口
    
  gotIndexpage(){
    wx.switchTab({
      url: '/pages/index/index',
    })

  },

效果如图：

• 导航到非tabBar页面

调用wx.navigateTo( Object object)方法，可以跳转到非tabBar页面

在list.wxml中编写

<button bindtap="gotnew_page">导航到非tabBar的新页面</button>

在list.js中编写

//跳转到非tabBar页面调用接口wx.navigateTo()
  gotnew_page(){
    wx.navigateTo({
      url: '/pages/new_page/new_page',
})

  },

效果如图：

调用wx.navigateBack( Object object)方法，可以返回上一页面或者多级页面

导航回退至某页面——初学者觉得这个好像没有什么用，其实不然，在实际开发中会有用的，所以不要怀疑，存在即合理。

在new_page.wxml中编写

<button bindtap="gotbackBack">回退</button>

在new_page.js中编写

//通过编程式导航跳转到tabBar页面——index页面——wx.navigateBack()接口
  gotbackBack(){

  wx.navigateBack({
  //这个配置项根据自己的需求定
	delta:1
	})
  },

效果如图：——点击即可回退，默认层级1

导航传参

声明导航传参

navigator组件的url属性来指定将要跳转到的页面路径。同时，路径的后面还可以携带参数

• 参数与路径之间使用？分割
• 参数键与参数值用=相连
• 不同参数用&分割
  在list.wxml中编写——之前基础之上新增：
  
  代码如下：

<navigator url="/pages/new_page/new_page?name=zs&age=20&fromdata=list_page" open-type="navigate">导航到new_page页面</navigator>

效果图：

编程式导航传参传参

• 调用wx.navigateTo（Object object）或者wx.switchBar（Object object）方法跳转时，携带参数，
  
  
  效果图如下：
  

在onload函数中接收导航参数

通过声明导航和编程式传参所携带的参数，可以直接在onLoad事件中直接获取到——这里虽然只演示声明导航类型的但是，都可以传递

传递之后的参数，被data{ },接收，接受后可以给传递给其他函数使用——data作为中间接收站——因为options作用域只在onLoad函数中

（1）在new_page.js中的data{ }里面定义一个query数组

（2）在new_page.js中的onLoad( )函数里面给query赋值

代码如下：

onLoad: function (options) {
      console.log(options)
      this.setData({
        query:options
      })
  },

• 点击操作完成实验：
  
• ——跳转后

页面事件

下拉刷新——重新加载页面数据——虽然在之前的学习中讲过但是为了下面的案例，黑马老师再讲一遍是为了案例知识的完整性

启动下拉刷新

（1）全局开启下拉刷新

				在app.json的window节点中，将 "enablePullDownRefresh":设置为true

（2）局部开启下拉刷新

					在页面.json中，将 "enablePullDownRefresh":设置为true

注：一般推荐局部刷新——有些页面不需要使用刷新

配置下拉刷新窗口样式

在全局或者页面.json配置文件中，通过backgroundColor和backgroundtextStyle来配置和刷新窗口的样式，其中：
backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值
backgroundtextStyle用来配置loading的样式，仅支持dark和light

监听页面的下拉刷新事件

			在页面的.js文件中，通过onPullDownRefresh( )函数可监听当前页面的下拉刷新事件
			在new_page.wxml中编写：
			代码如下：

<view>count值是：{{count}}</view>
<button bindtap="addCount">count的值+1</button>

在new_page.js中编写：

	addCount(){
	
	    this.setData({
	      count:this.data.count+1
	    })
	  },


/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
      this.setData({
        count:0
      })
      //当数据重置成功后，调用此函数，关闭下拉刷新的效果
      wx.stopPullDownRefresh({
        
      })
  },

——效果实现

停止下拉刷新效果

		当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果。
		调用wx.stopPullDownRefresh（）函数，关闭loading效果

上拉加载更多——加载更多条目

监听页面的上拉触底事件

配置上拉触底距离——触发上拉触底事件时，滚动条距离页面底部的距离

——可以在全局或者页面.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离
小程序中默认的触底距离是50px,在实际开发中，可以根据自己的需求修改这个默认值。

上拉案例实现

（1）定义获取随机颜色的方法

——其中请求网址的数据内容格式

——在new_page.js中编写

//得到数据函数编写
  getColors(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method:'GET',
      success:({data:res})=>{
          this.setData({
            // 拼接数组
            colorList:[...this.data.colorList,...res.data]
          })

      }

    })
  },

——在wxml中编写接收数据容器列表
代码如下：

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

（2）在页面加载时获取初始数据——在new_Page.js中编写
代码如下：

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
    //  console.log(options)
     // this.setData({
        // query:options
     // })
		//加载函数——前面的代码可以不要看
      this.getColors()
  },

（3）渲染ui结构并美化页面效果——在new.page.wxss编写
代码如下：

.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;
}

效果图如下：

（4）添加loading效果

——加载太快我就不展示加载效果图了

（5）节流实现步骤

• 在data中定义isloading节流阀
  

• 在getcolors( )方法中修改isloading节流阀的值
  

• 在onReachBottom中判断节流阈的值，从而对数据请求进行节流控制
  
  效果图片：
  

——扩展知识——自定义编译模式模式

生命周期

（1）应用生命周期——小程序
（2） 页面生命周期——每个页面

关系图：

小程序启动——页面A生命周期——页面B生命周期——页面C生命周期——…——小程序结束

生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行
生命周期函数作用：允许程序员在特定的时间点，执行默写特定的操作。

——注：生命周期强调的是时间段，生命周期函数强调的是时间点。

生命周期函数的分类

（1）应用生命周期函数——小程序

// app.js
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
   //作用：从本地数据初始化等
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
   //小程序在手机中从后台运行（就是我们平时说的手机后台运行的那个后台，不要多想）进入前台运行时触发
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
   //小程序从前台运行进入手机的后台运行时触发
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

（2） 页面生命周期函数——每个页面

 /**
   * 生命周期函数--监听页面加载
   */
   //监听页面加载，一个页面只调用一次
  onLoad: function (options) {
      console.log(options)
      this.setData({
        query:options
      })

      this.getColors()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
   //监听页面初次渲染完成，一个页面只调用一次
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
   //监听页面显示
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
   //监听页面隐藏
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
   //监听页面卸载，一个页面只调用一次
  onUnload: function () {

  },

wxs脚本的基本用法——过滤器

——我打算明天单独出一篇理一下
（1）内嵌脚本
（2）定义外联的wxs脚本
（3）使用外联的wxs脚本
特点：
（1）不能作为组件的事件回调
（2）隔离性
———— wx不能调用js中定义的函数
———— wxs不能调用小程序提供的API
（3）性能好

案例——本地生活（列表页面）

注：列表页面项目将在下一篇文章中单独编写——敬请期待！！！