Uni-app实战知识付费系统-首页开发

hello 大家好，我是老张,一个立志于做全栈开发的程序猿。

人生是没有穷尽的，所以也就没有什么所谓的归宿。

上一篇文章介绍了uni-app 的一些介绍，下面我将介绍下这个使用uni-app知识付费系统

项目简介

这个是使用uni-app 开发的一个在线教育系统一个集视频，音频，图文为一体的在线教育系统，市面上有很多知识付费系统,由于疫情的原因出现了一大批的在线教育系统，无所谓反正我是为了增长自己的技术开发的,完成之后会开源出来，提供给大家学习。目前已经在根据原型图进行开发，没错，原型图也是我设计的，根据网上的一些原型进行调整改造，这个系统采用前后端分离。前端使用uni-app 服务端使用PHP 后端VUE 进行开发，我是一个颜值控，虽然我张的不咋的。哈哈下面先给大家一睹首页的风采吧！

自我感觉还不错吧！毕竟是自己的处女作

开发感悟

做这个首页的都采用了swiper组件来开发轮播图，liuyuno-tabs 来开发选项卡,其中感觉最难的一点就是轮播图下面的那块颜色区域，没错就是搜索框部分这个地方是切换的颜色，当时也想用一张图来搞，对于设计师来说不友好，于是让他根据图片最底部的颜色进行切换，这样设计师设计只需要注意底部的图片颜色即可，这样就能无缝链接，写这个大概花费了我2个小时的时间，由于工作比较忙，经常加班，但是对于这个爱好前端的我来说，这个时间还是值得的。

底下的就是table切换了，根据上面的ID去请求对应的接口获取数据进行渲染。这个其实不难

下面的页脚采用了thour组件，没错这个首页就是我用组件拼接的。无所谓适用就行，后面有能力了慢慢优化，光有想法不行，还是需要实践。别逼逼，动手就完了

下面粘贴下我的部分代码，不足之处大家多多指教。

<template>
	<view class="page_edu">
		<!-- 头部模块 -->
		<view class="page_edu_header">
			<!-- 头部模块 -->
			<view class="content" >
				<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :style="{background:item.colorClass}">
							<image class="image" :src="item.url" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 搜索模组 -->
			<view class="header">
				<view class="input">
					<image src="/static/search.png" class="search"></image>
					<input type="text" value="" placeholder="请输入搜索的课程名称" />
				</view>
			</view>
			<!-- 搜索模组 -->
		</view>
		<!-- 头部模块 -->
		<!-- 内容模组 -->
		<view class="page_content">
			<view class="WhatclssContent">
				<view class="What_edu_tabs">
					<liuyuno-tabs :config="defaultConfig" :tabData="tabs"  />
					<view class="course">
						<view class="course-bottom">
							<view class="course-bottom-list" >
								<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
								<text>课程标题</text>
								<text>共4课时<text>|</text>2222人已学</text>
								<view class="mask">专栏</view>
							</view>
							<view class="course-bottom-list"  >
								<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
								<text>课程标题</text>
								<text>共4课时<text>|</text>2222人已学</text>
								<view class="mask">专栏</view>
							</view>
							<view class="course-bottom-list" >
								<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
								<text>课程标题</text>
								<text>共4课时<text>|</text>2222人已学</text>
								<view class="mask">专栏</view>
							</view>
							<view class="course-bottom-list" >
								<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
								<text>课程标题</text>
								<text>共4课时<text>|</text>2222人已学</text>
								<view class="mask">专栏</view>
							</view>
							<view class="course-bottom-list" >
								<image src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" mode="aspectFit"></image>
								<text>课程标题</text>
								<text>共4课时<text>|</text>2222人已学</text>
								<view class="mask">专栏</view>
							</view>
						</view>
					</view> 
				 </view>
			</view>
		</view>
		
	</view>
</template>

总结

做任何是不能光想，去做，万一实现了呢，及时没实现这个过程也是值得享受的。加油
学习开发前端第一天。