说明：本文只做小程序的开发过程记录；小程序仅供学习参考，严禁用于商业及非法用途

准备

不管是做网站还是做小程序，只要是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

【wepy入门教程】48小时开发看美女微信小程序，万花阁的更多相关文章

  1. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  2. 微信小程序的开发：通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...

  3. 小程序开发运营必看：微信小程序平台运营规范

    一.原则及相关说明 ​ 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ​ 微信团队一 ...

  4. 零基础开发一款微信小程序商城

    零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...

  5. 1万字！彻底看懂微信小程序

    Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个 ...

  6. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(34)-Fiddler如何抓取微信小程序的包-上篇

    1.简介 有些小伙伴或者是童鞋们说小程序抓不到包,该怎么办了???其实苹果手机如果按照宏哥前边的抓取APP包的设置方式设置好了,应该可以轻松就抓到包了.那么安卓手机小程序就比较困难,不是那么友好了.所 ...

  7. 支付宝小程序开发之与微信小程序不同的地方

    前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...

  8. 规范抢先看！微信小程序的官方设计指南和建议

    基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支 ...

  9. 开发 | 如何在微信小程序的页面间传递数据？

    我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法. 本期,知晓程序(微信号 zxcx0101)为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有 ...

随机推荐

  1. Qt：QJsonParseError

    0.说明 QJsonParseError用于JSON解析时报告error. 1.模块和加载项 Header #include<QJsonParseError> qmake QT += co ...

  2. C++ 删除一个字符串中的指定字符

    Q:一个数字是以xxx,yyy,zzz的字符串形式存储的,将逗号消去并转化为整数输出 方法一:char数组,即定义时s1定义为 char s1[20]的形式: //删除输入字符串中的逗号,并构建新串 ...

  3. Python：用正则表达式，提取字符串中的所有中文

    import re def clean(line): pattern = re.compile(u'[^\u4e00-\u9fa5]') #中文的范围为\u4e00-\u9fa5 line = re. ...

  4. C/C++字符串反转的N种方法

    0x00 自己写一个 // 第一种 std::string reverse(std::string str) { std::string res(""); for (int i = ...

  5. Jmeter计数器实现自增功能

    如果需要引用的数据量较大,且要求不能重复或者需要自增,那么可以使用计数器来实现 如:新增功能,要求名称不能重复 1,新增计数器 计数器:允许用户创建一个在线程组之内都可以被引用的计数器. 计数器允许用 ...

  6. MySQL 中如何归档数据

    归档,在 MySQL 中,是一个相对高频的操作. 它通常涉及以下两个动作: 迁移.将数据从业务实例迁移到归档实例. 删除.从业务实例中删除已迁移的数据. 在处理类似需求时,都是开发童鞋提单给 DBA, ...

  7. CF1385G口胡

    只能说很神秘??? 首先观察题面,假设给出的第一个序列为 \(a\),第二个序列为 \(b\).对于 \((a_i,b_i)\) 我们连一条边. 得到的是一个 \(n\) 个点 \(n\) 条边的不一 ...

  8. HCNP Routing&Switching之组播技术-组播分发

    前文我们了解了组播技术中的igmp-snooping相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15860484.html:今天我们来聊一聊组播技术 ...

  9. AQS详解之独占锁模式

    AQS介绍 AbstractQueuedSynchronizer简称AQS,即队列同步器.它是JUC包下面的核心组件,它的主要使用方式是继承,子类通过继承AQS,并实现它的抽象方法来管理同步状态,它分 ...

  10. How to Rebase Git Branch

    转自:How to Rebase Git Branch (with 3 steps) | Git Rebase | W3Docs Steps to rebasing branch Fetching c ...