微信小程序开发一个小型商城（三、商品分类设计）

上一篇博文，微信小程序开发一个小型商城（二、首页设计）
首先我们根据效果图再一一分解；

可以看到在这个页面室友上方自定义组件搜索栏，左右俩边分别是一个scroll-view标签组成的。

自定义组件

使用已经定义好了的组件。先在category/index/index.json文件引入组件，随后在wxml文件当中直接调用组件即可。

滚动view组件
在一个view标签当中将其分为左右俩侧，均使用scroll-view组件，详情使用方法，单击前往

<view class="cates">
    <SearchInput></SearchInput>
    <view class="cates_container">
        <!--左侧菜单--> 
        <scroll-view scroll-y class="left_menu">
            <view
            class="menu_item {{index===currentIndex?'active':''}}"
            wx:for="{{leftMenuList}}"
            wx:key="this"
            bindtap = "bindleItemTap"
            data-index="{{index}}">
                {{item}}
            </view>              
        </scroll-view>
        <!--右侧商品内容-->
        <scroll-view scroll-y scroll-top="{{scrollTop}}" class="right_content" >
            <view class="goods_group"
                wx:for="{{rightContent}}"
                wx:for-index="index1"
                wx:for-item="item1"
                wx:key="cat_id">
                <view class="good_title">
                    <text class="delimiter">/</text>
                    <text class="tilte">{{item1.cat_name}}</text>
                    <text class="delimiter">/</text>
                </view>
                <view class="good_list">
                    <navigator wx:for="{{item1.children}}"
                    wx:for-index="index2"
                    wx:for-item="item2"
                    wx:key="cat_id"
                    url="/pages/goods_list/index?cid={{item2.cat_id}}"
                    >
                        <image  src="{{item2.cat_icon}}" mode="widthFix"  />
                        <view class="goods_name">{{item2.cat_name}}</view>
                    </navigator>                      
                </view>
            </view>             
        </scroll-view>
    </view>
</view>

同理而言，根据页面标签添加样式，还是一样使用less文件。代码如下：

page {
  height: 100%;
}
.cates {
  height: 100%;
  .cates_container {
    display: flex;
    //calc使用vh 波浪号 在这里定义的height是在scroll-view标签的默认高度（左侧菜单栏）
    height: ~"calc(100vh - 90rpx )";
    .left_menu {
      /*作为子项高度继承父类*/
      flex: 2;
      height: 100%;
      .menu_item {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
      }
      .active {
        color: var(--themeColor);
        border-left: 5rpx solid currentColor;
      }
    }
    .right_content {
      flex: 5;
      .goods_group {
        .good_title {
          height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .delimiter {
            color: #ccc;
            padding: 0 10rpx;
          }
        }
        .good_list {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;
            text-align: center;
            image {
              width: 50%;	}}}}}}}

至此静态页面就基本实现：随后就是对数据的获取。我们可以发现在每一次获取接口请求的时候，域名+后面一部分度是一样的，这个时候就可以吧这些都拿出来放在一起，任何将其导入到需要使用的js文件当中就可以了，首先在与pages同层级下新建一个request文件夹，在里面新建一个index.js文件，
在这里面我们定义好公共的url(就是变量baseUrl)，调用的时候对其进行拼接，以及一起定义的ajaxTimes 变量，这是在index主页面（第一个页面）当中一次性会发送三个请求，要保证三个请求都要获取完再关闭。以及后面需要使用的token值也一起粘贴到这里了，也就不可以的删除了。

// 同时发送异步代码的次数
let ajaxTimes = 0;
export const request = (params) => {
  // 判断url中是否带有 /my/ 请求就带上header请求头 传入新的值并且结构header
  let header = { ...params.header };
  if (params.url.includes("/my/")) {
    // 拼接header 带上token
    header["Authorization"] = wx.getStorageSync("token");
  }
  ajaxTimes++;

  // 显示加载中 效果
  wx.showLoading({
    title: "加载中",
    mask: true
  });

  //定义公共的url
  const baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1";
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      header: header,
      //链接拼接
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result.data.message);
      },
      fail: (err) => {
        reject(err);
      },
      complete: () => {
        ajaxTimes--;//当是最后一次的异步请求时再调用hideLoading
        if (ajaxTimes === 0) {
          //关闭正在等待的图标
          wx.hideLoading();
        }
      }
    });
  })
}

index.js动态渲染
在data属性当中定义四个变量：

	//左侧菜单数据
    leftMenuList: [],
    //右侧的商品数据
    rightContent: [],
    //被点击的菜单
    currentIndex:0,
    //滚动条距离顶部的距离
    scrollTop:0

再就是与data同层级的里面定义一个接口返回数据的数组 Cates: [],
数组都有了，直接发送请求就好了，在这之前，我们需要调用request的index.js文件使用代码：import { request } from "../../request/index.js"; request表示方法名，后面的则是表示路径

getCates() {
    request({
      //提取公共部分链接，放在resquest/index.js
      url: "/categories"
    })
      .then(res => {
        console.log(res)
        this.Cates = res;
        //将获取来的数据存储下来
        wx.setStorageSync("cates",{time:Date.now(),data:this.Cates})
        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v => v.cat_name);
        //构造右侧商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },

这个时候，在onLoad方法里面使用this.getCates();调用这个方法获取数据就可以在APPdata里面看到值了，当然了，在获取这些数据的时候，返回的量是比较大的，我们不可能让他一直在获取数据，就需要使用到我们的缓存技术：单击前往 ，也就是在前面定义的Cates这个数组就是缓存需要用到的数组。

  onLoad: function (options) {
    //this.getCates();
    //先获取本地数据
    const Cates =wx.getStorageSync("cates");
    if(!Cates){
        //不存在数据时，发送请求
        this.getCates();
    }else{
      //存在时：
      if(Date.now()-Cates.time>=1000*10){
        this.getCates();
      }else{
        console.log("使用旧数据")
        this.Cates=Cates.data
        //数据渲染
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },

随后我们可以在微信开发者工具当中查看缓存，如下图所示：

最后就是点击事件，在左侧菜单栏定义的点击事件，当单击左侧菜单的时候，在右侧显示其对应的一大类商品。获取传递过来的索引值，根据索引进行跳转，以及单击后在右侧菜单栏的地方回到最开始，就相当于刷新右侧菜单栏。

bindleItemTap(e){
    console.log(e)
    /*获取索引*/
    const{index}=e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex:index,
      rightContent,
       //重新设置
       scrollTop:0
    }) 
  }

持续更新中…

下一篇：微信小程序开发一个小型商城（四、商品列表）单击前往