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

最近突发奇想，想要自己搞个小程序玩儿玩儿，但是鉴于自己是搞后端服务器出身，对于偏前端的微信小程序开发实在是一知半解，尤其是对于css类样式相关，更是无从下手，于是乎，只能从晚上找了一个demo，对其进行了一番改造，然后进行上线，也算是基本完整的走了一遍小程序开发的简单流程，本篇文章就是对这次实践的简单介绍。

先放个二维码压压惊～

调研

在开发之前，本人对微信小程序开发流程进行了一个简单调研，调研发现，开发者分为个人开发者和企业开发者，企业开发者除了比个人开发者能够使用更多的基础功能之外，能够被微信团队允许开放的领域范围也更加广泛。具体可参考如下：

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

项目介绍

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

云函数

云函数是指在微信云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码，在该项目中主要是在登陆模块中用到了该功能。

数据库

微信云开发提供了一个json数据库，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。

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

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

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

爬虫地址如下：
爬虫地址

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

业务逻辑

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

代码大致结构：

├── 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地址