微信小程序DAY3

DAY03

小程序-视图与逻辑

目标

• 能够知道如何实现页面之间的导航跳转
• 能够知道如何实现下拉刷新效果
• 能够知道如何实现上拉加载更多效果
• 能够知道小程序中常用的生命周期函数

页面导航

什么是页面导航？

页面导航指的是页面之间的相互跳转。例如，浏览器实现页面导航的方式有如下两种：

1. 链接
2. location.href

小程序实现页面导航的两种方式

1. 声明式导航
   • 在页面上生命一个导航组件
   • 通过点击组件实现页面跳转
2. 编程式导航
   • 调用小程序的导航API，实现页面的跳转

声明式导航

1. 导航到tabBar页面

   tabBar页面指的是被 配置为tabBar的页面

   在使用组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

   • url表示要跳转的页面的地址，必须以**/**开头
   • open-type表示跳转的方式，必须为switchTab

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

2. 导航到非tabBar页面

   非tabBar页面指的是没有被配置为tabBar的页面

   在使用组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

   • url表示要跳转的页面的地址，必须以**/**开头
   • open-type表示跳转的方式，必须为navigate

   <navigator url="/pages/info/info" open-type="navigate">
   非tabBar的info页面</navigator>
   

   为了简便，导航到非tabBar页面时，open-type = "navigate"属性可以省略（也就是默认的跳转方式就是非tabBar）

3. 后退导航

   如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中：

   • open-type的值必须是navigateBack，表示要进行后退导航
   • delta的值必须是数字，表示要后退的层级

   <navigator open-type="navigateBack" delta="1">返回上一级</navigator>
   

   如果只是后退到上一页面，不需要声明delta(默认值是1)

   tabBar页面不支持作为多级返回页面，如果需要多级返回，只能用普通页面进行操作

编程式导航

