微信小程序开发，诗词鉴赏app（一）_开源诗词小程序-CSDN博客

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/143501681

微信小程序开发，诗词鉴赏app（一）： https://blog.csdn.net/jky_yihuangxing/article/details/143501681
微信小程序开发，诗词鉴赏app，诗词推荐实现（二）：https://blog.csdn.net/jky_yihuangxing/article/details/143562367
微信小程序开发，诗词鉴赏app，诗词搜索实现（三）：https://blog.csdn.net/jky_yihuangxing/article/details/143566194
微信小程序开发，诗词鉴赏app，朝代分类实现（四）：https://blog.csdn.net/jky_yihuangxing/article/details/143672951
微信小程序开发，诗词鉴赏app，启动页3s倒计时实现（五）：https://blog.csdn.net/jky_yihuangxing/article/details/143730849

文章目录

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)

  }
})