【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