从0开发豆果美食小程序——项目搭建

效果图

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

创建项目

创建一个空项目，不选择快速模板。项目名称为 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":"/img/homepage.png?x-oss-process=style/thumb",
            "selectedIconPath":"/img/homepage_selected.png"
        },
        {
            "pagePath": "pages/classify/index",
            "text": "分类",
            "selectedColor": "#000000",
            "iconPath": "/img/classify.png",
            "selectedIconPath": "/img/classify_selected.png"
        },
        {
            "pagePath": "pages/collect/index",
            "text": "收藏",
            "selectedColor": "#000000",
            "iconPath": "/img/collect.png",
            "selectedIconPath": "/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 解析