小程序下拉+Mock数据+node.js

下面介绍下小程序下拉的效果，规则:

1. 刚进入页面时显示八项数据，当页面底部上拉时数据增加，数据加载完显示no more
2. 当在顶部下拉时，页面重新加载，恢复只有8项数据
3. 用mock做后台数据
4. 用node.js造后台

介绍Mock造数据(具体参考MOCK文档，此操作是在vscode中操作的)

• Mock作用：生成随机数据，拦截 Ajax 请求。我们本章主要是生成随机数据
• 需要引入mock文件，可以去BootsCDN网站复制链接
• 我们需要的数据用Mock.Random 生成，Mock.Random 是一个工具类，用于生成各种随机数据，Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock.js"></script>
<script>
    let arr = Mock.mock({
        'list|10':[{
            'name':'@cWord(2,3)',//随机中文名，2-3个字符
            'englishName':'@word(2,5)',//随机英文名，2-5个字符
            'date':'@date("yyyy-MM-dd")',//随机输出日期,格式为yyyy-MM-dd
            'image':'@image("100×100")',//随机生成大小为100*100的图片，也可指定背景颜色等
            'address':'@address(true)'//如果显示的是true,则加上所属的省
        }]
    })
    console.log(arr)
</script>

结果如下

image

强烈建议大家看下Mock的官方文档，了解下都有哪些功能，留下印象

node.js造后台(Mock造数据)

• 需下载node.js软件，安装好win+R=》cmd输入node -v查看当前版本,查看是否安装成功
• 输入node可以进入node环境，如下

image

• 我们在vscode中创建一个node项目，新建node.js文件，下面开始配置环境

  1. 打开终端，输入npm init -y，生成默认的package.
  2. 输入npm i express --save 安装express包
  3. 输入npm install mockjs 安装mockjs包
  4. 输入npm i -g nodemon安装监听node代码变化的工具，输入nodemon开启
  5. 上面的安装了一次后面新建项目就不用再安装了，但是每次打开需输入nodemon
  6. 输入node node.js(文件名),在node环境下运行node.js

上代码

//require为引用模块
let express = require('express')
let Mock = require('mockjs')
//将Mock造的数据解构，这样下面可以直接提取goodsList变量
let {goodsList} = Mock.mock({
    'goodsList|50':[{
        "id|+1":1001,
        "name":"@cword(3,5)",
        "price":"@integer(10,50)"
    }]
})
let app=express()
//输入网址http://localhost:8888/list，会显示出来的结果
//request和response对象来处理请求和响应的数据。
app.get('/list',(req,res)=>{
//req为请求的数据设置pageIndex为请求的页码，若前端请求数据没有请求此数据，则默认第一页
    let pageIndex=parseInt(req.query.pageIndex || 1)
    let pageSize = parseInt(req.query.pageSize || 10)
    //根据规律得出每页的数据在数组的开始和结束的下标
    let start = pageSize*(pageIndex-1)
    let end = start + pageSize
    //设置1s延时，这样方便后面小程序代码loading的效果
    setTimeout(() => {
    //goodsList是一个数组，用slice方法截取当前页的数据
    res.json(goodsList.slice(start,end))
        
    }, 1000);
})
//app.listen启动一个服务器来监听连接，成功的话终端会打印app is running...
app.listen(8888,()=>{
    console.log('app is running...');
    
})

输入网址http://localhost:8888/list得到数据，可通过http://localhost:8888/list?pageIndex=3得到第三页的数组

image

小程序调用数据

• 需要引用之前封装的$get函数
• 上拉刷新事件，需在当前页面的json文件中开启当前页面下拉刷新。

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundColor": "#f00"
}

<!--pages/shoppingCar/shoppingCar.wxml-->
<view wx:for='{{goodsList}}' wx:key='id'
style="border-bottom:2rpx solid #eee;padding:20rpx 5rpx;">
  <view>id:{{item.id}}</view>
  <view>商品名字：{{name}}</view>
  <view>单价：{{price}}</view>
</view>

// pages/shoppingCar/shoppingCar.js
import {
  $get,
} from '../../utils/fun.js'

Page({

  async pull() {
    //之前$get封装时已经将url地址的常量封装，所以只要输入list拼接就可
    let goodsList = await $get('list', {
      //每次执行函数时页数+1
      pageIndex: this.data.pageIndex++,
      pageSize: 8
    })
    //当没有数据时，goodsList数组为空，此时结束后面的操作显示no more
    if (!goodsList.length)
      return wx.showToast({
        title: 'no more',
        icon: 'none'
      })
    this.setData({
      //用concat拼接数组，使上拉时不是切换页面的效果而是拼接的效果
      goodsList: this.data.goodsList.concat(goodsList)
    })

  },
  /**
   * 页面的初始数据
   */
  data: {
    goodsList: [],
    pageIndex: 1
  },

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

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    //当下拉时执行1s后停止下拉
    setTimeout(() => {
      wx.stopPullDownRefresh()
    }, 1000)
    //下拉后数据清空，所以数据改为原始数据
    this.data.goodsList = [],
      this.data.pageIndex = 1,
      //执行pull函数
      this.pull()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    //页面加载时执行pull函数
    this.pull()
  }

})