香哈菜谱是一款围绕美食而成的小程序，在这里可以查看各式各样的菜谱。
一、打开微信开发者工具，新建一个项目：xhcp。如下图：
二、建立如下的一些目录：
三、将底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图片的素材放置于pages文件夹下的images中：
Ⅰ、底部标签栏设计
四、打开app.json配置文件，在pages数组中添加5个页面路径"pages/cook/cook","pages/food/food","pages/headline/headline","pages/message/message","pages/me/me"。
在windows数组里配置窗口导航背景颜色为灰色（#494949），导航栏文字为“学做菜”，字体颜色为白色（#ffffff）：
五、在tabBar对象中配置底部标签栏导航背景色为白色（#ffffff），文字默认颜色为灰色（#999999），选中时颜色为红色（#CC1004），在list数组中配置底部标签栏导航对应的页面、导航名称、默认时图标及选中时图标。
app.json的完整代码如下：
{
"pages": [
"pages/cook/cook",
"pages/food/food",
"pages/headline/headline",
"pages/message/message",
"pages/me/me"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#494949",
"navigationBarTitleText": "学做菜",
"navigationBarTextStyle": "white"
},
"tabBar": {
"selectedColor": "#CC1004",
"color": "#999999",
"backgroundColor": "#ffffff",
"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"
}
]
}
}
至此，底部标签导航就设计完成了：
Ⅱ、宫格导航设计
在学做菜的页面中，有海报轮播的图片（微信小程序中有专门的swiper滑块视图组件实现这个效果），还要4跟宫格导航：菜谱分类、视频、美食养生和闪购。
六、在pages/cook/cook.wxml文件中，首先设计海报轮播区域，使用一张图片进行布局，图片的宽度设置为100%，高度设置为230px：
界面效果如下：
七、设计宫格导航，分为4个导航：菜谱分类、视频、美食养生、闪购。每个导航对应一个图标，在导航的下面是灰色的间隔线：
<!--pages/cook/cook.wxml-->
<view class="content">
<view class="img">
<image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
</view> <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>
<view class="hr"></view>
</view>
八、在pages/cook/cook.wxss中针对宫格导航添加样式：
/* 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;
}
.head{
display: flex;
flex-direction: row;
margin: 10px;
font-size: 13px;
color: #999999;
}
.right{
position: absolute;
right: 10px;
color: #999999;
}
.hr2{
height: 2px;
background-color: #cccccc;
opacity: 0.2;
}
至此，就完成了海报轮播区域和宫格导航区域的界面布局，界面效果如下：
Ⅲ、头条初始化数据
微信小程序作为客户端，它的数据来源自服务端。接下来模拟服务端提供香哈头条列表的数据，有了数据，页面才能动态地渲染。
九、在pages/cook/cook.js中，添加initData数据，在data页面初始化数据里添加array数组，然后将initData定义的数据通过setData设值函数赋值给array数组：
// pages/cook/cook.js
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-1.jpg';
object1.title = '爱心早餐';
object1.type = '健康养生';
object1.liulan = '30988浏览';
object1.pinglun = '7评论';
array[0] = object1; var object2 = new Object();
object2.img = '../images/list/food-2.jpg';
object2.title = '困了只想喝咖啡';
object2.type = '家庭医生在线';
object2.liulan = '29999浏览';
object2.pinglun = '14评论';
array[1] = object2; var object3 = new Object();
object3.img = '../images/list/food-3.jpg';
object3.title = '橘子多吃变小黄人';
object3.type = '家庭医生在线';
object3.liulan = '19356浏览';
object3.pinglun = '5评论';
array[2] = object3; var object4 = new Object();
object4.img = '../images/list/food-4.jpg';
object4.title = '搜狐新闻，手机用久了';
object4.type = '广告';
object4.liulan = '5046浏览';
object4.pinglun = '3评论';
array[3] = object4; var object5 = new Object();
object5.img = '../images/list/food-5.jpg';
object5.title = '困了只想喝咖啡';
object5.type = '家庭医生在线';
object5.liulan = '29999浏览';
object5.pinglun = '13评论';
array[4] = object5; return array;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
Ⅳ、头条列表渲染及绑定数据
香哈头条里有菜谱的图片、美食名称、分类、浏览数量以及评论数量。
十、在pages/cook/cook.wxml中，进行香哈头条列表信息界面布局：
<!--pages/cook/cook.wxml-->
<view class="content">
<view class="img">
<image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
</view> <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>
<view class="hr"></view>
<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">
<view>健康养生</view>
<view class="liulan">30988浏览</view>
<view class="pinglun">7评论</view>
</view>
</view>
</view>
<view class="hr2"></view>
</view>
</view>
十一、在pages/cook/cook.wxss中，针对香哈头条列表信息添加样式：
.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;
}
界面效果如下：
十二、接下来通过数据绑定和wx:for循环的方式动态加载数据：
<!--pages/cook/cook.wxml-->
<view class="content">
<view class="img">
<image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
</view> <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>
<view class="hr"></view>
<view class="head">
<view>香哈头条</view>
<view class="right"></view>
</view>
<view class="list">
<block wx:for="{{array}}">
<view class="item" bindtap="seeDetail" id="0">
<view>
<image src="{{item.img}}" 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>
</view>
界面效果如下：
Ⅴ.头条模板引用
十三、在template目录下添加一个template.wxml文件，在该文件中制作一个香哈头条列表的模板，模板名称为cooks，将列表循环的内容放置在该文件中：
十四、将cooks模板引用到cook.wxml中，能达到与刚才同样的效果：
模板可以被不同的地方使用，以达到一次编写，多次引用的效果。