從0開發豆果美食小程序——tag組件

效果圖

分析數據

本項目購買的是聚合數據菜譜大全接口，首次購買贈送1000次。

首先觀察一下接口返回的數據。

整個對象中包含 resultCode、reason 和 result 數組。result 數組中返回若干對象，每一個對象中包含 parentId、name 和 list 數組，list 對象數組中，每一個對象包含 id、 name 和 parentId。

返回的數據中包含了不少分類，本項目只選擇其中 5 個，parentId 爲 10001，10003，10005，10009 和 10012。

處理數據

爲方便組件的渲染，在分類頁面對返回的數據進行處理再傳給組件。

域名設置

使用 wx.request 發起請求，在發請求以前，須要對域名進行設置，這樣小程序才能和指定域名進行網絡通訊。文檔詳情

模塊化

一方面，將配置都寫在統一的文件中，這樣往後若是修改配置相關的項只須要到這一個文件中去改。

另外一方面，咱們不但願別人知道咱們的 appKey，若是 appKey 對外公開，也就意味着其餘人可以盜用咱們的請求次數。在根目錄下建立 config.js，在該文件下定義 appKey，在其餘文件中引用這個常量。在 git 提交的時候選擇忽略這個文件。模塊化文檔詳情

在 config.js 下編寫以下代碼。

const appKey = 'xxxxxxxxxxxxxxxxxx';

module.exports= appKey;

在 classify 文件夾下的 index.js 中添加以下語句。注意：require 中只能寫相對路徑。

var appKey = require('../../config.js');

發起請求

將咱們要訪問的地址定義在常量 classifyURL 中，在 onLoad 中調用 handleResult 發起請求。這裏沒有將發起請求直接寫在 onLoad 中，由於 onLoad 中可能還要處理其餘事情。

在 handleResult 中使用 wx.request 發請求，success 中的 this 指向已經改變，不是當前頁面的 this，要在發請求以前保存一下 this，let self = this;。

因爲這裏只須要 parentId 爲 10001，10003，10005，10009 和 10012 的標籤，它們在 result 數組中對應的數組下標是 0, 2, 4, 8, 11，將以上數據存到 tagList 中。

const classifyURL = 'https://apis.juhe.cn/cook/category?key=';

data: {
    tagList: [],
},

onLoad: function(options) {
    this.handleResult();
},

    handleResult(){
        let self = this; // 注意！
        wx.request({
            url: classifyURL + appKey,
            data: {
                result: []
            },
            success: function (res) {
                const tempList = []
                const ids = [0, 2, 4, 8, 11];
                ids.map(i => tempList.push(res.data.result[i]));
                self.setData({
                    tagList: tempList
                })
                console.log(self.data.tagList)
            }
        });
    },

組件結構

組件的結構設計要從數據入手。tagList 中的 name 做爲一大類的 title ，這裏的 title 分別是菜式菜品、時令食材、場景、西點和人羣。在每個大類中有若干小類，菜式菜品的下屬類別有：家常菜、快手菜、創意菜、素菜、涼菜、烘焙、麪食、湯和自制調味料。

那麼將容器劃分爲兩部分，類別和類別下的若干分類。

<view wx:for="{{List}}" wx:key="index" class="container">
    <view class='title-wrapper'>
        <text class='title'>{{item.name}}</text>
    </view>
    <view class='tag-wrapper'>
        <view wx:for="{{item.list}}" wx:key="index" class='tag-item-wrapper'>
            <text class='tag-item'>{{item.name}}</text>
        </view>
    </view>
</view>

這裏的 List 由頁面傳來，也就是 tagList。

Component({
    properties: {
        List: {
            type: Array,
            value: [],
        },
    },
});

注意：

<view wx:for="{{List}}" wx:key="index" class="container">
    <view class='title-wrapper'>
        <text class='title'>{{item.name}}</text>
    </view>

此處的 item 指的是 {parentId: "10001", name: "菜式菜品", list: Array(9)}

<view wx:for="{{item.list}}" wx:key="index" class='tag-item-wrapper'>
    <text class='tag-item'>{{item.name}}</text>
</view>

此處的 item 指的是 {id: "1", name: "家常菜", parentId: "10001"}

組件樣式

對於樣式的設定，要注意子代關係。container 的只系子代是 title-wrapper 和 tag-wrapper，一共有 5 個 title-wrapper 、tag-wrapper，每組標籤有本身的顏色。

.container {
    width: 750rpx;
}

.container:nth-child(1) {
    color: #a5d6a7;
}

.container:nth-child(2) {
    color: #ff5252;
}

.container:nth-child(3) {
    color: #64b5f6;
}

.container:nth-child(4) {
    color: #ffb74d;
}

.container:nth-child(5) {
    color: #9575cd;
}

.container .title-wrapper {
    text-align: center;
    margin: 40rpx;
}

.container .title {
    color: #000;
    font-size: 38rpx;
}

.container .tag-wrapper {
    margin: 30rpx 80rpx;
}

.container .tag-item-wrapper {
    display: inline-block;
    margin: 20rpx 0 20rpx 18rpx;
}

.container .tag-item {
    padding: 10rpx 25rpx;
    font-size: 32rpx;
}

.container:nth-child(1)>.tag-wrapper>.tag-item-wrapper>.tag-item {
    border: 1rpx solid #a5d6a7;
    border-radius: 40rpx;
}

.container:nth-child(2)>.tag-wrapper>.tag-item-wrapper>.tag-item {
    border: 1rpx solid #ff5252;
    border-radius: 40rpx;
}

.container:nth-child(3)>.tag-wrapper>.tag-item-wrapper>.tag-item {
    border: 1rpx solid #64b5f6;
    border-radius: 40rpx;
}

.container:nth-child(4)>.tag-wrapper>.tag-item-wrapper>.tag-item {
    border: 1rpx solid #ffb74d;
    border-radius: 40rpx;
}

.container:nth-child(5)>.tag-wrapper>.tag-item-wrapper>.tag-item {
    border: 1rpx solid #9575cd;
    border-radius: 40rpx;
}

頁面 json

{
    "usingComponents": {
        "ck-tags": "/components/tags/index"
    }
}

頁面 wxml

<ck-tags List="{{tagList}}"></ck-tags>

結束語

至此，tag 組件已完成初步開發。