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

短命女 2023-07-25 08:58 13阅读 0赞

[上一篇博文，微信小程序开发一个小型商城（二、首页设计）][Link 1]  
首先我们根据效果图再一一分解；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
可以看到在这个页面室友上方自定义组件搜索栏，左右俩边分别是一个scroll-view标签组成的。

自定义组件

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

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

同理而言，根据页面标签添加样式，还是一样使用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里面看到值了，当然了，在获取这些数据的时候，返回的量是比较大的，我们不可能让他一直在获取数据，就需要使用到我们的缓存技术：[单击前往][Link 3] ，也就是在前面定义的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
            })
          }
        }
      },

随后我们可以在微信开发者工具当中查看缓存，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]  
最后就是点击事件，在左侧菜单栏定义的点击事件，当单击左侧菜单的时候，在右侧显示其对应的一大类商品。获取传递过来的索引值，根据索引进行跳转，以及单击后在右侧菜单栏的地方回到最开始，就相当于刷新右侧菜单栏。

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

持续更新中…

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

[Link 1]: https://blog.csdn.net/qq_44973159/article/details/105492046
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20230528/bca055ada8e94d90b84e4765c7dff793.png
[Link 2]: https://blog.csdn.net/qq_44973159/article/details/105315460
[Link 3]: https://blog.csdn.net/qq_44973159/article/details/105289643
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20230528/bee1089eaa454832a537c7892dbc67fa.png
[Link 4]: https://blog.csdn.net/qq_44973159/article/details/105497955