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

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

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

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

项目简介

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

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

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

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

开发感悟

做这个首页的都采用了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>

总结

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

阅读剩余
THE END