微信小程序 请求本地数据以及懒加载的实现

一、前言

本文将介绍如何在微信小程序中请求本地数据JSON以及懒加载的实现，文末有小程序应用的实例，欢迎浏览。

二、请求本地数据

如果有些数据几乎不变，或者因本地开发无法获取服务器JSON数据，我们可以把它们放在本地数据中发起请求。

新建 data/996blacklist.js

var json = [
  { 'city': '上海', 'company': '拼多多', 'comsite': 'https://www.pinduoduo.com//', 'comimg': '/images/company/pdd-logo.png', 'founddate': '2019年2月', 'desc': '11116、两班倒', 'content': '996还不敷，拼多多又玩两班倒，员工大喊：比富士康还狠', 'url': 'http://www.taobao92.com/thread-1313-1-1.html' },
  { 'city': '上海', 'company': '盛赫游戏', 'comsite': 'http://www.shengheyouxi.com', 'comimg': '/images/company/shenghe-logo.png', 'founddate': '2019年3月', 'desc': '大小周', 'content': 'boss直聘', 'url': 'https://www.zhipin.com/gongsi/c57418b66b0cf3bf0nd52928.html?ka=brand_list_company_9' },
  { 'city': '上海', 'company': '砸立', 'comsite': 'https://m.eyee.com/', 'comimg': '/images/company/downapp-logo.png', 'founddate': '2019年1月', 'desc': '996', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr5728610tl526.html?ka=review-label2' },
  { 'city': '上海', 'company': '游族网络', 'comsite': 'https://www.youzu.com/', 'comimg': '/images/company/youzu-logo.png', 'founddate': '2018年3月', 'desc': '996', 'content': '你为什么从游族离职?-知乎', 'url': 'https://www.zhihu.com/question/22411680?sort=created' },
  { 'city': '上海', 'company': '蝴蝶互动', 'comsite': 'http://hoodinn.hgame.com/default/index', 'comimg': '/images/company/hd-logo.png', 'founddate': '2019年2月', 'desc': '966', 'content': '知乎：如何评价蝴蝶互动？', 'url': 'https://www.zhihu.com/question/40858342/answer/616999472' },
  { 'city': '上海', 'company': '上海联影医疗科技有限公司', 'comsite': 'https://www.united-imaging.com/cn/home/', 'comimg': '/images/company/lianying-logo.svg', 'founddate': '2019年4月4日', 'desc': '996、无加班费', 'content': '看准网', 'url': 'https://www.kanzhun.com/pl6045694.html' },
  { 'city': '上海', 'company': '依图网络科技有限公司', 'comsite': 'http://www.yitutech.com/', 'comimg': '/images/company/yitu-logo.svg', 'founddate': '2019年4月5日', 'desc': '996', 'content': '知乎', 'url': 'https://www.zhihu.com/question/300132949/answer/606529193' },
  { 'city': '上海', 'company': '饿了么', 'comsite': 'https://www.ele.me/', 'comimg': '/images/company/element-logo.png', 'founddate': '2019年4月7日', 'desc': '996 or 997', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr1879439.html?ka=com-blocker1-review#co_tab' },
  { 'city': '上海', 'company': '德邦物流', 'comsite': 'https://www.deppon.com/', 'comimg': '/images/company/debang-logo.png', 'founddate': '2019年4月7日', 'desc': '996', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr16378tl56.html?ka=review-label9' },
  { 'city': '上海', 'company': '兴业数字金融服务', 'comsite': 'www.cibfintech.com/', 'comimg': '/images/company/xingye-logo.png', 'founddate': '2019年4月7日', 'desc': '996', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr6355543tl526.html?ka=review-label4' },
  { 'city': '上海', 'company': '小红书', 'comsite': 'https://www.xiaohongshu.com/', 'comimg': '/images/company/redbook-logo.png', 'founddate': '2019年4月7日', 'desc': '1095', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr1950189.html?ka=com-blocker1-review#co_tab' },
  { 'city': '上海', 'company': '依图科技', 'comsite': 'https://www.yitutech.com/', 'comimg': '/images/company/yitu-logo.svg', 'founddate': '2019年4月7日', 'desc': '996', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr1669492tl526.html?ka=review-label13' },
  { 'city': '上海', 'company': '金杜律师事务所', 'comsite': 'https://www.kwm.com/zh/cn', 'comimg': '/images/company/jindu-logo.png', 'founddate': '2019年4月8日', 'desc': ' 早10晚6 ', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr14366.html' },
  { 'city': '上海', 'company': '掌门一对一教育有限公司', 'comsite': 'https://www.zhangmen.com/', 'comimg': '/images/company/', 'founddate': '2019年4月', 'desc': '大小周', 'content': '看准网', 'url': 'https://www.kanzhun.com/pl7018849.html' },
  { 'city': '上海', 'company': '七牛云', 'comsite': 'https://www.qiniu.com/', 'comimg': '/images/company/zhangmen-logo.png', 'founddate': '2018年11月', 'desc': '995、裁员', 'content': '看准网', 'url': 'https://www.kanzhun.com/pl7147841.html?ka=comreview-result1' },
  { 'city': '东莞', 'company': '步步高', 'comsite': 'www.gdbbk.com/', 'comimg': '/images/company/', 'founddate': '2019年4月7日', 'desc': '8106 ！', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr3153tl56.html?ka=review-label12' },
  { 'city': '佛山', 'company': '美的集团', 'comsite': 'https://www.midea.cn/', 'comimg': '/images/company/', 'founddate': '2019年4月7日', 'desc': '996大小周', 'content': '看准网', 'url': 'https://www.kanzhun.com/gsr7884tl56.html?ka=review-label14' },
  { 'city': '北京', 'company': '京东', 'comsite': 'https://www.jd.com', 'comimg': '/images/company/', 'founddate': '2019年3月', 'desc': '995', 'content': '京东回应995工作制：不会强制要求 但要全情投入', 'url': 'http://tech.163.com/19/0312/13/EA2QGIOK00097U7R.html' },
  { 'city': '北京', 'company': '58同城', 'comsite': 'https://www.58.com', 'comimg': '/images/company/', 'founddate': '2019年4月7日', 'desc': '996', 'content': '58同城实行全员996工作制 被指意图逼员工主动辞职', 'url': 'http://finance.cnr.cn/gs/20160901/t20160901_523105136.shtml' },
  { 'city': '北京', 'company': '途家网', 'comsite': 'https://www.tujia.com', 'comimg': '/images/company/', 'founddate': '2017年12月', 'desc': '897', 'content': '暴力裁员、996加班、发感冒冲剂、搭睡觉帐篷、诉讼材料', 'url': 'https://www.tujia.xyz/' },
  { 'city': '北京', 'company': '字节跳动', 'comsite': 'https://bytedance.com', 'comimg': '/images/company/', 'founddate': '2017年7月', 'desc': '996', 'content': '看准网1', 'url': 'https://www.kanzhun.com/gsr5622411tl56.html' },
  { 'city': '北京', 'company': '神策数据', 'comsite': 'https://www.sensorsdata.cn/', 'comimg': '/images/company/', 'founddate': '2019年3月', 'desc': '大小周', 'content': '看准网', 'url': 'https://www.kanzhun.com/pl6409927.html' },
  { 'city': '北京', 'company': '中软国际', 'comsite': 'http://www.chinasofti.com/', 'comimg': '/images/company/', 'founddate': '2019年3月', 'desc': '996', 'content': '智联招聘', 'url': 'https://jobs.zhaopin.com/CC508620126J00303154805.htm' },
  { 'city': '北京', 'company': '柯莱特', 'comsite': 'http://www.camelotchina.com/', 'comimg': '/images/company/', 'founddate': '2019年3月', 'desc': '996', 'content': '智联招聘', 'url': 'https://jobs.zhaopin.com/CC120179637J00117070515.htm' },
  { 'city': '北京', 'company': '高伟达', 'comsite': 'http://www.git.com.cn/', 'comimg': '/images/company/', 'founddate': '2019年3月', 'desc': '996', 'content': '智联招聘', 'url': 'https://jobs.zhaopin.com/CC120702341J00114014810.htm' }
]
module.exports = {
  blackList: json
}

获取本地数据 require引入

// blacklist.js
var localData = require('../../data/996blacklist.js')
var initList = []

Page({
  data: {
    isLoadMore: true,
    isReachBottom: true,
    blackList: [],
    currentNo: 5
  },
  onLoad: function () {
    var totalList = localData.blackList
    console.log(totalList)
    ......
  },
  ......
})

项目路径和引入方式如图所示

获取本地数据.png

至此成功获取本地数据，模拟发起了wx.request()的服务器请求。

三、懒加载的实现

一般小程序中会采用下拉刷新（本文略）和上拉加载更多，这样可以避免一次性加载过多的数据而造成的页面卡顿以及加载速度过慢影响用户体验。

涉及到的API onReachBottom

onReachBottom: function () {
  console.log('下拉到底部了！')
}

懒加载思路

进入页面初始化，首先item数组加载前5条（数量根据实际需要），然后每当用户下拉到底部后，触发onReachBottom函数，追加后5条到item数组中，循环直到全部加载完毕，显示“全部加载完毕”等提示语，此时无法下拉。

代码 blacklist.js

// blacklist.js
var localData = require('../../data/996blacklist.js')
var initList = []

Page({
  data: {
    isLoadMore: true,
    isReachBottom: true,
    blackList: [],
    currentNo: 5
  },
  onLoad: function () {
    var totalList = localData.blackList
    console.log(totalList)
    // 初始化显示前五个
    for (var i = 0; i < 5; i++) {
      initList.push(totalList[i])
    }
    this.setData({
      blackList: initList
    })
  },
  onReachBottom: function () { // 上拉加载更多
    this.setData({
      isLoadMore: false
    })
    var totalList = localData.blackList
    var currentNo = this.data.currentNo
    var initList = []
    if (currentNo >= 25) {
      this.setData({
        isLoadMore: true,
        isReachBottom: false
      })
      return
    }
    for (var i = 0; i < currentNo + 5; i++) {
      initList.push(totalList[i])
    }
    setTimeout(() => {
      this.setData({
        currentNo: currentNo + 5,
        isLoadMore: true,
        blackList: initList
      })
    }, 1000)
  }, 
  onShareAppMessage: function () { //用户点击右上角分享   
    return {
      title: '996ICU', // 分享标题
      desc: '996ICU分享', // 分享描述
      path: 'pages/index/index' // 分享路径
    }
  }
})

四、小彩蛋

以上内容可以在小程序实例中体验

欢迎关注我的个人小程序

996ICU小程序.png

谢谢阅读，有帮助的点个❤！