仿“香哈菜谱”微信小程序（第4章）

一、底部标签导航设计
1、新建一个香哈菜谱“xhcp”项目
2、将准备好的底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图片图片复制到pages文件夹下
3、打开app.json配置文件，在pages数组里添加5个页面路径：
“pages/cook/cook”“pages/headline/headline”“pages/food/food”“page
s/message/message”“pages/me/me”

"pages":[
    "pages/cook/cook",
    "pages/headline/headline",
    "pages/food/food",
    "pages/message/message",
    "pages/me/me"
  ],

4、在window数组里配置窗口导航背景颜色为灰色（#494949）、导航栏文字为“学做菜”、字体颜色为白色（white）

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#505050",
    "navigationBarTitleText": "学做饭",
    "navigationBarTextStyle":"white"
  },

5、在tabBar对象里配置底部标签导航背景色为白色（#ffffff）、文字默认颜色为灰色（#999999）、选中时为红色（#CC1004）。在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标

"tabBar": {

    "backgroundColor": "#fff",
    "color":"#999",
    "selectedColor": "#cc1004",
    "borderStyle": "black",
    "list": [
        {
            "pagePath":"pages/cook/cook",
            "text": "学做菜",
            "iconPath": "pages/images/tab/cook-0.jpg",
            "selectedIconPath": "pages/images/tab/cook-1.jpg"
        },
        {
            "pagePath":"pages/headline/headline",
            "text": "头条",
            "iconPath": "pages/images/tab/headline-0.jpg",
            "selectedIconPath": "pages/images/tab/headline-1.jpg"
        },
        {
            "pagePath":"pages/food/food",
            "text": "美食圈",
            "iconPath": "pages/images/tab/food-0.jpg",
            "selectedIconPath": "pages/images/tab/food-0.jpg"
        },
        {
            "pagePath":"pages/message/message",
            "text": "消息",
            "iconPath": "pages/images/tab/message-0.jpg",
            "selectedIconPath": "pages/images/tab/message-1.jpg"
        },
        {
            "pagePath":"pages/me/me",
            "text": "我的",
            "iconPath": "pages/images/tab/me-0.jpg",
            "selectedIconPath": "pages/images/tab/me-1.jpg"
        }
    ]
  }
}

二、宫格导航设计
1、进入pages/cook/cook.wxml文件，先设计海报轮播区域。采用一张图片来进行布局，图片的宽度设置为100%，高度设置为230px

<view class="content">
    <view class="img">
        <image src="../images/haibao/haibao-1.jpg" style="width: 100%;height:230px;"></image>
    </view>

2、设计宫格导航。分为4个导航：“菜谱分类”“视频”“美食养生”“闪购”。每
个导航对应一个图标。在导航的下面是灰色的间隔线

<view class="nav">
        <view class="nav-item">
            <!-- 第一个 -->
            <view>
                <image src="../images/icon/fenlei.jpg" style="width: 25px;height:23px;"></image>
            </view>
            <view>菜谱分类</view>
        </view>
        <!-- 第二个 -->
        <view class="nav-item">
            <view>
                <image src="../images/icon/shipin.jpg " style="width: 25px;height:23px;"></image>
            </view>
            <view>视频</view>
        </view>
        <!-- 第三个 -->
        <view class="nav-item">
            <view>
                <image src="../images/icon/meishi.jpg" style="width: 25px;height:23px;"></image>
            </view>
            <view>美食养生</view>
        </view>
        <!-- 第四个 -->
        <view class="nav-item">
            <view>
                <image src="../images/icon/shangou.jpg" style="width: 25px;height:23px;"></image>
            </view>
            <view>闪购</view>
        </view>
    </view>

3、进入
pages/cook/cook.wxss文件，针对宫格导航添加样式

.nav{
    display: flex;
    flex-direction: row;
    text-align: center;
}
.nav-item{
    width: 25%;
    margin-top: 20px;
    font-size: 12px;
}
.hr{
    height: 15px;
    background-color: #cccccc;
    margin-top: 15px;
    opacity: 0.2;
}

三、香哈头条初始化数据
1、作为客户端，微信小程序的数据来源于服务端。下面模拟服务端提供的香哈头条列表的数据。有了数据，页面才能动态地进行渲染。
2、进入pages/cook/cook.js文件，添加initData函数，在data页面初始化数据
里添加array数组，然后将initData定义的数据通过setData设值函数赋值给
array数组。

