微信小程序实战之菜谱小程序
最近突发奇想,想要自己搞个小程序玩儿玩儿,但是鉴于自己是搞后端服务器出身,对于偏前端的微信小程序开发实在是一知半解,尤其是对于css类样式相关,更是无从下手,于是乎,只能从晚上找了一个demo,对其进行了一番改造,然后进行上线,也算是基本完整的走了一遍小程序开发的简单流程,本篇文章就是对这次实践的简单介绍。
先放个二维码压压惊~
原文地址:http://www.darylliu.cn/archives/8c5b0112.html
原文地址:http://www.darylliu.cn/archives/8c5b0112.html
原文地址:http://www.darylliu.cn/archives/8c5b0112.html
调研
在开发之前,本人对微信小程序开发流程进行了一个简单调研,调研发现,开发者分为个人开发者和企业开发者,企业开发者除了比个人开发者能够使用更多的基础功能之外,能够被微信团队允许开放的领域范围也更加广泛。具体可参考如下:
- 个人开发者
- 非个人开发者
本人作为标准穷人一枚,肯定是交不起非个人开发者几百元的申请费的,于是乎只能从个人开发者允许开发的零星的小程序领域中选择了一个相对来说逻辑比较简单的类型--菜谱小程序,进行流程的开发。
项目介绍
最终完成的成品项目主要包含了以下几部分:
云函数
云函数是指在微信云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码,在该项目中主要是在登陆模块中用到了该功能。
数据库
微信云开发提供了一个json数据库,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。
本项目主要针对以下数据做了持久化:
- 菜谱(需批量导入)
- 菜谱分类列表(一条记录,手动添入即可)
- 收藏(根据用户操作,自动增加和删除)
- 搜索历史(根据用户操作,自动增加和删除)
以上几项中的菜谱数据,需要开发者预先填充一些数据(终于到了服务端大显身手的时候),本人写了个脚本,从网上简单爬取了一些。
爬虫地址如下:
爬虫地址
有兴趣的朋友改改直接使用~
业务逻辑
- 首页:主要包括了各个类别菜谱的展示,可以根据不同的类别跳转到每一类别的菜谱列表页
- 搜索:精确搜索,实现原理是根据数据库中的类别列表进行匹配,在搜索的同时会把搜索历史记录下来。点击搜索结果,挑战菜谱列表页
- 菜谱类别列表:对菜谱进行大类别划分
- 个人页:主要展示个人用户头像以及收藏菜谱的列表
- 菜谱详情页:包括一道菜的,简单介绍,图片,步骤,配料,辅料等元素
代码大致结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
├── README.md ├── project.config.json // 项目配置文件 └── cloudfunctions | 云环境 // 存放云函数目录 │ └── login // 云函数 │ ├── index.js │ └── package.json └── miniprogram ├── images // 存放小程序图片 ├── pages // 存放小程序各种页面 | ├── index // 首页 | └── menu // 菜单页 | └── user // 用户中心 | └── search // 搜索页 | └── list // 列表页 搜索结果页 | └── detail // 详情页 | └── databaseGuide // 数据库指导页 | └── chooseLib // 提示页 | └── storageConsole // 文件上传提示 ├── style // 样式文件目录 ├── app.js // 小程序公用逻辑 ├── app.json // 全局配置 ├── app.wxss // 全局样式 |
代码地址如下:
代码地址
鸣谢
本次使用demo主要是在 github上找到的开源项目,借鸡下蛋,十分感谢!
demo地址
微信小程序实战之菜谱小程序相关推荐
- 小程序实战—答题类小程序
让我们在项目实战中学习微信小程序开发!(关注我,获取更多小程序~) 你玩过百万英雄.冲顶大会吗?这种答题类的小程序(前端)其实很简单... 今天就给大家介绍这样的可以霸占头条的答题类小程序 1.先看效 ...
- CSS样式小项目实战 - 网页变色小按钮
小项目练手实战 - 变色小按钮 [背景分析] 为了满足用户体验,提高项目网页的视觉冲击力,各大网站上都有一些有颜色的按钮,当鼠标划上去的时候会变色,让用户的体验非常好.为了满足用户需求,同时让代码效率 ...
- 微信小程序实战篇:实现抖音评论效果
IT实战联盟博客:http://blog.100boot.cn 我们在写小程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的.本文教大家做一个抖音评论效果的小程序 首先看下 ...
- axure 小程序 网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程 课 程 简介 我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
- 微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
- 微信小程序,引爆新热点!JEECG社区小程序实战培训,业内首发,实战干货!
<JEECG社区微信小程序实战开发培训> -- 业内首发,实战干货 一.课程简介 微信小程序实战开发 QQ交流群:131894955 点击链接加入群[微信小程序开发群]:https:// ...
- 小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城,涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...
- 微信小程序实战 购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com ...
最新文章
- ubuntu终端按ctrl+s就卡住怎么办?(按ctrl+q)(锁住)(锁屏)(暂停打印)
- 【转】函数调用时堆栈变化
- KineticJS教程(3)
- php 时间错误,PHP xdebug调试trace记录时间错误
- request用法_虚拟语气的用法十一个考点:怎么考都在这里打转
- 有关计算机程序的论文,有关计算机程序的论文范文.doc
- Python学习week4-set集合
- aref无效 lisp_Common Lisp专题4:数组
- myloader还原恢复详解
- 简单使用WPE进行网页嗅探
- FileZilla Server使用实践
- 暮拾晨花,回望流年——我的2016
- Win64 驱动签名
- VS 显示方法引用的设置方法
- 毕业设计 Stm32人体心率血氧无线监测系统 - 单片机 物联网
- 异常(如何捕获和抛出异常,自定义异常)
- 追逐日月,不苟于山川。
- 【考前冲刺整理】20220812
- 为表中的某个字段添加check约束
- Python大作业之就诊卡管理信息系统[原创]