6.框架练习大案例（27页1.6节之前扩展案例）.pdfVIP

框架练习大案例——仿香哈菜谱微信小程序 香哈菜谱是围绕美食而做的一款小程序，在这里可以查看各式各样的菜谱以及这些菜如 何来做，对于菜谱类 App 软件，用户使用的频次不是那么高，当用户碰到不会做的菜式或 者想做一些新的菜式，才会去 App 软件查看，而微信小程序就是可以满足这种低频使用这 个场景，如图所示。 学做菜 头条 1 底部标签导航设计 仿香哈菜谱微信小程序，底部标签导航分为五个标签导航：学做菜、头条、美食圈、消 息、我的，标签导航选中时导航图标会变为红色图标，导航文字会变为红色文字。 底部标签导航选中效果 （1）新建一个无AppID 的xhcp 项目。 添加项目 （2 ）将准备好的底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图 片图片拷贝到pages 文件夹下； （3 ）打开app.json 配置文件，在pages 数组里添加五个页面路径pages/cook/cook、p ages/headline/headline、pages/food/food、pages/message/message、pages/me/me，保存 后会自动生成相应的页面文件夹；删除掉pages/index/index、pages/logs/logs页面路径以 及对应的文件夹。 配置页面路径 （4 ）在window 数组里配置窗口导航背景颜色为灰色（#494949 ），导航栏文字为 “学 做菜”，字体颜色设置为白色 （#ffffff ），具体配置如图所示。 窗口及导航栏配置 （5 ）在tabBar 对象里配置底部标签导航背景色为白色（#ffffff ），文字默认颜色为灰色 （#999999 ），选中时为红色（#CC1004 ），在list 数组里配置底部标签导航对应的页面、导 航名称、默认时图标、选中时图标，具体配置如图所示。 底部标签导航配置 这样就完成仿菜谱精灵微信小程序的底部标签导航配置，单击不同的导航，可以进行切 换显示不同的页面，同时导航图标和导航文字会呈现为选中状态。 学做菜界面 2 宫格导航设计 在学做菜这个界面里，有了海报轮播的图片，在微信小程序里有专门的 swiper 滑块视 图组件实现这个效果，在以后的章节中会介绍它的使用，有宫格导航：菜谱分类、视频、美 食养生、闪购四个导航。 海报图片和宫格导航 （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 /view 界面效果如图所示。 海报图片 （2 ）设计宫格导航，分为四个导航：菜谱分类、视频、美食养生、闪购，每个导航对 应一个图标，在导航的下面是灰色的间隔线，具体代码如下。 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