Page({
    data: {
array:[]
    },
    onLoad:function(options) {
        var array = this.initData();
        this.setData({array:array});
    },
    initData:function(){
        var array = [];
        var object1 = new Object();
        object1.img = '../images/list/food-2.jpg';
        object1.title='爱心早餐';
        object1.type='健康人生';
        object1.liulan='99+浏览';
        object1.pinglun='99+评论';
        array[0] = object1;

        var object2 = new Object();
        object2.img = '../images/list/food-3.jpg';
        object2.title='困了就喝咖啡';
        object2.type='家庭医生在线';
        object2.liulan='99+浏览';
        object2.pinglun='99+评论';
        array[1] = object2;

        var object3 = new Object();
        object3.img = '../images/list/food-4.jpg';
        object3.title='小黄人大白狗';
        object3.type='家庭医生在线';
        object3.liulan='99+浏览';
        object3.pinglun='99+评论';
        array[2] = object3;

        var object4 = new Object();
        object.img = '../images/list/food-5.jpg';
        object4.title='爸爸去哪儿';
        object4.type='广告';
        object4.liulan='99+浏览';
        object4.pinglun='99+评论';
        array[3] = object4;
        return array;
    }
})

四、香哈头条列表渲染及绑定数据
1、进入pages/cook/cook.wxml文件，设计香哈头条列表信息界面布局。

<view class="head">
        <view>香哈头条</view>
        <view class="right"></view>
    </view>
    <view class="list">
            <view class="item" bindtap="seeDetail" id="0">
                <view>
                    <image src="../images/list/food-1.jpg" style="width: 75px;height:58px;"></image>
                </view>
                <view class="desc">
                    <view class="title">爱心早餐</view>
                    <view class="count">

2、进入pages/cook/cook.wxss文件，针对香哈头条列表信息添加样式。

.head{
    display: flex;
    flex-direction: row;
    margin: 10px;
    font-size: 13px;
    color:#999999;
}
.right{
    position: absolute;
    right: 10px;
    color:#cccccc;
}
.hr2{
    height: 2px;
    background-color: #cccccc;
    opacity: 0.2;
}
.item{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    margin-bottom: 5px;
}
.desc{
    margin-left: 20px;
    line-height: 30px;
}
.title{font-weight: bold;}
.count{
    display: flex;
    flex-direction: row;
    font-size: 12px;
    color: #999999;
}
.liulan{
    position: absolute;
    right: 70px;
}
.pinglun{
    position: absolute;
    right: 10px;
}

3、现在香哈头条列表数据直接写在了界面里。下面我们通过数据绑定和wx:for循环的方式动态加载数据。

<view class="list">
    <block wx:for="{{array}}">
            <view class="item" bindtap="seeDetail" id="0">
                <view>
                    <image src="{{item.list}}" style="width: 75px;height:58px;"></image>
                </view>
                <view class="desc">
                    <view class="title">{{item.title}}</view>
                    <view class="count">
                        <view>{{item.type}}</view>
                        <view class="liulan">{{item.liulan}}</view>
                        <view class="pinglun">{{item.pinglun}}</view>
                    </view>
                </view>
            </view>
            <view class="hr2"></view>
        </block>
</view> 

五、香哈头条模板引用
1、在pages中添加一个temp.wxml文件，在这个文件里制作一个香哈头条列表的模板，模板名称为cooks，将列表循环的内容放置在这个文件里。

<template name="cooks">
    <block wx:for="{{array}}">
        <view class="item" bindtap="seeDetail" id="0">
            <view>
                <image src="{{item.list}}" style="width: 75px;height: 58px;"/>
            </view>
            <view class="desc">
                <view class="title">{{item.title}}</view>
                <view class="count">
                    <view>{{item.type}}</view>
                    <view class="liulan">{{item.liulan}}</view>
                    <view class="pinglun">{{item.pinglun}}</view>
                </view>
            </view>
        </view>
        <view class="hr2"></view>
    </block>
</template>

2、将cooks模板引入到cook.wxml文件里，将列表信息展现出来。

<import src="temp" />
<view class="list">
<template is="cooks" data="{{array}}"/>
</view>

🌈本篇博客的内容【微信小程序天气制作】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。