首页 > 微商城 > 开发动态

• 微信小程序商城模板——广力云商城

  作者:广力云微信阅读: 时间:2020-01-13 19:02:40

  微信小程序电商模板为大家介绍一般的电商小程序都有哪些模块，以及这些模块要如何开发制作出来。

  
  

  电商底部导航栏的制作

  我想大家对电商一定不陌生，一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。所以我们按照这个来做吧，说到底部导航，不知道你还记得在 微信小程序入门篇（一）中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刚好是彩妆的位置。

  
  

  <广力云（https://www.guangli88.com/fenxiao/）是国内知名商城系统及商城网站建设开发商，为企业级商家提供零售商城、B2B2C多用户商城系统、网上商城开发、三级分销系统、开源网店系统、社区团购系统等多端商城及电子商务行业解决方案>

  
  

  本文摘自：hishop