今天就给大家分享一下微信电商小程序如何开发的相关知识点，内容详细，逻辑清晰，相信大部分人对这些知识都不是很了解，所以分享此文供大家参考，希望大家看完本文后能有所收获，一起来学习一下吧。

电商底部导航栏的制作

我想大家对电商一定不陌生，一般电商的底部导航栏有以下几个：首页、类目、购物车、个人中心。那么我们就这样来做吧。说到底部导航，不知道大家还记得微信小程序入门（上）中app.JSON的作用吗？不记得的话请看一下。app.json是用来配置页面路径和导航栏属性的，如果我们要做首页、类目、购物车、个人中心的界面，也要把这些接口添加到页面中。所以在app.json的页面中添加如下代码，并写上页面路径，系统会自动帮你创建接口的。

  "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": "我的"      }    ]  }

系统自带字段，不可修改，增加这个字段就是告诉系统你想增加一个导航栏，对应的属性有默认字体颜色、勾选字体颜色、背景颜色。这里要强调一下，这个定义了底部导航栏和界面的分界线，属性有点特殊，如果你不想要这个分割线，可以设置该属性为，不管你写什么，系统都明白你想加这个分割线。不信你可以试试，list属性自然就是用来设置对应导航栏的界面的。

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

笔记：

举一反三

我们已经创建了四个导航栏，如果我想再添加两个怎么办？

你可能觉得很简单，试着添加两个进去，我也是这么做的，但是出错了。系统会报错，现在你知道了，最大数量是五个，没办法，谁让微信做老大呢，人家规定最大数量是五个，那就只能是五个了！

不知道大家有没有注意到，导航栏里默认首页勾选是红色的，如果我想让分类也默认以红色勾选，应该怎么做呢？

这个有点难吧？一开始我以为把list中第一个home属性和中的属性对调一下应该就可以解决问题了。然而事实并非如此，因为没有任何效果。后来我偶然发现了。我给你们一个提示，你们有没有注意到第一个路径是/home/home？对，就是它。如果要把它归为默认勾选的选项，只需要把home路径和中的路径对调一下，保存，重新编译，就可以得到你想要的效果了。这里可以总结的就是，把页面中第一行path作为默认勾选的选项了。

电商顶部导航栏制作

说完了导航栏，今天就再多说一点，接下来就教大家如何制作顶部导航栏吧，先从效果图开始吧。

这个导航栏不像底部导航栏，因为它的级别比较低，是页面级的导航栏，所以要写在页面中。如果要在某个页面中添加顶部导航栏，则在该页面中添加如下代码。这里我们以首页界面为例：

首页.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;  }

主页.wxml

      {{item}}  

前面我们已经解释了home.wxml中的字段，它们是事件监听的标识符，事件名称为“”，你可以在home.js中找到这个事件。wx:for字段有详细的解释，使用组件上的wx:for控件属性绑定一个数组，就可以使用数组中每一项的数据来重复渲染组件。数组中当前项的下标变量名默认为item，这是官方的解释，简单来说，item默认叫做变量的值，表示变量的值。如果还不明白，请看这个微信wx:for解释。

主页.js

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

home.js。看过微信小程序入门（下）的朋友都知道，页面中的.js文件里面一般会存放数据和事件监听，这里的数据里面包含导航栏和记录当前位置的字段，字段可以自由命名，并赋值对应的字段。

以上就是《微信电商小程序如何开发》这篇文章的全部内容了，感谢大家的阅读！相信大家看完本文后都会收获颇丰，小编每天都会为大家更新不同的知识，想要了解更多知识请关注编程网精选频道。