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" :class="lazyload" data-src="item.url" src="/assets/loading.gif" mode="aspectFill" />
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <!-- 搜尋模組 -->
            <view class="header">
                <view class="input">
                    <image class="lazyload" data-src="/static/search.png" src="/assets/loading.gif" 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 class="lazyload" data-src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" src="/assets/loading.gif" mode="aspectFit"></image>
                                <text>課程標題</text>
                                <text>共4課時<text>|</text>2222人已學</text>
                                <view class="mask">專欄</view>
                            </view>
                            <view class="course-bottom-list"  >
                                <image class="lazyload" data-src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" src="/assets/loading.gif" mode="aspectFit"></image>
                                <text>課程標題</text>
                                <text>共4課時<text>|</text>2222人已學</text>
                                <view class="mask">專欄</view>
                            </view>
                            <view class="course-bottom-list" >
                                <image class="lazyload" data-src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" src="/assets/loading.gif" mode="aspectFit"></image>
                                <text>課程標題</text>
                                <text>共4課時<text>|</text>2222人已學</text>
                                <view class="mask">專欄</view>
                            </view>
                            <view class="course-bottom-list" >
                                <image class="lazyload" data-src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" src="/assets/loading.gif" mode="aspectFit"></image>
                                <text>課程標題</text>
                                <text>共4課時<text>|</text>2222人已學</text>
                                <view class="mask">專欄</view>
                            </view>
                            <view class="course-bottom-list" >
                                <image class="lazyload" data-src="http://zsvideo.86itn.cn/3aa0c20200602105628774.png" src="/assets/loading.gif" mode="aspectFit"></image>
                                <text>課程標題</text>
                                <text>共4課時<text>|</text>2222人已學</text>
                                <view class="mask">專欄</view>
                            </view>
                        </view>
                    </view>
                 </view>
            </view>
        </view>

    </view>
</template>

總結

做任何是不能光想，去做，萬一實現了呢，及時沒實現這個過程也是值得享受的。加油
學習開發前端第一天。