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

准备

不管是做网站还是做小程序，只要是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. Java：安装新版本Java、环境配置

    最新版2021年版 Java安装目录 2.在系统变量中设置2项属性,JAVA_HOME.PATH(大小写无所谓),若已存在这点击编辑,不存在则新建 参数为: JAVA_HOME:   D:\Java\ ...

  2. JZ-058-对称的二叉树

    对称的二叉树 题目描述 请实现一个函数,用来判断一棵二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 题目链接: 对称的二叉树 代码 /** * 标题:对称的二叉树 ...

  3. 穿透、击穿、雪崩…Redis这么多问题，如何解决？

    摘要:什么是缓存穿透?什么是缓存击穿,又什么是缓存雪崩呢?它们是如何造成的?又该如何解决呢?今天,我们就一起来探讨这些问题. 本文分享自华为云社区<[高并发]什么是缓存穿透?击穿?雪崩?如何解决 ...

  4. laravel redis操作大全

    字符串操作 普通得set/get操作,set操作,如果键名存在,则会覆盖原有得值 $redis = app("redis.connection"); $redis->set( ...

  5. Net中委托之一

    1.委托的用法 委托是一种特殊的类型 a. 委托可以类外定义,也可以在类里面定义 b. 委托的操作步骤 1.委托的声明 2.委托的实例化 3.委托的调用 2.委托实例 amespace MyDeleg ...

  6. java 和groovy的混合使用

    在应用中,我们可以在一个Java类.一个Groovy类或者一个Groovy脚本中实现某个特定功能.之后可以在Java类.Groovy类或Groovy脚本中调用该功能. 在groovy 使用groovy ...

  7. 6月15日 python学习总结 Django模板语言相关内容

    Django模板语言相关内容   Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...

  8. MySQL — 数据查询语言

    目录 1.基础查询 2.条件查询 3.分组查询 4.排序查询 5.分页查询 6.多表查询 6.1.连接查询 6.1.1.内连接 6.1.2.外连接 6.1.3.自连接 6.1.4.联合查询 6.2.子 ...

  9. vs 2019 社区版 .net core 5.0 之 .net core ef 迁移问题方案

    问题一:Add-Migration 时出现 此类问题一般都是模型类主键标识问题增加KEY即可解决 报错: The entity type 'xxxx' requires a primary key t ...

  10. PHP--腾讯云服务器上部署LNMP环境

    本文参考 云服务器上部署Laravel的实例教程 腾讯云 创建 Laravel5.4 项目 阿里云服务器部署php的laravel项目,在阿里云买ECS 搭建 Linux+Nginx+Mysql+PH ...