從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",
                "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 解析