校园跑腿小程序---轮播图，导航栏开发

news2025/1/15 2:05:19

在这里插入图片描述

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

在这里插入图片描述

文章目录

- - 1.底部导航栏
  - 2.小程序的组件封装
  - - 2.1页面引入组件
  - 3.轮播图的封装
  - 4.通知栏的封装
  - 5.request.js封装
  - 6.api
  - 7.time.js封装
  - 🎉写在最后

B站教学视频

B站：校园跑图小程序开发

1.底部导航栏

在这里插入图片描述

"tabBar": {
    "color": "2c2c2c",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./image/tabr/index.png",
        "selectedIconPath": "./image/tabr/index1.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单",
        "iconPath": "./image/tabr/order.png",
        "selectedIconPath": "./image/tabr/order1.png"
      },
      {
        "pagePath": "pages/talk/talk",
        "text": "论坛",
        "iconPath": "./image/tabr/talk.png",
        "selectedIconPath": "./image/tabr/talk1.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "./image/tabr/my.png",
        "selectedIconPath": "./image/tabr/my1.png"
      }
    ]
  }

2.小程序的组件封装

在这里插入图片描述

2.1页面引入组件

在这里插入图片描述

{
  "usingComponents": {
    "swiper":"../../components/swiper/swiperImg"
  }
}

在这里插入图片描述

3.轮播图的封装

<view class="banner">
    <swiper class="swip_main" indicator-dots autoplay interval="5000" circular>
        <block wx:for="{{mglist}}">
            <swiper-item>
                <image style="width: 100%;height: 100%;border-radius: 30rpx;" mode="scaleToFill" src="{{item.imgUrl}}" data-src="{{item.imgUrl}}" catchtap="previewImage"></image>
            </swiper-item>
        </block>
    </swiper>
</view>

.banner{
    width: 96%;
    height: 350rpx;
    margin: 15rpx auto;
    border-radius: 20rpx
}
.swip_main{
    width: 100%;
    height: 100%;
}

// components/swiper/swiperImg.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        mglist:{
            type:Array,
            value:[]
        }
    
    },

    /**
     * 组件的初始数据
     */
    data: {
        mglist:[]
    },

    /**
     * 组件的方法列表
     */
    methods: {
    
    }
})

4.通知栏的封装

<view class="tz">
    <view class="tz_zp">
        <image src="../../image/gg.png"></image>
    </view>
    <swiper class="swiper-news-top" vertical="true" autoplay="true" circular="true" interval="3000">
        <block wx:for="{{messageList}}">
            <navigator url="" open-type="navigate">
                <swiper-item>
                    <view class="swiper_item">{{item.content}}</view>
                </swiper-item>
            </navigator>
        </block>
    </swiper>
</view>

/* components/notice/notice.wxss */
.tz{
    width: 95%;
    height: 80rpx;
    background-color: white;
    margin-top: 20rpx;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
}
.tz_zp{
    width: 50rpx;
    height: 50rpx;
    margin-top: 15rpx;
    margin-left: 10rpx;
    float: left;
}
.tz_zp image{
    width: 100%;
    height: 100%;
}
.swiper-news-top{
    width: 550rpx;
    height: 80rpx;
    float: right;
    margin-top: 10rpx;
}
.swiper_item {
    font-size: 28rpx;
    font-weight: 700;
    line-height: 80rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 2px;
    text-align: center;
    color: #167BF9;
  }

// components/notice/notice.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        messageList:{
            type:Array,
            value:[]
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        messageList:[]
    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

5.request.js封装

在这里插入图片描述

// 配置的域名
const baseUrl = "http://localhost:3000" // 请求公共接口
 
// 封装请求
// 封装请求
module.exports = {
    request: (url, method, data) => {
        return new Promise((resolve, reject) => {
            wx.showLoading({
                title: '加载中',
            });
            wx.request({
                url: `${baseUrl}${url}`,
                data: data,
                method: method,
                header: {
                    'content-type': (method === 'GET') ? 'application/x-www-form-urlencoded' : 'application/json',
                    'Cookie': wx.getStorageSync('Cookie') || ''
                },
                success: (res) => {
                    // console.log('原始响应:', res); // 打印原始响应
                    if (res.statusCode === 200) {
                        // 处理 Cookie
                        if (res.cookies && res.cookies.length > 0) {
                            wx.setStorageSync('Cookie', res.cookies[0]); // 存储 Cookie
                        }
                        // 成功返回值
                        // console.log('返回数据:', res.data); // 打印返回的数据
                        if (res.data.code === 200) {
                            resolve(res.data); // 确保这里返回的是 data
                        } else {
                            wx.showToast({
                                title: res.data.message || '请求失败',
                                icon: 'none'
                            });
                            reject(res.data.message);
                        }
                    } else {
                        wx.showToast({
                            title: '请求失败，请稍后再试',
                            icon: 'none'
                        });
                        reject('请求失败');
                    }
                },
                fail: (error) => {
                    console.error('请求失败:', error); // 打印请求失败的错误
                    wx.showToast({
                        title: '网络错误，请检查网络',
                        icon: 'none'
                    });
                    reject(error);
                },
                complete: () => {
                    setTimeout(() => {
                        wx.hideLoading();
                    }, 100);
                },
            });
        });
    },
}

6.api

在这里插入图片描述

const {
    request
} = require('../utils/request')
 
//基于业务封装的接口
module.exports = {
    // 获取轮播图
login: (data) => {
    return request('/login/login', 'POST',data);
 }
}

7.time.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(':')}`
  }
  
  function getLastSevenDays() {
    const dates = [];
    const today = new Date();
    
    for (let i = 0; i < 7; i++) {
        const pastDate = new Date(today);
        pastDate.setDate(today.getDate() - i);
        const month = String(pastDate.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
        const day = String(pastDate.getDate()).padStart(2, '0'); // 获取日期并补零
        dates.push(`${month}-${day}`); // 格式化为 MM-DD
    }
    
    return dates;
}
function getLastSevenDaysALL() {
    const dates = [];
    const today = new Date();
    
    for (let i = 0; i < 7; i++) {
        const pastDate = new Date(today);
        pastDate.setDate(today.getDate() - i);
        const formattedDate = pastDate.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
        dates.push(formattedDate);
    }
    
    return dates;
}
  const formatNumber = n => {
    n = n.toString()
    return n[1] ? n : `0${n}`
  }    
  //获取星期
  const getWeekByDate = dates => {
    let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
    let date = new Date(dates);
    date.setDate(date.getDate());
    let day = date.getDay();
    return show_day[day];
  }
  
  module.exports = {
    formatTime: formatTime,
    getLastSevenDays:getLastSevenDays,
    getWeekByDate: getWeekByDate,
    getLastSevenDaysALL:getLastSevenDaysALL
  }