說明：本文只做小程式的開發過程記錄；小程式僅供學習參考，嚴禁用於商業及非法用途

準備

不管是做網站還是做小程式，只要是To C，就少不了做內容，因此第一步依然是資料準備，從網上找到兩個網站：

Step1 資料獲取-8小時

爬蟲框架是基於scrapy實現：

• GitHub：圖片爬蟲，z1工程是爬取網站文章的，z2工程正是本專案的爬蟲
• 成功從目標網站抓取40GB的資料，7K+圖集，30w+圖片
• 圖片抓過來需要放到阿里雲伺服器，但是阿里雲伺服器只有40GB的系統盤，全放上去空間不夠，於是對圖片做了壓縮裁剪，方法見common目錄，優化之後大概還有15GB大小，滿足需求

Step2 後端介面開發，4小時

基於springboot4.0+mybatis，輕鬆實現三個介面，分別是：

• 隨機從資料庫裡提取10組圖片
• 點選圖片增加圖片的評分
• 根據圖片的評分獲取圖片
• 刪除圖片
• 根據圖片ID獲取圖片
  本工程和上一個小程式值得讀讀共有一個後端程式，只是增加了一些介面。可通過wanhg目錄與此前的程式進行區分
  GitHub：後端API

Step3 前段web開發，12小時

基於vue2.0+elementUI+axios，做了前臺展示及後臺管理頁面

• 前臺根據分類獲取圖片進行展示
• 後臺根據分類進行圖片展示，可以刪除、預覽
• 圖片標籤管理頁面，稽核控制頁面

GitHub：web前端
最後一個簡約純前端的頁面就出來啦！
訪問：

Step4 小程式開發，24小時

基於wepy框架開發，有三個tab頁，分別是推薦，熱榜，我的
實現的功能有

• 推薦頁面每次觸底隨機獲取10組圖片
• 點選圖集，進入圖片預覽，每點選一次在熱榜的權重加2分
• 每收藏一次圖片，熱榜權重加5分
• 可點選收藏按鈕，就圖片收藏到我的頁面
• 轉發、分享
• 客服功能

GitHub：小程式原始碼

總結

第一次使用wepy開發小程式，確實比原生元件要好用，熟悉vue開發的同學很容易就上手了。
最後強烈推薦前段程式碼程式設計工具：VSCODE,寫程式碼神器
所有原始碼已在GitHub開源，Follow me