微信小程序框架分析小练手(三)——仿香哈菜谱小程序制作

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

 

一、打开微信开发者工具,新建一个项目: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的完整代码如下:

 1 { 2 "pages": [ 3 "pages/cook/cook", 4 "pages/food/food", 5 "pages/headline/headline", 6 "pages/message/message", 7 "pages/me/me" 8  ], 9 "window": {10 "backgroundTextStyle": "light",11 "navigationBarBackgroundColor": "#494949",12 "navigationBarTitleText": "学做菜",13 "navigationBarTextStyle": "white"14  },15 "tabBar": {16 "selectedColor": "#CC1004",17 "color": "#999999",18 "backgroundColor": "#ffffff",19 "borderStyle": "black",20 "list": [21  {22 "pagePath": "pages/cook/cook",23 "text": "学做菜",24 "iconPath": "pages/images/tab/cook-0.jpg",25 "selectedIconPath": "pages/images/tab/cook-1.jpg"26  },27  {28 "pagePath": "pages/headline/headline",29 "text": "头条",30 "iconPath": "pages/images/tab/headline-0.jpg",31 "selectedIconPath": "pages/images/tab/headline-1.jpg"32  },33  {34 "pagePath": "pages/food/food",35 "text": "美食圈",36 "iconPath": "pages/images/tab/food-0.jpg",37 "selectedIconPath": "pages/images/tab/food-0.jpg"38  },39  {40 "pagePath": "pages/message/message",41 "text": "消息",42 "iconPath": "pages/images/tab/message-0.jpg",43 "selectedIconPath": "pages/images/tab/message-1.jpg"44  },45  {46 "pagePath": "pages/me/me",47 "text": "我的",48 "iconPath": "pages/images/tab/me-0.jpg",49 "selectedIconPath": "pages/images/tab/me-1.jpg"50  }51  ]52  }53 }

 

至此,底部标签导航就设计完成了:

技术图片

 

 

 

 Ⅱ、宫格导航设计

在学做菜的页面中,有海报轮播的图片(微信小程序中有专门的swiper滑块视图组件实现这个效果),还要4跟宫格导航:菜谱分类、视频、美食养生和闪购。

六、在pages/cook/cook.wxml文件中,首先设计海报轮播区域,使用一张图片进行布局,图片的宽度设置为100%,高度设置为230px:

技术图片

 

 

 界面效果如下:

技术图片

 

 

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

 1 <!--pages/cook/cook.wxml--> 2 <view class="content"> 3 <view class="img"> 4 <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image> 5 </view> 6  7 <view class="nav"> 8 <view class="nav-item"> 9 <view><image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view>10 <view>菜谱分类</view>11 </view>12 <view class="nav-item">13 <view><image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view>14 <view>视频</view>15 </view>16 <view class="nav-item">17 <view><image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view>18 <view>美食养生</view>19 </view>20 <view class="nav-item">21 <view><image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view>22 <view>闪购</view>23 </view>24 </view>25 <view class="hr"></view>26 </view>

