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

准备

不管是做网站还是做小程序，只要是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. ACM训练，大理石在哪儿？

    int p = lower_bound(a, a+num, x) - a; //在已排序数组a中查找大于或等于x的第一个位置 lower_bound( )返回的是一个迭代器,-a相当于减去a的首地址, ...

  2. qt（一）

    一.Qt安装 qt离线安装地址:http://download.qt.io/archive/qt/ 参考教程:https://blog.csdn.net/u013934107/article/deta ...

  3. Python 并发编程（下）

    Python 并发编程(下) 课程目标:掌握多进程开发的相关知识点并初步认识协程. 今日概要: 多进程开发 进程之间数据共享 进程锁 进程池 协程 1. 多进程开发 进程是计算机中资源分配的最小单元: ...

  4. LeetCode-031-下一个排列

    下一个排列 题目描述:实现获取 下一个排列 的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须 原地 修 ...

  5. 操作系统以及python的简介

    今日笔记 操作系统 文件的概念 编程语言的发展史 编程语言的分类 python简介 python解释器的版本说明 内容详细 操作系统 ​ 操作系统(Operating System,简称OS),是管理 ...

  6. 使用 kubebuilder 创建并部署 k8s-operator

    一.准备 本文中的示例运行环境及相关软件版本如下: Kubernetes v1.16.3 Go 1.15.6 Kubebuilder 3.1.0 Docker 20.10.7 安装kubebuilde ...

  7. k8s集群StatefulSets的Pod优雅调度问题思考？

    k8s集群StatefulSets的Pod优雅调度问题思考 考点之你能解释一下为什么k8s的 StatefulSets 需要VolumeClaimTemplate嘛? 考点之简单描述一下Statefu ...

  8. SQL从零到迅速精通【查询利器】

    1.[列选取]从fruits表中获取f_name和f_price两列,T-SQL语句如下. SELECT f_name,f_price FROM fruits; 2.[去重]查询fruits表中s_i ...

  9. Nginx多个域名配置ssl证书出错解决方案

    解决方案一: 验证通配符 SSL 证书 当涉及通配符 SSL 证书时,NET::ERR_CERT_COMMON_NAME_INVALID 错误会变得稍微复杂一些. 这种类型的证书旨在加密多个子域的数据 ...

  10. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...