微信小程序实战篇-电商（一）

哈喽，大家好，端午节过的怎么样啊，代码君可是没休息，专心的写电商文章哦，也是蛮拼的，如果对代码君认可的话，欢迎点赞转发，你们的点赞转发是对我最大的支持！好啦，言归正传，我们今天要讲解微信小程序的实战篇-电商，因为很多读者都反馈让我出一个关于电商的教程，所以我就打算利用空余时间写几篇关于电商小程序的教程，这个是第一篇，好，小明同学，现在要开始划重点啦，注意听哦~

##电商底部导航栏的制作
我想大家对电商一定不陌生，一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。所以我们按照这个来做吧，说到底部导航，不知道你还记得在微信小程序入门篇（一）中app.json的作用，如果不记得，请翻看一下，app.json是用来配置page路径以及导航栏属性的，那我们要做首页、分类、购物车、个人中心界面就要在page也添加这几个界面，所以在app.json的page里添加如下代码，写入page路径，系统会自动帮你创建界面的

  "pages":["pages/home/home","pages/classify/classify",  "pages/cart/cart","pages/mine/mine","pages/index/index"],

好，既然添加了四个界面，那我们要怎么做底部导航栏呐，今天给app.json再添加一个属性，就是可以在app.json里配置导航栏，将下面代码添加到app.json里面

 "tabBar": {"color": "#858585","selectedColor": "#f0145a","backgroundColor": "#ffffff","borderStyle": "#000","list": [{"pagePath": "pages/home/home","iconPath": "images/bottomNav/home.png","selectedIconPath": "images/bottomNav/home_select.png","text": "首页"},{"pagePath": "pages/classify/classify","iconPath": "images/bottomNav/classify.png","selectedIconPath": "images/bottomNav/classify_select.png","text": "分类"},{"pagePath": "pages/cart/cart","iconPath": "images/bottomNav/cart.png","selectedIconPath": "images/bottomNav/cart_select.png","text": "购物车"},{"pagePath": "pages/mine/mine","iconPath": "images/bottomNav/mine.png","selectedIconPath": "images/bottomNav/mine_select.png","text": "我的"}]}

tabBar系统自带字段，不可改，添加这个字段就是告诉系统你要添加导航栏，color、selectedColor、backgroundColor从字面意思也字段，分别对应的属性是默认字体颜色、勾选字体颜色、背景颜色。着重说一下borderStyle，这个的定义底部导航栏与界面的边界线，属性有点特殊，特殊在如果你不想要这个分界线，可以把属性设置为white，剩下的不管你写入的是什么，系统都理解为要添加这条分界线，不信你可以试试。list属性自然是设置对应导航栏的界面啦，

pagePath：页面路径，就是你写在page里的路径
iconPath：默认导航栏图片路径
selectedIconPath：勾选图片的路径
text：导航栏名字

这里要说的是，图片路径，一定要写对，不然找不到图片就显示不出来，这里给大家提供我的导航栏图片—提取码：8zwe 大家可以根据我的图片路径创建对应的文件夹，如下图

需要注意的：

添加tabBar的时候别忘记别忘记上面有一个逗号，这个是用来区分每个属性的，所以你每添加一个属性都要用逗号分隔开来，这点要注意，不然会报错，这就是我把标点去掉的错误日志，一般报出错误日志Expecting ‘EOF’ XXXXXXXXX，got STRING都是语法错误，所以要仔细检查看看哪里少写了东西。
还有就是在.json文件里是不可以写注释的，我原本想添加一点注释方便读者阅读，然而会出现下面错误信息，解决办法很简单，把注释删除就可以啦

###举一反三

我们创建了四个导航栏，那么如果我想再添加两个导航栏可以吗？
你也许觉得很简单，试着去在list列表里添加两个了吧，我也是这么做的，但是出问题啦。系统会报错，这回知道了吧，最多只能是五个，没办法，谁让微信是老大，人家定最多五个那就只能最多五个喽！
不知道你有没有注意到，导航栏默认首页勾选为红色，那么我想要默认勾选分类为红色呐，要怎么办？
这个有点难度了吧，我刚开始想的是在tabBar属性把list里的第一个home属性和classify属性换一下应该就可以解决，然而并不是这样的，因为没有效果，后来也是一次误打误撞给发现的，我给你点小提示，有没有注意到，pages的第一个路径是什么pages/home/home,没错，就是它，如果想要分类classify作为默认的勾选项，你只需要在pages属性把home的路径和classify路径换一下，保存，重新编译一下，你要的效果就出来了，这里可以总结的一点就是，tabBar是到page里的第一行路径作为默认勾选项的。

##电商顶部导航栏制作
既然讲了导航栏，干脆今天多讲解一点，接着教教大家顶部导航栏怎么制作，先上效果图

