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

在这里插入图片描述

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) {// 处理 Cookieif (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() + 1const 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-DDdates.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}