微信小程序框架分析小练手（三）——仿香哈菜谱小程序制作星野妙

香哈菜谱是一款围绕美食而成的小程序，在这里可以查看各式各样的菜谱。

二、建立如下的一些目录：

三、将底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图片的素材放置于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/cook/cook.wxml文件中，首先设计海报轮播区域，使用一张图片进行布局，图片的宽度设置为100%，高度设置为230px：

界面效果如下：

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

12345678910菜谱分类11121314视频15161718美食养生19202122闪购23242526八、在pages/cook/cook.wxss中针对宫格导航添加样式：

1/*pages/cook/cook.wxss*/2.nav{3display:flex;4flex-direction:row;5text-align:center;6}7.nav-item{8width:25%;9margin-top:20px;10font-size:12px;11}12.hr{13height:15px;14background-color:#cccccc;15margin-top:15px;16opacity:0.2;17}18.head{19display:flex;20flex-direction:row;21margin:10px;22font-size:13px;23color:#999999;24}25.right{26position:absolute;27right:10px;28color:#999999;29}30.hr2{31height:2px;32background-color:#cccccc;33opacity:0.2;34}至此，就完成了海报轮播区域和宫格导航区域的界面布局，界面效果如下：

Ⅲ、头条初始化数据

九、在pages/cook/cook.js中，添加initData数据，在data页面初始化数据里添加array数组，然后将initData定义的数据通过setData设值函数赋值给array数组：

Ⅳ、头条列表渲染及绑定数据

十、在pages/cook/cook.wxml中，进行香哈头条列表信息界面布局：

1.item{2display:flex;3flex-direction:row;4margin-left:10px;5margin-bottom:5px;6}7.desc{8margin-left:20px;9line-height:30px;10}11.title{12font-weight:bold;13}14.count{15display:flex;16flex-direction:row;17font-size:12px;18color:#999999;19}20.liulan{21position:absolute;22right:70px;23}24.pinglun{25position:absolute;26right:10px;27}界面效果如下：

十二、接下来通过数据绑定和wx:for循环的方式动态加载数据：

Ⅴ.头条模板引用

十三、在template目录下添加一个template.wxml文件，在该文件中制作一个香哈头条列表的模板，模板名称为cooks，将列表循环的内容放置在该文件中：

十四、将cooks模板引用到cook.wxml中，能达到与刚才同样的效果：

模板可以被不同的地方使用，以达到一次编写，多次引用的效果。