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

准备

不管是做网站还是做小程序，只要是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. curl 命令常用

    参考: https://www.cnblogs.com/name-lizonglin/p/12167808.html -- 测试 请求返回时间  测试Pod 之间解析时间   用key为空字符串查me ...

  2. 如何在hexo博客中在线阅读pdf

    前言 有一些资料或者笔记是pdf版本的,如果想要放在博客中进行阅读,那么就得将其转换为markdown格式或者html格式.但是这样转换后,其原pdf的格式就会混乱了,排版将会变得很困难,不过一山更比 ...

  3. LeetCode-099-恢复二叉搜索树

    恢复二叉搜索树 题目描述:给你二叉搜索树的根节点 root ,该树中的两个节点被错误地交换.请在不改变其结构的情况下,恢复这棵树. 进阶:使用 O(n) 空间复杂度的解法很容易实现.你能想出一个只使用 ...

  4. 【论文考古】量化SGD QSGD: Communication-Efficient SGD via Gradient Quantization and Encoding

    D. Alistarh, D. Grubic, J. Li, R. Tomioka, and M. Vojnovic, "QSGD: Communication-Efficient SGD ...

  5. transform方法适配页面大小

    function setCss() {       let App = document.getElementById("app"); // 获取到app节点 最外层的盒子     ...

  6. Hadoop3.x完全分布式搭建（详细）

    环境准备 vm虚拟机(自行安装Centos7系统) hadoop3.x安装包(linux版本) java1.8安装包(linux版本) 为了能够按照教程顺利操作,需要注意几点细节 不要不看文字直接复制 ...

  7. tp5.0 composer下载phpexcel 实现导出excel 表格

    tp5.0 composer下载phpexcel 实现导出excel 表格 1.在下载好的tp5.0 框架里面使用 composer 下载phpexcel 的插件 composer require p ...

  8. Vue的mvvm模式

    传统的MVC模式: Model:模型-->负责数据存储 View:视图-->负责页面展示 Control:控制器-->事件交互(根据视图与用户交互后改变数据) Vue的MVVM模式: ...

  9. Kubernetes系列(三) Deployment

    作者: LemonNan 原文地址: https://juejin.im/post/6865672466939150349/ Kubernetes 系列 Kubernetes系列(一) Pod Kub ...

  10. np.vectorize()和crosstab()和pivotTab（）函数解释

    numpy.vectorize(pyfunc, otypes=None, doc=None, excluded=None, cache=False, signature=None) Parameter ...