1. 导航到tabBar页面

   调用wx.switch(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

   属性	类型	是否必选	说明
   url	string	是	需要跳转的tabBar页面的路径，路径后不能带参数
   success	function	否	接口调用成功的回调函数
   fail	function	否	接口调用失败的回调函数
   complete	function	否	接口调用结束的回调函数(调用成功、失败都会执行，类似于final)

   示例代码：

   <button bindtap="gotoShopping">跳转到购物车页面</button>
   

   //通过编程式导航跳转到shopping页面
       gotoShopping(){
           wx.switchTab({
             url: '/pages/shopping/shopping',
           })
       },
   

2. 导航到非tabBar页面

   调用wx.navigateTo(Object object)方法，可以跳转到非tabBar的页面。其中Object参数对象的属性列表如下

   和跳转到tabBar页面的object属性只有url不同（路径后可以带参数）

3. 后退导航

   调用wx.navigateBack(Object object)方法，可以返回上一页面或多级页面。其中Object参数对象可选的属性列表如下：

   属性	类型	默认值	是否必选	说明
   delta	number	1	否	返回的页面数，如果delta大于现有页面数，则返回到首页
   success	function		否	接口调用成功的回调函数
   fail	function		否	接口调用失败的回调函数
   complete	function		否	接口调用结束的回调函数(成功、失败均会执行)

   示例：

   <button bindtap="gotoBack">后退</button>
   

   gotoBack(){
           wx.navigateBack({
             delta: 2,
           })
       }
   

导航传参

声明式导航传参

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

• 参数与路径之间使用**？**分隔
• 参数键与参数值用**=**连接
• 不同参数用**&**分隔

示例：

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

参数可以在模拟器下方的页面路径/页面参数/场景值中选择查看

编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数，示例:

<button bindtap="gotoInfo2">跳转到Info页面</button>

通过编程式导航，跳转到info页面，并携带参数
gotoInfo2(){
        wx.navigateTo({
          url: '/pages/info/info?name=ls&gender=男',
        })
    }

在onLoad中接收导航传参

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到，示例：

onLoad:function(options) {
        //options就是导航传递过来的参数对象
        console.log(options)
    },

传递过来的参数一般都会转存到Data节点中

页面事件

下拉刷新事件

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而从新加载页面数据的行为

启用下拉刷新

两种方式：

• 全局开启下拉刷新

  在app.json的window节点中，将enablePullDownRefresh设置为true（实际应用中并不推荐）

• 局部开启下拉刷新

  在页面的.json配置文件中将enablePullDownRefresh设置为true

  为需要的页面单独开启下拉率先你的效果

配置下拉刷新窗口的样式

在全局或页面的.json文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式

• backgroundColor用来配置下拉刷新窗口的背景颜色(仅支持16进制)
• backgroundTextStyle用来配置下拉刷新的loading样式，仅支持dark和light

监听页面的下拉刷新事件

在页面的.js文件中，通过**onPullDownRefresh()**函数即可监听当前页面的下拉刷新事件

例如：在wxml中有如下的UI结构，点击按钮可以让count值自增+1

<view>count值为：{{count}}</view>
<button bindtap="countAdd">+1</button>

在触发页面的下拉刷新事件时，如果要把count的值重置为0，示例代码如下：

onPullDownRefresh: function () {
        console.log('触发了message下拉刷新'),
        this.setData({
            count: 0
        })
    },
    //+1按钮的点击事件处理函数
    countAdd(){
        this.setData({
            count:this.data.count + 1
        })
    },

停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果。此时，调用**wx.stopPullDownRefresh()**可以停止当前页面的下拉刷新。

onPullDownRefresh: function () {
        console.log('触发了message下拉刷新'),
        this.setData({
            count: 0
        })
        //当数据重置成功之后，调用此函数，关闭下拉刷新的效果
        wx.stopPullDownRefresh()
    },

上拉触底事件

上拉触底时移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

监听页面的上拉触底事件

在页面的.js文件中，通过onReactBottom()函数即可监听当前页面的上拉触底事件。

(节流：同一时间只允许发起一次请求，当上一个请求未完成的时候，不允许重复发起请求)

/**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        console.log('触发了上拉触底的事件')
    }

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离。

小程序默认的触底距离时50px，实际开发中可以按需修改。(修改时的单位默认就有px)

上拉触底案例

1. 案例效果展示

   

2. 案例的实现步骤

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

      data: {
              colorList:[]
          },
          getColors(){        //获取随机颜色的方法
              wx.request({    //发起请求，获取随机颜色值的数组
                url: 'https://www.escook.cn/api/color',
                method:'GET',
                success:({data: res})=>{
                    this.setData({
                        colorList:[...this.data.colorList,...res.data]//将获取的新数组和原数组通过展开运算符进行拼接
                    })
                }
              })
          }
      

      *（**…*是ES6中的拓展运算符，在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照 key-value 的方式展开）

   2. 在页面加载时获取初始数据

      onLoad: function (options) {
              this.getColors()
          }
      

   3. 渲染UI结构并美化页面效果

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

      /*wxss结构*/
      .num-item{
          border: 1px solid #efefef;/*边框线*/
          border-radius:8rpx;/*圆角样式*/
          line-height: 200rpx;/*行高*/
          margin: 15px;/*边距*/
          text-align: center;/*文本居中*/
          text-shadow: 0rpx 0rpx 5rpx #fff;/*横向 纵向偏移     扩散5rpx 阴影颜色*/
          box-shadow: 1rpx 1rpx 6rpx #aaa;/*横向 纵向偏移1rpx  扩散5rpx 阴影颜色*/
      }
      

   4. 在上拉触底时调用获取随机颜色的方法

       /**
           * 页面上拉触底事件的处理函数
           */
          onReachBottom: function () {
              //调用获取随机颜色的方法
              this.getColors()
          }
      

   5. 添加loading提示效果

      getColors(){        //获取随机颜色的方法
              //需要展示loading效果
              wx.showLoading({
                title: '数据加载中...',//显示loading效果
                
              })
              //发起请求，获取随机颜色值的数组
              wx.request({    
         //省略url、method、success方法
                complete:() =>{
                    wx.hideLoading({})//隐藏loading效果 (无论成功与否)
                }
              })
          }
      

   6. 对上拉触底进行节流处理

      22新版本已经自动节流，不需要额外配置

      配置方法：

      1. 在data中定义isloading节流阀
         • false表示当前没有进行任何数据请求
         • true表示当前正在进行数据请求
      2. 在getColor()方法中修改isloading节流阀的值
         • 在刚调用getColors时将节流阀设置true
         • 在网络请求的complete回调函数中，将节流阀重置为false
      3. 在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制
         • 如果节流阀的值为true，则阻止当前请求
         • 如果节流阀的值为tfalse，则发起数据请求

   自定义编译模式

   选择某一页面作为启动页面，提高开发效率

   

生命周期

1. 生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段。例如：

   • 张三出生，表示这个人生命周期的开始
   • 张三离世，表示这个人生命周期的结束
   • 中间张三的一生，就是张三的生命周期

   小程序运行的过程，也概括为生命周期：

   • 小程序的启动，表示生命周期的开始
   • 小程序的关闭，表示生命周期的结束
   • 中间小程序运行的过程，就是小程序的生命周期

2. 生命周期的分类

   在小程序中，生命周期分为两类，分别是：

   • 应用生命周期

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

   • 页面生命周期

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

   其中页面的生命周期范围较小，应用程序的生命周期范围较大，如图：

3. 生命周期函数

   生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行

   生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，在页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。

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

4. 生命周期函数的分类

   小程序中的生命周期函数分为两类，分别是：

   • 应用的生命周期函数

     特指小程序从启动->运行->销毁期间依次调用的那些函数

   • 页面的生命周期函数

     特指小程序中，每个页面从加载->渲染->销毁期间依次调用的那些函数

5. 应用的生命周期函数

   小程序的应用生命周期函数需要在app.js中进行声明，示例如下：

   // app.js
   App({
     //小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化工作
     onLaunch : function(options){ },
     //小程序启动，或从后台进入前台显示时触发
     onShow : function(options){ },
     //小程序从前台进入后台时触发
     onHide : function(){ }
   })
   

6. 页面的声明周期函数

   小程序的页面生命周期函数需要在页面的.js文件中进行声明，示例如下：

   //页面的.js文件
   Pages({
       //监听页面加载，1个页面只调用1次
       onLoad : function(options){ },
       //监听页面显示
       onShow : function(){ },
       //监听页面初次渲染完成，1个页面只调用1次
       onReady : function(){ },
       /*对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行，wx.setNavigationBarTitle用于动态修改当前页面的标题内容*/
       //监听页面隐藏
       onHide : function(){ },
       //监听页面卸载，1个页面只调用1次
       onUnLoad : function(){ },
   })
   

   Pages生命周期总览

   

WXS脚本

1. 什么是WXS

   WXS(WeiXin Script)是小程序独有的一套脚本语言，结WXML，可以构建出页面的结构。

2. 应用场景

   wxml中无法调用在页面的.js中定义的函数，但是，wxml中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是**“过滤器”**

3. wxs和JavaScript的关系*

   wxs的语法类似于JavaScript，但是wxs和JavaScript是两种完全不同的语言：

   • wxs有自己的数据类型
     • number数值类型 、string字符串类型、boolean布尔类型、object对象类型
     • function函数类型、array数组类型、date日期类型、regexp正则
   • wxs不支持ES6及以上的语法形式
     • **不支持：**let、const、解构赋值、展开运算符、箭头函数、对象属性简写…
     • **支持：**var定义变量、普通function函数等类似于ES5的语法
   • wxs遵循CommonJS规范
     • module对象
     • **require()**函数
     • module.exports对象

基础语法

1. 内嵌wxs脚本

   wxs代码可以编写在wxml文件中的标签内，就像JavaScript代码可以编写在html文件中的

WXS的特点

1. 与JavaScript不同

   为了降低wxs(WeiXinScript)的学习成本，wxs语言在设计时，借鉴了大量JavaScript的语法，但是本质上，wxs和JavaScript时两种完全不同的语言。

2. 不能作为组件的事件回调

   wxs典型的应用场景就是“过滤器”，经常配合Mustache语法进行使用，例如：

   <view>{{m2.toLower(country)}}</view>
   

   但是，在wxs中定义的函数不能作为组件的事件回调函数。例如，下述代码是错误的：

   <button bindtap="m2.toLower">
       按钮
   </button>
   

3. 隔离性

   隔离性指的是wxs的运行环境和其他JavaScript代码是隔离的，体现在下两方面：

   • wxs不能调用js中定义的函数
   • wxs不能调用小程序提供的API

4. 性能好

   • 在iOS设备上，小程序内的WXS会比JavaScript代码快2~20倍
   • 在Android设备上，二者的运行效率并无差异

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

1. 演示页面效果以及主要功能

   • 页面导航并传参
   • 上拉触底时加载下一页数据
   • 下拉刷新列表数据

   动态设置当前页面的title标题

   wx.setNavigationBarTitle(Object object)

   (在onReady中调用)

2. 列表页面的API接口

   以分页的形式，加载指定分类下商铺列表的数据：

   1. 接口地址：

      • https://www.escook.cn/categories/:cate_id/shops
      • URL地址中的:cate_id是动态参数，表示分类的id

   2. 请求方式

      发起GET请求

   3. 请求参数

      • _pages表示请求第几页的数据
      • _limit表示每页请求几条数据

   4. 演示页面效果以及主要功能

      • 页面导航并传参

      • 上拉触底时加载下一页数据

        1. 配置上拉触底的距离

           页面的.json文件中配置onReachBottomDistance节点

        2. 在触底事件中让页码值自增+1

        3. 调用getShopList方法

        判断是否还有下一页数据

        如果下面公式成立，则无下一页数据

        页码值*每页显示多少条数据>=总数据条数

        page*pageSize>=total

        案例：总共有77条数据，如果每页显示10条数据，则总共分为8页，其中第8页只有7条数据

        page(7)*pageSize(10)>=total(77)

        page(8)*pageSize(10)>=total(77)

      • 下拉刷新列表数据

        实际开发中，应该对后续数据进行判断，如果没有后续数据，则不应该进行额外的数据请求

        在json文件中添加enablePullDownRefresh节点

        背景颜色：“backgroundColor”: “#efefef”,

        小圆点样式：“backgroundTextStyle”: “dark”

        *模拟器中下拉之后会滞留很长一段下拉框（真机不会），避免这种现象，一般要在该页面的.js文件的**complete()回调函数中调用wx.stopPullDownRefresh()*方法

        问题：

        下拉触底刷新的时候也会调用getShopList() 方法，同样也就会调用complete()回调函数，必然会造成资源匮乏

        解决办法：

        在调用getShopList()方法中传递一个cb回调函数，如果外界传递了cb，则在内部调用回调函数，如果没有传递cb，则不再调用回调函数

        为什么不把wx.stopPullDownRefresh()写在 onPullDownRefresh()中？

        请求数据是异步的

        在生命周期函数中，如果请求事件小于timeout事件，数据回来了，但是还没有关闭刷新页面，这样不美观

      • wxs处理手机号

        1. 在utils文件内声明一个tools.wxs文件，内部声明一个名为splitPhone的function，参数接收字符串，

           内部写好处理逻辑

           再向外共享成员对象splitPhone

           对应代码：

           function splitPhone(str){
               if(str.length !==11) return str
               //若不是11位，直接return出去(座机)
               var arr = str.split('')
               //在索引为x的位置删除y个元素，添加一个'z'
               arr.splice(3, 0, '-')
               arr.splice(8, 0, '-')
               //join()方法返回一个被子字符串连接的方法
               return arr.join('')
           }
           module.exports = {//向外共享成员对象
               splitPhone:splitPhone
           }
           

        2. 对应页面的wxml文件中

           导入wxs脚本

           <!--导入wxs脚本，src代表路径，moudle代表模块名称-->
           <wxs src="../../utils/tools.wxs" module="tools"></wxs>
           

        3. 对应的复制粘贴函数可以另行设置

   总结

   1. 能够知道如何实现页面之间的导航跳转
      • 声明式导航、编程式导航
      • navigator组件和对应的微信API
   2. 能够知道如何实现下拉刷新的效果
      • enablePullDownRefresh、onPullDownRefresh
   3. 能够知道如何实现上拉加载更多的效果
      • onReachBottomDistance、onReachBottom
   4. 能够知道小程序中常用的声明周期函数
      • 应用生命周期函数：onLauch，onShow，OnHide
      • 页面生命周期函数：onLoad，onShow，onReady，onHide，onUnload