效果图
严选是豆果美食的另一个小程序，在本项目中将严选忽略，只做首页、分类和收藏。
创建项目
创建一个空项目，不选择快速模板。项目名称为 cookbook。
目录规划
页面中的搜索、列表、菜谱详情封装成组件，以便于更好地复用和维护。
配置
首先在根目录下创建以上三个文件。
app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。该文件下的配置参考 。以下列出本项目中的 app.json 的配置。
pages：pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
tabBar：底部 tab 切换页面，tabBar 中的 list 是一个数组，最少配置2个、最多5个，tab 按数组的顺序排序。
{ "pages": [ "pages/homepage/index", "pages/classify/index", "pages/collect/index", "pages/search/index", "pages/detail/index", "components/search/index", "components/tags/index", "components/card/index", "components/detail/index", "components/listItem/index" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "菜谱", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false }, "tabBar": { "list": [ { "pagePath": "pages/homepage/index", "text": "首页", "selectedColor": "#000000", "iconPath":"https://segmentfault.com/img/homepage.png", "selectedIconPath":"https://segmentfault.com/img/homepage_selected.png" }, { "pagePath": "pages/classify/index", "text": "分类", "selectedColor": "#000000", "iconPath": "https://segmentfault.com/img/classify.png", "selectedIconPath": "https://segmentfault.com/img/classify_selected.png" }, { "pagePath": "pages/collect/index", "text": "收藏", "selectedColor": "#000000", "iconPath": "https://segmentfault.com/img/collect.png", "selectedIconPath": "https://segmentfault.com/img/collect_selected.png" } ] }} 注册页面
一个页面由四个文件组成，在 pages 内的每个文件夹下创建这四个文件。
index.json
对当前页面的配置，在该文件中先放入一个空对象。
{} index.js
Page( ) 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
pages 目录下的所有 index.js 文件中Page( ) 函数内先放入一个空对象。
Page({}) 注册组件
index.json
{ "component": true} index.js
Component({}); 运行结果
至此，项目搭建工作已完成。