微信小程序实战篇-电商(一)

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

电商底部导航栏的制作


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

1
2
3
4
5
6
7
"pages":[
"pages/home/home",
"pages/classify/classify",
"pages/cart/cart",
"pages/mine/mine",
"pages/index/index"
],

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
"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 大家可以根据我的图片路径创建对应的文件夹,如下图

![1-1.png](http://upload-images.jianshu.io/upload_images/1750086-26afdc990e647eb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
需要注意的:
  • 添加tabBar的时候别忘记别忘记上面有一个逗号,这个是用来区分每个属性的,所以你每添加一个属性都要用逗号分隔开来,这点要注意,不然会报错,这就是我把标点去掉的错误日志,一般报出错误日志Expecting ‘EOF’ XXXXXXXXX,got STRING都是语法错误,所以要仔细检查看看哪里少写了东西。

    ![1-2.png](http://upload-images.jianshu.io/upload_images/1750086-c4c29921e999ed2d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  • 还有就是在.json文件里是不可以写注释的,我原本想添加一点注释方便读者阅读,然而会出现下面错误信息,解决办法很简单,把注释删除就可以啦

    ![1-3.png](http://upload-images.jianshu.io/upload_images/1750086-0c0b7b1c128c056a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

举一反三


  1. 我们创建了四个导航栏,那么如果我想再添加两个导航栏可以吗?
    你也许觉得很简单,试着去在list列表里添加两个了吧,我也是这么做的,但是出问题啦。系统会报错,这回知道了吧,最多只能是五个,没办法,谁让微信是老大,人家定最多五个那就只能最多五个喽!


    1-3.png

  2. 不知道你有没有注意到,导航栏默认首页勾选为红色,那么我想要默认勾选分类为红色呐,要怎么办?

    这个有点难度了吧,我刚开始想的是在tabBar属性把list里的第一个home属性和classify属性换一下应该就可以解决,然而并不是这样的,因为没有效果,后来也是一次误打误撞给发现的,我给你点小提示,有没有注意到,pages的第一个路径是什么pages/home/home,没错,就是它,如果想要分类classify作为默认的勾选项,你只需要在pages属性把home的路径和classify路径换一下,保存,重新编译一下,你要的效果就出来了,这里可以总结的一点就是,tabBar是到page里的第一行路径作为默认勾选项的。

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

![2-1.png](http://upload-images.jianshu.io/upload_images/1750086-7ec5e6c49fb45887.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这个导航栏可不像底部导航栏啦,因为他的级别比较低,是页面级别的导航栏,所以要写在页面里,你想要在哪个页面加入顶部导航栏就在哪个页面里添加如下代码,这里以首页的界面为例: **home.wxss**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* 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

1
2
3
4
<!--导航条-->  
<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数组里面的值,如护肤、彩妆等值
  • wx:key=”unique” 来指定列表中项目的唯一的标识符
  • data-idx=”“存储一些数据供home.js里调用,这里data-xxx,xxx就是你给home.js里提供的数据关键词,home.js通过获取xxx关键词来获取xxx里面的数据

home.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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刚好是彩妆的位置。

    2-2.png

总结


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


1.如果本文帮到了您,不妨点一下右下角的 分享到 按钮。
2.除非注明,本博文章均为原创,转载请以链接形式标明本文地址。
3.本博文章只代表博主当时的观点或结论,与博主公司没有任何关系。