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

一、打开微信开发者工具,新建一个项目: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中,能达到与刚才同样的效果:

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

微信小程序框架分析小练手(三)——仿香哈菜谱小程序制作的更多相关文章

  1. VS2010/MFC编程入门之四(MFC应用程序框架分析)

    VS2010/MFC编程入门之四(MFC应用程序框架分析)-软件开发-鸡啄米 http://www.jizhuomi.com/software/145.html   上一讲鸡啄米讲的是VS2010应用 ...

  2. VS2010-MFC(MFC应用程序框架分析)

    转自:http://www.jizhuomi.com/software/145.html 一.SDK应用程序与MFC应用程序运行过程的对比 程序运行都要有入口函数,在之前的C++教程中都是main函数 ...

  3. jQuery练手:仿新浪微博图片文字列表淡进淡出上下滚动效果

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...

  4. 微信小程序框架分析小练手(二)——天气微信小程序制作

    简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...

  5. 微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作

    旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...

  6. 美团小程序框架mpvue蹲坑指南

    美团小程序框架mpvue(花名:没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人 ...

  7. 【jframe】Java Web应用程序框架 - 第01篇:Get Started

    jframe是什么? jframe是一个基于MIT协议开源的java web应用程序框架,汇聚了我们团队之于java web应用程序的核心架构思想以及大量最佳实践,并且持续在实际项目中不断完善优化. ...

  8. 练手项目:利用pygame库编写射击游戏

    本项目使用pygame模块编写了射击游戏,目的在于训练自己的Python基本功.了解中小型程序框架以及学习代码重构等.游戏具有一定的可玩性,感兴趣的可以试一下. 项目说明:出自<Python编程 ...

  9. windows应用程序框架及实例

    应用程序框架:同一类型应用程序的结构大致相同,并有很多相同的源代码,因此可以通过一个应用程序框架AFX(Application FrameWorks)编写同一类型应用程序的通用源代码. 主要向导: D ...

随机推荐

  1. 基于FPGA的SPI FLASH控制器设计

    1.SPI FLASH的基本特征 本文实现用FPGA来设计SPI FLASH,FLASH型号为W25Q128BV.支持3种通信方式,SPI.Dual SPI和Quad SPI.FLASH的存储单元无法 ...

  2. Spring Security入门(基于SSM环境配置)

    一.前期准备 配置SSM环境 二.不使用数据库进行权限控制 配置好SSM环境以后,配置SpringSecurity环境 添加security依赖   <dependency> <gr ...

  3. 【C++】CCFCSP201803-2碰撞的小球

    // // main.cpp // CCFCSP20180318_2_碰撞的小球 // // Created by T.P on 2018/3/24. // Copyright © 2018年 T.P ...

  4. LibreOJ6279. 数列分块入门 3 题解

    题目链接:https://loj.ac/problem/6279 题目描述 给出一个长为 \(n\) 的数列,以及 \(n\) 个操作,操作涉及区间加法,询问区间内小于某个值 \(x\) 的前驱(比其 ...

  5. 1077 互评成绩计算 (20 分)C语言

    在浙大的计算机专业课中,经常有互评分组报告这个环节.一个组上台介绍自己的工作,其他组在台下为其表现评分.最后这个组的互评成绩是这样计算的:所有其他组的评分中,去掉一个最高分和一个最低分,剩下的分数取平 ...

  6. 百度地图开发API

    JavaScript API  http://lbsyun.baidu.com/index.php?title=jspopular

  7. springboot集成restdocs输出接口文档

    1.pom文件新增restdocs <dependency>    <groupId>org.springframework.restdocs</groupId> ...

  8. [洛谷P3254] [网络流24题] 圆桌游戏

    Description 假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri (i =1,2,--,m). 会议餐厅共有n 张餐桌,每张餐桌可容纳ci (i =1,2,--,n) ...

  9. 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用

    嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...

  10. CTF-Keylead(ASIS CTF 2015)

    将keylead下载到本地用7-ZIP打开,发现主要文件 keylead~ 在ubuntu里跑起来,发现是个游戏,按回车后要摇出3,1,3,3,7就能获得flag. 拖进IDA 直接开启远程调试,跑起 ...