快捷搜索： 王者荣耀 C C语言 睡觉 图灵学院
IT技术分享网 > 微信小程序 > 微信小程序实战之菜谱小程序

微信小程序实战之菜谱小程序

微信小程序实战之菜谱小程序 562

先放个二维码压压惊～

调研

本人作为标准穷人一枚，肯定是交不起非个人开发者几百元的申请费的，于是乎只能从个人开发者允许开发的零星的小程序领域中选择了一个相对来说逻辑比较简单的类型－－菜谱小程序，进行流程的开发。

项目介绍

最终完成的成品项目主要包含了以下几部分：

云函数

数据库

本项目主要针对以下数据做了持久化：

  1. 菜谱(需批量导入)
  2. 菜谱分类列表(一条记录，手动添入即可)
  3. 搜索历史(根据用户操作，自动增加和删除)

以上几项中的菜谱数据，需要开发者预先填充一些数据(终于到了服务端大显身手的时候)，本人写了个脚本，从网上简单爬取了一些。

爬虫地址如下：

有兴趣的朋友改改直接使用～

业务逻辑

  1. 首页：主要包括了各个类别菜谱的展示，可以根据不同的类别跳转到每一类别的菜谱列表页
  2. 搜索：精确搜索，实现原理是根据数据库中的类别列表进行匹配，在搜索的同时会把搜索历史记录下来。点击搜索结果，挑战菜谱列表页
  3. 菜谱类别列表：对菜谱进行大类别划分
  4. 菜谱详情页：包括一道菜的，简单介绍，图片，步骤，配料，辅料等元素

代码大致结构：

  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上找到的开源项目，借鸡下蛋，十分感谢！


文章来自:IT技术分享网
分享地址:http://www.5ityx.cn/cate109/279496.html

微信小程序实战之菜谱小程序 相关内容

聚合标签

经验分享 程序员 微信小程序 职场和发展