微信小程序电商实战-首页（上）

上一篇：微信小程序电商实战-入门篇

嗨，大家好！经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢？好了，不啰嗦了 我们先看首页长什么样吧！

首页效果图.gif

为了能够更好的表达出来，首页准备分成两次写完。

第一部分先实现如下的功能

Hi.World-home_top.gif

划分模块

大家都知道电商平台一般分为首页、商品分类、购物车和个人中心4个核心模块，那么我们先在app.json的page里添加如下代码

一、设置头部

背景颜色为白色，名称是Hi.World

二、首页搜索

上面素材看到的搜索部分颜值并不高，是因为录屏工具的问题，实际效果看下图。

搜索.png

搜索用到了template 模板技术，创建wxSearch 模板目录，添加wxSearch.js、wxSearch.json、wxSearch.wxml、wxSearch.wxss

此处省略模板代码，可以直接到Git上现在源码：地址https://github.com/yundianzixun/wxSearch-master

将下载的模板包放到和pages 同级目录，如下图所示：

项目目录.png

接下来我们把搜索模板放到首页，会用到 home.wxml和home.wxss

home.wxml

home.wxss

好啦，保存运行一下看看效果吧！

三、制作导航栏

先看我们要实现的效果图

导航栏.png

这个导航栏不是小程序底部导航栏，所以要写在页面里，在你需要导航栏的地方加入如下代码就可以实现，这里以首页为例：

home.wxss

home.wxml

在home.wxml我们使用bindtap进行点击事件监听，设置事件名称为“navbarTap”并且在home.js里设置这个事件对应的逻辑处理。我们在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item，想要了解wx:for可以参考该资料：https://www.w3cschool.cn/weixinapp/weixinapp-list.html（强烈建议如果还不会用wx:for一定要看看，因为在做数据循环渲染的时候经常要用）

home.js

四、首页轮播Banner

先看效果图

轮播Banner.gif

依然在home 模块，需要改动的页面有home.js、home.wxml、home.wxss

home.wxml

indicator-dots 是否显示面板指示点

autoplay 是否自动切换

interval 自动切换时间间隔

duration 滑动动画时长

想要了解多请查看微信官方swiper视图容器

关于wx:for上面已经介绍过了，不啰嗦了~~~

home.wxss

home.js

具体swiper 属性设置看注释~~~

总结

我们的微信小程序电商实战-首页（上） 的内容已经讲完了，我们回顾一下 一共实现了3个功能，分别是：首页搜索、导航栏和轮播。如果有什么问题可以随时在下方留言哦，如果对大家有帮组请帮忙分享转发一下吧 ~~~

下期预告

下期会来完成小程序电商实战-首页的实时热销榜、福利专场和个人中心+购物车的浮动布局，上效果图：