【wepy入門教程】48小時開發看美女微信小程序，萬花閣

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

準備

無論是作網站仍是作小程序，只要是To C，就少不了作內容，所以第一步依然是數據準備，從網上找到兩個網站：

1. https://www.mzitu.com/
2. http://www.umei.cc/

第一個網站內容過於色情，第二個還算中肯，因而開始個人爬蟲之旅。

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