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

写在前面

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

开发步骤

第一步：

按照官网文档简易教程，创建一个新的项目

第二步：

打开 app.json 文件，添加页面路径，添加bar（底部菜单：首页，订单，我的）。

在 app.json 文件中：

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

可以通过 “tabBar” 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，只能配置最少2个、最多5个 tab（我们分别配置了首页，订单，我的 ）。tab 按数组的顺序排序，每个项都是一个对象，对象中的各个属性分别对应底部菜单页面路径，非选中时图标样式，选中时图标样式，文字颜色，名称显示。

第三步：

设置index.json：

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

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

第四步：

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

“scroll-y” 设置允许纵向滚动
“scroll-top” 设置竖向滚动条位置
用"view" 视图容器创建顶部地址栏搜索栏布局
用 “navigator” 创建页面跳转链接
“url” 设置当前小程序内的跳转链接。当前 “url” 值为：’/pages/map/map’ ，下一章节我们会补充地图页面

第五步：

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

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

用双层for循环遍历数组swiperList，分别渲染出滑块视图中的两个滑块区域，每个区域下渲染出八个小图标。外层循环中itemList代表的是本层循环中的每一项，内层循环中swiper代表的是本层循环中的每一项，数组swiperList的值放在utils/data.js文件中，并在index.js文件中引用，具体信息可以查看inde.js中 ‘data’ 对象的设置

第六步：

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

第七步：

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

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