微信小程序开发教程 | 第一篇:首页布局

写在前面

请各位先下载示例代码,将 image 文件夹以及相关页面的CSS代码拷贝过去备用。
代码地址:https://github.com/yuepenglei/MeiTuanWaiMai

开发步骤

第一步:

按照官网文档简易教程,创建一个新的项目
微信小程序开发教程 | 第一篇:首页布局_第1张图片

第二步:

打开 app.json 文件,添加页面路径,添加bar(底部菜单:首页,订单,我的)。

在 app.json 文件中:

“pages” 属性用来指定小程序由哪些页面组成,数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。

可以通过 “tabBar” 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。其中 list 接受一个数组,只能配置最少2个、最多5个 tab(我们分别配置了首页,订单,我的 )。tab 按数组的顺序排序,每个项都是一个对象,对象中的各个属性分别对应底部菜单页面路径,非选中时图标样式,选中时图标样式,文字颜色,名称显示。
微信小程序开发教程 | 第一篇:首页布局_第2张图片

第三步:

设置index.json:

“navigationBarTitleText” 属性设置导航栏标题文字内容
“navigationBarTextStyle” 属性设置导航栏标题颜色,仅支持 black / white
“navigationBarBackgroundColor” 属性设置导航栏背景颜色,基本上设置这三个属性就可以了。如果,你需要更详细的设置,可以参考官方文档中的 “页面配置” 。

注:每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

微信小程序开发教程 | 第一篇:首页布局_第3张图片

第四步:

用 “scroll-view” 组件创建可滚动视图区域

“scroll-y” 设置允许纵向滚动
“scroll-top” 设置竖向滚动条位置
用"view" 视图容器创建顶部地址栏搜索栏布局
用 “navigator” 创建页面跳转链接
“url” 设置当前小程序内的跳转链接。当前 “url” 值为:’/pages/map/map’ ,下一章节我们会补充地图页面
微信小程序开发教程 | 第一篇:首页布局_第4张图片

第五步:

用 “swiper” 滑块视图容器创建滑动商品分类

“indicator-dots” 属性设置是否显示面板指示
“indicator-color” 属性设置未选中的指示点颜色
“indicator-active-color” 属性设置当前选中的指示点颜色
“swiper-item” 仅可放置在组件中,用来设置滑块区域。

用双层for循环遍历数组swiperList,分别渲染出滑块视图中的两个滑块区域,每个区域下渲染出八个小图标。外层循环中itemList代表的是本层循环中的每一项,内层循环中swiper代表的是本层循环中的每一项,数组swiperList的值放在utils/data.js文件中,并在index.js文件中引用,具体信息可以查看inde.js中 ‘data’ 对象的设置
微信小程序开发教程 | 第一篇:首页布局_第5张图片

第六步:

用 “view” 组件渲染出搜索标签,综合排序标签设置成下拉样式,遍历数组filterList,通过对数组中元素的 ‘hot’ 属性的判断,筛选出热门搜索标签显示到页面上。数组对象filterList的值,查看inde.js中 ‘data’ 对象的设置

微信小程序开发教程 | 第一篇:首页布局_第6张图片

第七步:

用 “view” 组件渲染商家列表模块,for 循环遍历 restaurant 数组中的每一项,用 “navigator” 组件实现商家详情页面的跳转。数组对象restaurant的值,查看inde.js中 ‘data’ 对象的设置

微信小程序开发教程 | 第一篇:首页布局_第7张图片

关注本人公众号,第一时间获取最新文章发布

在这里插入图片描述

你可能感兴趣的:(微信小程序)