大家好，我是老张，一个立志做全栈开发的程人。 　　

　　生命不息，所以没有所谓的终点。 　　

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

　　项目介绍这是uni-app开发的在线教育系统，集视频、音频、图文于一体。市面上有很多知识付费系统，受疫情影响出现了大量在线教育系统。反正没关系，我开发是为了增加自己的技术。建成后会开源给大家学习。目前正在根据原型图进行开发。没错，原型图也是我设计的。是根据网上的一些原型调整改造的。本系统采用前端分离。使用前端uni-app服务器和PHP后端VUE进行开发，我是一个颜值控，虽然我并不擅长。哈哈，先看看首页吧！ 　　

　　自我感觉良好！毕竟是我的第一部小说。 　　

　　该主页的开发使用swiper组件开发carousel chart，使用liuyuno-tabs开发tab。最难的一点是转盘图下面的颜色区域。没错，搜索框的这部分就是切换后的颜色。当时也想用一张图，对设计师不友好，就让他根据图底颜色来切换。这样设计者只需要注意底部图片的颜色，就可以做到链接无缝。写这个大概花了我2个小时，因为工作忙经常加班，但是对于这个爱好前端的我来说，这个时间还是值得的。 　　

　　底部切换表格，根据上面的ID请求相应的接口获取数据进行渲染。其实这个不难。 　　

　　下面的页脚用的是thour组件，没错，这个主页就是我用组件拼接的。是否适用并不重要。等你有能力了，再慢慢优化。如果只是有想法，还是需要实践的。不要推，只管去做。 　　

　　把我的一些代码贴在下面，并请给我们你对缺点的意见。 　　

　　templateview class='page_edu '！-头部模块- view class='page_edu_header '！-头部模块-view class=' content ' swiper class=' swiper-box ' : indicator-dots=' indicator dots ' : autoplay=' autoplay ' : interval=' interval ' : duration=' swiper-item v-for='(item，index)in info ' : key=' index ' view class=' swiper-item ' 3360 style=' { background : item。' color class } ' image class=' image '-搜索模组-view class=' header ' view class=' input ' image src='/static/search。' png ' class=' search '/image input type=' text ' value=' ' placeholder='请输入搜索的课程名称//查看/查看！-搜索模组-/查看！-头部模块- !-内容模组-view class=' page _ content ' view class=' WhatclssContent ' view class=' What _ edu _ tabs ' Liu yuno-tabs : config='默认配置' : abdata=' tabs '/view class=' course ' view class=' course-bottom ' view class=' course-bottom-list ' image src=' http://zs video86 ITN。cn/3aa 0200602105628774。png ' mode='课程标题/texttext共四课时text|/text2222人已学/textview class='mask '专栏/view/view view class=' course-bottom-list ' image src=' http://zs video。86 ITN。cn/3 aa0c 20200602105628774。' png ' mode=' aspectFit '/image text课程标题/texttext共四课时text|/text2222人已学/textview class='mask '专栏/view/view view class=' course-bottom-list ' image src=' http://zs video。86 ITN。cn/3 aa0c 20200602105628774。' png ' mode=' aspectFit '/image text课程标题/texttext共四课时text|/text2222人已学/textview class='mask '专栏/view/view view class=' course-bottom-list ' image src=' http://zs video。86 ITN。cn/3 aa0c 20200602105628774。' png ' mode=' aspectFit '/image text课程标题/texttext共四课时text|/text2222人已学/textview class='mask '专栏/view/view view class=' course-bottom-list ' image src=' http://zs video。86 ITN。cn/3 aa0c 20200602105628774。' png ' mode=' aspectFit '/image text课程标题/texttext共四课时text|/text2222人已学/textview class='mask '专栏/视图/视图/视图/视图/视图/视图/视图/视图/视图/模板总结做任何是不能光想，去做，万一实现了呢，及时没实现这个过程也是值得享受的。加油 　　

　　学习开发前端第一天。