从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 组件已完成初步开发。