八、在pages/cook/cook.wxss中针对宫格导航添加样式:

 1 /* pages/cook/cook.wxss */ 2 .nav{ 3  display: flex; 4  flex-direction: row; 5  text-align: center; 6 } 7 .nav-item{ 8  width: 25%; 9  margin-top: 20px;10  font-size: 12px;11 }12 .hr{13  height: 15px;14  background-color: #cccccc;15  margin-top: 15px;16  opacity: 0.2;17 }18 .head{19  display: flex;20  flex-direction: row;21  margin: 10px;22  font-size: 13px;23  color: #999999;24 }25 .right{26  position: absolute;27  right: 10px;28  color: #999999;29 }30 .hr2{31  height: 2px;32  background-color: #cccccc;33  opacity: 0.2;34 }

至此,就完成了海报轮播区域和宫格导航区域的界面布局,界面效果如下:

技术图片

 

 

 

 Ⅲ、头条初始化数据

微信小程序作为客户端,它的数据来源自服务端。接下来模拟服务端提供香哈头条列表的数据,有了数据,页面才能动态地渲染。

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

 1 // pages/cook/cook.js 2 Page({ 3  4 /** 5  * 页面的初始数据 6 */ 7  data: { 8  array: [] 9  }, 10  11 /** 12  * 生命周期函数--监听页面加载 13 */ 14 onLoad: function (options) { 15 var array = this.initData(); 16 this.setData({array:array}); 17  }, 18 initData:function(){ 19 var array = []; 20 var object1 = new Object(); 21 object1.img = ‘../images/list/food-1.jpg‘; 22 object1.title = ‘爱心早餐‘; 23 object1.type = ‘健康养生‘; 24 object1.liulan = ‘30988浏览‘; 25 object1.pinglun = ‘7评论‘; 26 array[0] = object1; 27  28 var object2 = new Object(); 29 object2.img = ‘../images/list/food-2.jpg‘; 30 object2.title = ‘困了只想喝咖啡‘; 31 object2.type = ‘家庭医生在线‘; 32 object2.liulan = ‘29999浏览‘; 33 object2.pinglun = ‘14评论‘; 34 array[1] = object2; 35  36 var object3 = new Object(); 37 object3.img = ‘../images/list/food-3.jpg‘; 38 object3.title = ‘橘子多吃变小黄人‘; 39 object3.type = ‘家庭医生在线‘; 40 object3.liulan = ‘19356浏览‘; 41 object3.pinglun = ‘5评论‘; 42 array[2] = object3; 43  44 var object4 = new Object(); 45 object4.img = ‘../images/list/food-4.jpg‘; 46 object4.title = ‘搜狐新闻,手机用久了‘; 47 object4.type = ‘广告‘; 48 object4.liulan = ‘5046浏览‘; 49 object4.pinglun = ‘3评论‘; 50 array[3] = object4; 51  52 var object5 = new Object(); 53 object5.img = ‘../images/list/food-5.jpg‘; 54 object5.title = ‘困了只想喝咖啡‘; 55 object5.type = ‘家庭医生在线‘; 56 object5.liulan = ‘29999浏览‘; 57 object5.pinglun = ‘13评论‘; 58 array[4] = object5; 59  60 return array; 61  }, 62 /** 63  * 生命周期函数--监听页面初次渲染完成 64 */ 65 onReady: function () { 66  67  }, 68  69 /** 70  * 生命周期函数--监听页面显示 71 */ 72 onShow: function () { 73  74  }, 75  76 /** 77  * 生命周期函数--监听页面隐藏 78 */ 79 onHide: function () { 80  81  }, 82  83 /** 84  * 生命周期函数--监听页面卸载 85 */ 86 onUnload: function () { 87  88  }, 89  90 /** 91  * 页面相关事件处理函数--监听用户下拉动作 92 */ 93 onPullDownRefresh: function () { 94  95  }, 96  97 /** 98  * 页面上拉触底事件的处理函数 99 */100 onReachBottom: function () {101 102  },103 104 /**105  * 用户点击右上角分享106 */107 onShareAppMessage: function () {108 109  }110 })

 

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

 香哈头条里有菜谱的图片、美食名称、分类、浏览数量以及评论数量。

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

 1 <!--pages/cook/cook.wxml--> 2 <view class="content"> 3 <view class="img"> 4 <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image> 5 </view> 6  7 <view class="nav"> 8 <view class="nav-item"> 9 <view><image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view>10 <view>菜谱分类</view>11 </view>12 <view class="nav-item">13 <view><image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view>14 <view>视频</view>15 </view>16 <view class="nav-item">17 <view><image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view>18 <view>美食养生</view>19 </view>20 <view class="nav-item">21 <view><image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view>22 <view>闪购</view>23 </view>24 </view>25 <view class="hr"></view>26 <view class="head">27 <view>香哈头条</view>28 <view class="right"></view>29 </view>30 <view class="list">31 <view class="item" bindtap="seeDetail" id="0">32 <view>33 <image src="../images/list/food-1.jpg" style="width:75px;height:58px;"></image>34 </view>35 <view class="desc">36 <view class="title">爱心早餐</view>37 <view class="count">38 <view>健康养生</view>39 <view class="liulan">30988浏览</view>40 <view class="pinglun">7评论</view>41 </view>42 </view>43 </view>44 <view class="hr2"></view>45 </view>46 </view>

十一、在pages/cook/cook.wxss中,针对香哈头条列表信息添加样式:

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

界面效果如下:

 

 

 

 技术图片

 

 

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

 1 <!--pages/cook/cook.wxml--> 2 <view class="content"> 3 <view class="img"> 4 <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image> 5 </view> 6  7 <view class="nav"> 8 <view class="nav-item"> 9 <view><image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view>10 <view>菜谱分类</view>11 </view>12 <view class="nav-item">13 <view><image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view>14 <view>视频</view>15 </view>16 <view class="nav-item">17 <view><image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view>18 <view>美食养生</view>19 </view>20 <view class="nav-item">21 <view><image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view>22 <view>闪购</view>23 </view>24 </view>25 <view class="hr"></view>26 <view class="head">27 <view>香哈头条</view>28 <view class="right"></view>29 </view>30 <view class="list">31 <block wx:for="{{array}}">32 <view class="item" bindtap="seeDetail" id="0">33 <view>34 <image src="{{item.img}}" style="width:75px;height:58px;"></image>35 </view>36 <view class="desc">37 <view class="title">{{item.title}}</view>38 <view class="count">39 <view>{{item.type}}</view>40 <view class="liulan">{{item.liulan}}</view>41 <view class="pinglun">{{item.pinglun}}</view>42 </view>43 </view>44 </view>45 <view class="hr2"></view>46 </block>47 </view>48 </view>

界面效果如下:

技术图片

 

 

Ⅴ.头条模板引用

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

技术图片

 

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

技术图片

 

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

 

相关文章