这个导航栏可不像底部导航栏啦，因为他的级别比较低，是页面级别的导航栏，所以要写在页面里，你想要在哪个页面加入顶部导航栏就在哪个页面里添加如下代码，这里以首页的界面为例：
home.wxss

/* pages/home/home.wxss */
page{  display: flex;  flex-direction: column;  height: 100%;
}
.navbar{  flex: none;  display: flex;  background: #fff;
}
.navbar .item{  position: relative;  flex: auto;  text-align: center;  line-height: 80rpx;  font-size:14px;
}
/* 顶部导航字体颜色 */
.navbar .item.active{  color: #f0145a;
}
/* 顶部指示条属性 */
.navbar .item.active:after{  content: "";  display: block;  position: absolute;  bottom: 0;  left: 0;  right: 0;  height: 6rpx;  background: #f0145a;
}

home.wxml

<!--导航条-->
<view class="navbar">  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>

在home.wxml里面bindtap字段我们已经讲解过啦，是事件监听的标识符，事件名称叫“navbarTap”可以到home.js里查找到这个事件wx:for这个字段重点讲解，在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item，这是官方解释，说白了就是item默认叫做变量的值，index表示第几个变量的值，还不太明白请看这个微信 wx:for 的讲解

** wx:for="{{navbar}}"** 意思是虚幻navbar的数组数据
{{item}} 这里面是navbar数组里面的值，如护肤、彩妆等值
wx:key=“unique” 来指定列表中项目的唯一的标识符
** data-idx="{{index}}" **存储一些数据供home.js里调用，这里data-xxx，xxx就是你给home.js里提供的数据关键词，home.js通过获取xxx关键词来获取xxx里面的数据

home.js

// pages/home/home.js
var app = getApp()
Page({data: {navbar: ['护肤', '彩妆', '香水','个人护理'],currentTab: 0,},// 导航切换监听navbarTap: function (e) {console.debug(e);this.setData({currentTab: e.currentTarget.dataset.idx})},})

home.js，这里读过微信小程序入门篇（二）都知道，page页面里.js一般是放data数据和事件监听的，这里data有一个navbar导航栏数据，还有一个记录当前位置的currentTab,字段可以自由命名，赋值的时候对应上就好，

navbarTap 记得在home.wxml里面data-idx属性吗，在这里用到，currentTab: e.currentTarget.dataset.idx 把当前用户选择的Tab传给currentTab里，为了验证一下结果，我在这里面加入了一个输出日志console.debug(e);，可以在控制台上看输出的日志，我选择点击彩妆，输出台的数据idx：1刚好是彩妆的位置。

###总结
今天我们讲解的微信小程序的底部导航栏和顶部导航栏，导航栏应该说是必须的对于电商小程序来说，那么今天的导航栏教程你掌握了吗？，有不懂的可以在下面留言评论，代码君会时刻答复的，如果觉得我写的不错的话，帮忙点赞转发一下吧~

###入门篇链接
微信小程序入门篇（一）
微信小程序入门篇（二）

##关注微信公众号获取最新文章

微信小程序实战篇-电商（一）相关推荐

微信小程序实战篇-下拉刷新与加载更多
下拉刷新实现下拉刷新目前能想到的有两种方式调用系统的API,系统有提供下拉刷新的API接口下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
微信小程序实战篇：实现抖音评论效果
IT实战联盟博客:http://blog.100boot.cn 我们在写小程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的.本文教大家做一个抖音评论效果的小程序首先看下 ...
微信小程序实战篇-购物车
哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢 ...
微信小程序实战篇-商品详情页（二）
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
前端微信小程序实战篇
电商底部导航栏的制作我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
微信小程序布局移动电商之路
常用微信的朋友会发现微信多了一个功能--小程序.点击进入,就会发现一个"附近的小程序".在这里已经有一些商家入驻了,当然也还有很多人正持观望的态度在对待小程序. 在七月份的时候,微 ...
基于微信小程序的农产品电商平台精准营销模式创新研究
目前在农产品销售过程出现一个非常严重的问题─滞销, 我们时不时的能在新闻报道看到某地区农产品大量上市却少有客商前来收购, 甚至一度出现大量新鲜的农产品烂在地头无人问津, 被当作垃圾一样扔掉. 客商在 ...
python爬取微信小程序(实战篇)_爬虫爬取微信小程序
之前打算做个微信小程序的社区,所以写了爬虫去爬取微信小程序,后面发现做微信小程序没有前途,就把原来的项目废弃了做了现在的网站观点,不过代码放着也是放着,还不如公开让大家用,所以我把代码贴出来,有需要的 ...

微信小程序实战篇-电商（一）

微信小程序实战篇-电商（一）相关推荐

最新文章

热门文章