黑马程序员微信小程序 案例3-3 美食列表

1. 项目中会有略微改动，可以自己改回来嗷
2. 项目展示
   
3. 项目文件结构
   
4. 项目代码

   // pages/shoplist/shoplist.js
   Page({
   
     /**
      * 页面的初始数据
      */
     data: {
       // 用于保存美食列表信息
       shopList: [],
     },
     listData: {
       // 默认请求第一页数据
       page: 1,
       // 默认每条请求10页数据
       pageSize: 10,
       // 数据总数，默认为0
       total: 0
     },
     // 节流阀，防止页面数据重复加载。false表数据已经加载完成
     isLoading: false,
   
     
     getShopList: function (callback) {
       // 请求数据之前，展示加载效果，接口调用结束后，停止加载效果
   
       // true表示当前正在加载数据
       this.isLoading = true
   
       // 展示加载效果
       wx.showLoading({
         title: '数据加载中...',
       })
       wx.request({
         url: 'http://127.0.0.1:3000/data',
         method: 'GET',
   
         // 定义请求参数
         data: {
           page: this.listData.page,
           pageSize: this.listData.pageSize
         },
         success: res => {
           // 控制台将会输出res对象
           console.log(res);
           if (res.statusCode === 200) {
             this.setData({
               // 合并数据
               shopList: [...this.data.shopList, ...res.data],
             });
             // 更新数据总数
             this.listData.total = res.header['X-Total-Count'] - 0;
           } else {
             wx.showToast({
               title: '加载失败',
               icon: 'none'
             });
           }
         },
         // 该接口调用结束的回调函数
         complete: () => {
           // 隐藏加载效果
           wx.hideLoading()
           this.isLoading = false
           // 先检查是否传入了该函数，传入了则调用
           callback && callback()
           // cb && cb()
         }
       })
     },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function () {
       this.getShopList()
     },
   
   
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady() {
   
     },
   
     /**
      * 生命周期函数--监听页面显示
      */
     onShow() {
   
     },
   
     /**
      * 生命周期函数--监听页面隐藏
      */
     onHide() {
   
     },
   
     /**
      * 生命周期函数--监听页面卸载
      */
     onUnload() {
   
     },
   
     /**
      * 页面相关事件处理函数--监听用户下拉动作
      */
     onPullDownRefresh() {
       this.setData({
         shopList: []
       })
       this.listData.page = 1
       this.listData.total = 0
       this.getShopList(() => {
         wx.stopPullDownRefresh()
       })
   
     },
     /**
      * 页面上拉触底事件的处理函数
      */
     onReachBottom: function () {
       // 无下一页的数据
       if (this.listData.page * this.listData.pageSize >= this.listData.total) {
         return wx.showToast({
           title: '数据加载完毕',
           icon: 'none',
         })
       }
       if (this.isLoading) {
         // 阻止函数向后执行，此时数据还未完成加载
         return
       }
   
       // 页码数据自增
       ++this.listData.page
       // 获取下一页数据
       this.getShopList()
     },
     /**
      * 用户点击右上角分享
      */
     onShareAppMessage() {
   
     }
   });

   shoplist.json

   {
     "usingComponents": {
     },
     "navigationBarTitleText": "美食",
   	"onReachBottomDistance": 200,
   	"enablePullDownRefresh":true,
     "backgroundColor": "#d8b5b5",
   	"backgroundTextStyle":"dark"
    
   }

   <!--pages/shoplist/shoplist.wxml-->
   <wxs src="../../utils/tools.wxs" module="tools"></wxs>
   <view class="shop-item" wx:for="{{ shopList }}" wx:key="id">
     <view class="thumb">
       <image src="{{ item.image }}"></image>
     </view>
     <view class="info">
       <text class="shop-title">{{ item.name }}</text>
       <text>电话：{{tools.splitPhone(item.phone)}}</text>
       <text>营业时间：{{ item.businessHours }}</text>
       <text>地址：{{ item.address }}</text>
       
     </view>
   </view>
   <!-- <text>电话：{{ tools.splitPhone(item.phone) }}</text> -->
   

   /* pages/shoplist/shoplist.wxss */
   .shop-item {
     display: flex;
     padding: 15rpx;
     border: 1rpx solid #c4b1b1;
     border-radius: 8rpx;
     margin: 15rpx;
     box-shadow: 1rpx 1rpx 15rpx rgb(202, 150, 150);
   }
   
   .thumb image {
     width: 250rpx;
     height: 250rpx;
     display: block;
     margin-right: 15rpx;
   }
   
   .info {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     font-size: 24rpx;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  
   }
   
   .shop-title {
     font-weight: bold;
     font-size: 32rpx;
   
   }
   

   // utils/tools.wxss
   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
   }

   // utils/util.js
   const formatTime = date => {
     const year = date.getFullYear()
     const month = date.getMonth() + 1
     const day = date.getDate()
     const hour = date.getHours()
     const minute = date.getMinutes()
     const second = date.getSeconds()
   
     return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
   }
   
   const formatNumber = n => {
     n = n.toString()
     return n[1] ? n : `0${n}`
   }
   
   module.exports = {
     formatTime
   }
   

   app.json

   {
     "pages": [
       "pages/shoplist/shoplist",
       "pages/logs/logs"
       
     ],
     "window": {
       "navigationBarTextStyle": "black",
       "navigationBarTitleText": "美食",
       "navigationBarBackgroundColor": "#d8b5b5"
     },
     "style": "v2",
     "componentFramework": "glass-easel",
     "sitemapLocation": "sitemap.json",
     "lazyCodeLoading": "requiredComponents"
   }

   
    

5. 项目运行
   服务器根目录下进入终端运行命令行node index.js,之后重新编译项目就可以啦