文章目录
- 1. 项目功能思维导图
- 2. 项目涉及到的技术点
- 3. 开发环境
- 4. 项目运行效果
- 5. 部分功能实现
- 6. 关于本人其它项目的介绍
1. 项目功能思维导图
2. 项目涉及到的技术点
- 使用MySQL数据库实现数据存储
- 使用setInterval实现启动页3s倒计时
- 使用storage实现数据持久化存储（如记住密码，用户登录信息）
- 使用tabBar来实现主页底部导航栏
- 使用wx.request实现网络请求（数据通讯）
- 使用swiper实现轮播图
- 使用wx.uploadFile实现文件上传
使用springBoot搭建服务端使用elementUI+vue实现web端
温馨提示：
要做到小程序端，web端，数据互通，所以需要使用springBoot框架搭建自己的服务端，为什么需要有服务端？请看这里：https://blog.csdn.net/jky_yihuangxing/article/details/141026103
3. 开发环境
微信小程序端：
- 开发工具：微信开发者工具
- 开发语言：js
服务端：
- 开发工具：IDEA
- 开发语言：Java
- 开发框架：springBoot+Mybatis
web端：
- 开发工具：Vscode
- 开发环境：Nodejs
- Element UI +Vue 实现框架搭建
4. 项目运行效果
微信小程序端
web端
5. 部分功能实现
- 开屏页实现
splash.wxml布局
<view class="splash-container"><view class="jump-container"><text>{{seconds}} s | 跳过</text></view><view class="image-container"><image src="https://img2.baidu.com/it/u=1159849068,2456905319&fm=253&fmt=auto&app=138&f=PNG?w=243&h=243" mode="" /></view>
</view>
splash.wxss
.splash-container{display: flex;position: relative;
}.jump-container{width: 138rpx;height: 64rpx;line-height: 64rpx;background-color: #e6142c;border-radius: 39rpx;text-align: center;font-size: 24rpx;position:absolute;top: 168rpx;right: 20rpx;color: white;position: absolute;z-index: 100;
}.image-container{display: flex;width: 100vh;height: 100vh;justify-content: center;align-items: center;}.image-container image{width: 188rpx;height: 188rpx;border-radius: 50%;
}
splash.js
Page({/*** 页面的初始数据*/data: {seconds: 3},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.startJump()},//启动倒计时startJump() {const countdownTimer = setInterval(() => {if (this.data.seconds > 0) {this.setData({seconds: this.data.seconds - 1})} else {//取消由 setInterval 设置的定时器clearInterval(countdownTimer)//跳转到登录页面wx.reLaunch({url: '/pages/login/login',})}}, 1000)}
})
6. 关于本人其它项目的介绍
本人在b站录制的一些视频教程项目，免费供大家学习
- Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
- Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
- Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
