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

code袁2025-01-13 6:05

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

🦁作者简介 ：一名喜欢分享和记录学习的在校大学生

💥个人主页 ：code袁的博客

💥 个人QQ ：2647996100

🐯 个人wechat ：code8896
code袁系列专栏导航
1 .《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2. 《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3. 《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

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

文章目录

B站 教学视频

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

1.底部导航栏

java 复制代码 
"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页面引入组件
java 复制代码 
{
  "usingComponents": {
    "swiper":"../../components/swiper/swiperImg"
  }
}

3.轮播图的封装

java 复制代码 
<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>
java 复制代码 
.banner{
    width: 96%;
    height: 350rpx;
    margin: 15rpx auto;
    border-radius: 20rpx
}
.swip_main{
    width: 100%;
    height: 100%;
}
java 复制代码 
// components/swiper/swiperImg.js
Component({

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

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

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

4.通知栏的封装

java 复制代码 
<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>
java 复制代码 
/* 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;
  }
java 复制代码 
// components/notice/notice.js
Component({

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

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

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

    }
})

5.request.js封装

java 复制代码 
// 配置的域名
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

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

7.time.js封装

java 复制代码 
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
  }

🎉写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

相关推荐
Cikiss1 小时前
Git 基础——《Pro Git》
git·后端·源代码管理
多多*1 小时前
后端技术选型 sa-token校验学习 下 结合项目学习 前后端登录
java·redis·git·学习·github·intellij-idea·状态模式
微臣愚钝2 小时前
【git】-3 github创建远程仓库,上传自己的项目，下载别人的项目
git·github
计算机徐师兄4 小时前
Java基于SSM框架的在线视频教育系统小程序【附源码、文档】
java·小程序·在线视频教育系统小程序·在线视频教育·在线视频教育微信小程序·视频教育
儿鱼11 小时前
uni-app支付宝、微信小程序实现拨打电话uni.makePhoneCall
微信小程序·小程序·uni-app
会发光的猪。13 小时前
uniapp小程序中隐藏顶部导航栏和指定某页面去掉顶部导航栏小程序
前端·小程序·uni-app
LostSpeed14 小时前
git - 用SSH方式迁出远端git库
git·ssh
fury_12314 小时前
js：根据后端返回数据的最大值进行计算然后设置这个最大值为百分之百，其他的值除这个最大值
git
多多*16 小时前
新版本的IDEA如何解决Git分支显示为警告⚠＜unknown＞的问题
java·git·intellij-idea
热门推荐
01密码学原理技术-第六章-introduction to pulibc-key cryptography02ESP-IDF学习记录（4） ESP-IDF examples目录03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04模型、算法、数据模型、模型结构是什么？它们之间有什么关联和区别？05Dell服务器升级ubuntu 22.04失败解决06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07PyTorch到C++再到 CUDA 的调用链（C++ ATen 层） ：以torch._amp_update_scale_调用为例08渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了09HCIA-datacom数通题库和录播视频资料10基于机器学习的旅游景区评论情感分析算法设计与实现