效果图

严选是豆果美食的另一个小程序，在本项目中将严选忽略，只做首页、分类和收藏。

创建项目

创建一个空项目，不选择快速模板。项目名称为 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({});

运行结果

至此，项目搭建工作已完成。

数据接口

聚合数据

常用工具

图标 iconfont

json 解析