• 微信小程序第三天

    页面导航

    声明式导航
    编程式导航：调用小程序的导航API，实现页面的跳转

    声明式导航：导航到tabBar页面

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

    • 1

    声明式导航：跳转到非tabBar页面

    <navigator url="/pages/test/test" open-type="navigate">跳转到test页面</navigator>

<navigator url="/pages/test/test">跳转到test页面</navigator>

    • 1
    • 2
    • 3

    声明式导航：后退导航

    <navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>

    • 1
    • 2

    编程式导航：导航到tabBar页面
    wx.switchTab()

    <button bindtap="gotoMessage">跳转到message页面</button>

    • 1
      gotoMessage() {
    wx.switchTab({
      url: '/pages/message/message',
    })
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    编程式导航： 导航到非tabBar页面
    wx.navigateTo(Object object)

    编程式导航： 后退导航
    wx.navigateBack(Object object)

    导航传参

    声明式导航传参：

    <navigator url="/pages/test/test?name=zs&age=20" open-type="navigate">跳转到test页面</navigator>

    • 1

    在这里插入图片描述
    编程式导航传参：

    <navigator bindtap="gotoInfo">跳转到info页面</navigator>

    • 1
    gotoInfo() {
    wx.navigateTo({
      url: '/pages/info/info?name=ls&age=55',
    })
  },

    • 1
    • 2
    • 3
    • 4
    • 5

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

    onLoad(options) {
    this.getInfo()
    this.setData({
      query: options
    })
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    页面事件

    下拉刷新

    下拉刷新
    .json文件中配置：
    enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。
    配置下拉刷新窗口样式：
    backgroundColor
    backgroundTextStyle

    监听页面的下拉刷新事件
    .js中有onPullDowRefresh函数
    使用： 下拉刷新将某个数字重置
    在onPullDownRefresh中设置一下。
    wx.startPullDownRefresh 开始下拉刷新
    wx.stopPullDownRefresh 停止当前页面下拉刷新

    上拉触底

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

    上拉触底案例

    实现步骤：

    1. 定义获取随机颜色的方法
    2. 在页面加载时获取初识数据
    3. 渲染UI结构并美化页面效果
    4. 在上拉触底时调用获取随机颜色的方法
    5. 添加loading提示效果
    6. 对上拉触底进行节流处理

    实现效果以及代码
    获取随机颜色的的方法 

    data: {
    colorList: []  //随机颜色的列表
  },

  getColors(){
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({data: res}) => {
        // console.log(res.data)
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

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

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

    • 1
    • 2
    • 3
    • 4
    /* pages/contact/contact.wxss */

.item {
  width: 80%;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  margin: 60rpx auto;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

      /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    添加loading提示效果
    wx.showLoading(Object object)

      getColors(){
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({data: res}) => {
        // console.log(res.data)
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      // 隐藏loading
      complete: () => {
        wx.hideLoading()
      }
    })
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    节流处理

    1. 在data中定义isLoading节流阀
      false表示当前没有进行任何数据请求
      true表示当前正在进行数据请求
    2. 在getColors()方法中修改isLoading节流阀的值
      在刚调用getColors时将节流阀设置为true
      在网络请求的complete回调函数中，将节流阀设置为false
    3. 在onReachBottom判断节流阀的值，从而对数据请求进行节流控制
      如果节流阀的值为true，则阻止当前请求
      如果节流阀的值为false，则发起数据请求
    data: {
    colorList: [],  //随机颜色的列表
    isLoading: false
  },

  getColors(){
    this.setData({
      isLoading: true
    })
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({data: res}) => {
        // console.log(res.data)
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      // 隐藏loading
      complete: () => {
        wx.hideLoading()
        this.setData({
          isLoading: false
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if(this.data.isLoading) return 
    this.getColors()
  },


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    当前已经不需要了
    在触发距离内滑动期间 onReachBottom只会触发一次

    自定义编译模式

    在这里插入图片描述
    在这里插入图片描述

    生命周期

    页面生命周期函数

    应用生命周期函数 app.js

    App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   * 本地存储
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    wxs

    wxs

    在这里插入图片描述
    使用内嵌的wxs脚本

    <view> {{ m1.toUpper('hello') }}</view>
<wxs module="m1">
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    定义外联的wxs脚本 编写在以.wxs为后缀名的文件
    utils/tools.wxs

    function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    使用外联的wxs脚本
    为wxs标签添加module和src属性
    其中module用来指定模块的名称
    src用来指定要引入的脚本的路径，且必须是相对路径

    <view>{{ m2.toLower('WORLD') }}</view>
<wxs src="../../utils/tools.wxs" module="m2">
</wxs>

    • 1
    • 2
    • 3

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

    1. 实现导航跳转
    2. 设置标题内容并创建编译模式
    3. 获取并渲染商铺列表的数据
    4. 上拉加载效果
    5. 判断数据是否加载完毕
    6. 实现下拉刷新
    7. 使用wxs处理手机号

    本地生活轮播图和九宫格的接口我已经更换：现在实现效果如下图:
    在这里插入图片描述

    home.wxml

    <!--pages/home/home.wxml-->
<swiper indicator-dots circular autoplay interval="2000">
  <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格 --> 
<view class="grid-list">
  <view class="grid-item"  wx:for="{{gridList}}" wx:key="index">
    <image src="{{item.icon}}"></image>
    <text>{{ item.name }}</text>
  </view>
</view>

<!-- 图片区域 -->
<view class="img-box">
  <image src="/images/link-01.png" mode="widthFix"></image>
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    home.js

    // pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   swiperList: [],
   gridList: []
  },

   // 获取轮播图中的数据
   getSwiperList() {
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method: 'GET',
      success: ({data: res}) => {
        this.setData({
          swiperList: res
        })
      }
    })
  },

  // 获取九宫格中的数据
  getGridList() {
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method: 'GET',
      success: ({data: res}) => {
        this.setData({
          gridList: res
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList()
    this.getGridList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94

    home.wxss

    /* pages/home/home.wxss */
swiper {
  height: 350rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-top: 1rpx solid #efefef;
  border-left: 1rpx solid #efefef;

}

.grid-item {
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}

.grid-item image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 10rpx;
}

.grid-item text {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.img-box {
  display: flex;
  justify-content: space-around;
  padding: 5rpx 10rpx;
}

.img-box image {
  width: 45%;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    导航跳转
    app.json新增加一个页面shoplist
    九宫格区域稍微修改即可实现：

    <!-- 九宫格 --> 
<view class="grid-list">
  <navigator class="grid-item"  wx:for="{{gridList}}" wx:key="index" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
    <image src="{{item.icon}}"></image>
    <text>{{ item.name }}</text>
  </navigator>
</view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    动态设置标题
    shoplist.js

    /**
   * 页面的初始数据
   */
  data: {
    query: {}
  },

  /**
   * 生命周期函数--监听页面加载
   * option中包含着传递进来的参数 导航时传递了参数id与title
   */
  onLoad(options) {
    this.setData({
      query: options
    })
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述

    获取并渲染商铺列表的数据
    在这里插入图片描述

    列表页面的API接口
    接口地址：https://applet-base-api-t.itheima.net/categories/:cate_id/shops

    :cate_id是动态参数，表示分类的id
    以分页的形式，加载指定分类下商铺列表的数据
    请求的参数：

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

    获取
    shoplist.js

    data: {
    query: {}, //存储传递的参数
    shopList: [],
    page: 1, // 当前页数
    pageSize: 10, // 当前页面数据条数
    total: 0 // 总数据条数
  },

  /**
   * 生命周期函数--监听页面加载
   * option中包含着传递进来的参数 导航时传递了参数id与title
   */
  onLoad(options) {
    this.setData({
      query: options
    })
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })

    this.getShopList()
  },

  // 获取商铺数据
  getShopList() {
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) => {
        // console.log(res)
        this.setData({
          shopList: [...this.data.shopList, ...res.data],
          total: res.header['X-Total-Count'] - 0
        })
      }
    })
  },


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    shoplist.wxml

    <!--pages/shoplist/shoplist.wxml-->
<view class="shop-item"
  wx:for="{{shopList}}" wx:key="id"
>

  <view class="thumb">
    <image src="{{item.images[0]}}"></image>
  </view>

  <view class="info">
    <text class="shop-title">{{item.name}}</text>
    <text>电话：{{item.phone}}</text>
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    shoplist.wxss

    /* pages/shoplist/shoplist.wxss */
.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  border-radius: 8rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}

.thumb image {
  width: 250rpx;
  height: 250rpx;
  /* 图片底下有一定的间距 */
  display: block;
  margin-right: 15rpx;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}

.shop-title {
  font-weight: bold;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    ☁️上拉以及加载效果
    ⭐️加载
    shoplist.js

     getShopList() {
    // 展示loading
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({

      // 隐藏loading
      complete: () => {
        wx.hideLoading()
      }
    })
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    🎆上拉触底
    shoplist.json中设置"onReachBottomDistance" : 200

      onReachBottom() {
    this.setData({
      page: this.data.page + 1
    })

    this.getShopList()
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    🎈判断数据是否加载完毕
    判断是否还有下一页数据
    页码值 * 每页显示多少条数据 >= 总数据条数
    page * pageSize >= total

    或者直接用数组长度判断
    this.data.showList.length === this.data.total

    wx.showToast(Object object)

     onReachBottom() {
    if(this.data.page * this.data.pageSize >= this.data.total) {
      // 证明没有下一页数据了
      return wx.showToast({
        title: '数据加载完毕',
        icon: 'none'
      })
    }
 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    下拉刷新
    shoplist.json中设置"enablePullDownRefresh": true
    "backgroundColor": "#efefef", "backgroundTextStyle": "dark"

    解决了下拉刷新后 不会自动关闭的问题：

      // 获取商铺数据
  getShopList(cb) {
      // 隐藏loading
      complete: () => {
        wx.hideLoading()
        // wx.stopPullDownRefresh()
        cb && cb()
      }
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // 需要重置关键数据
    this.setData({
      page: 1,
      shopList: [],
      total: 0
    })

    // 重新发起数据请求
    this.getShopList( () => {
      wx.stopPullDownRefresh()
    })
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    处理手机号
    utils/tools.wxs

    function splitPhone(str) {
  if(str.length !== 11) return str

  var arr = str.split('')
  arr.splice(3,0,'-')
  arr.splice(8,0,'-')
  return arr.join('')
}

module.exports = {
  splitPhone: splitPhone
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    shoplist.wxml

      <view class="info">
    <text>电话：{{tools.splitPhone(item.phone)}}</text>
  </view>

<wxs src="../../utils/tools.wxs" module="tools">
</wxs>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    总结

    在这里插入图片描述

  • 相关阅读:
    Origin绘制彩色光谱图
    KT142C-sop16语音芯片ic测试板的使用说明_串口如何接线
    野火FPGA进阶（2）：基于I2C协议的EEPROM驱动控制
    leetcode 25. K 个一组翻转链表
    搜索——最短路模型，多源bfs
    打码半年，开源一款自定义大屏设计软件！
    企业数据管理中，数据可视化的重要性
    Grōk ：马斯克 xAI 打造的 ChatGPT 竞争产品探索
    Oracle内存架构
    web课程设计 基于html+css+javascript+jquery女性化妆品商城
  • 原文地址：https://blog.csdn.net/weixin_45732235/article/details/125465188