国货之光🐱‍🏍 仿鸿星尔克微信小程序制作最近在学习微信小程序，准备合作写一个项目练练手，看到最近很火的鸿星尔克，就

前言

最近在学习微信小程序，准备合作写一个项目练练手，看到最近很火的鸿星尔克，就决定从他下手了,国货之光顶起!
开发过程中参考了官方文档以及W3Cschool,不足的地方请多多指教
项目合作人文章地址

开发准备

微信开发者工具
VS Code
有赞 vant 组件库
Mark Man

技术准备

css
JavaScripts
云数据库

云数据库

给数据库取名products,我们给数据库插入了50条商品数据用于页面展示

项目规划

该项目为合作项目，本人主要负责我的、详情页、分类以及一部分购物车的导航

底部导航栏一共分为四种: 首页，分类，购物车，我的. 四个导航用自定义tabbar解决,tabBar添加到app.json里

"tabBar": {
    "selectedColor": "#fece00",
    "borderStyle": "white",
    "backgroundColor": "#ededed",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/home/home",
        "iconPath": "assets/images/tabs/home.png",
        "selectedIconPath": "assets/images/tabs/home-active.png"
      },
      {
        "text": "分类",
        "pagePath": "pages/sort/sort",
        "iconPath": "assets/images/tabs/sort.png",
        "selectedIconPath": "assets/images/tabs/sort-active.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/shopcar/shopcar",
        "iconPath": "assets/images/tabs/shopcar.png",
        "selectedIconPath": "assets/images/tabs/shopcar-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/my",
        "iconPath": "assets/images/tabs/my.png",
        "selectedIconPath": "assets/images/tabs/my-active.png"
      }
    ]
  }

作品展示

项目解构

详情页

值得注意的是使用vant库时要在全局json或者局部页面json里引入需要使用的组件的地址

{
  "usingComponents": {
    "van-goods-action": "@vant/weapp/goods-action/index",
    "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
    "van-goods-action-button": "@vant/weapp/goods-action-button/index",
    "van-share-sheet": "@vant/weapp/share-sheet/index",
    "van-collapse": "@vant/weapp/collapse/index",
    "van-collapse-item": "@vant/weapp/collapse-item/index",
    "van-icon": "@vant/weapp/icon/index"
  }
}

可以发现上面两张动图的商品的图片、描述、价格、以及颜色均不相同,在做页面时我没有把数据定为死数据，而是从云端数据库中拿取，在 JS 文件中链接数据库

const db = wx.cloud.database(); //连接数据库
const productsCollection = db.collection('products'); //获取数据集合

在 JS 的data里声明productinfo,在页面加载时根据传入的id值将特定数据的字段赋给productinfo

  async onLoad(options) {
    let {data} = await productsCollection
    .where({
      id: db.command.eq(id)
    })
    .get();

    this.setData({
      productinfo:data
    })
   
  },

仔细观察上面两张动图能发现第一张图的尺码是 M-4XL 第二章图的尺码的 35-44,这是因为我做了两份详情页，一种是衣物类的详情页，对应的尺码是M-4XL，一种是鞋子类的详情页，对应的尺码为35-44 , 在做页面跳转时，数据库数据的 isShoes 字段起到了页面跳转判断的作用

在页面跳转的时候进行判断，若isShoes 为true 则跳往鞋子类的详情页，反之跳往衣物类的详情页,JS代码如下

  goToDetail(e){
   if(e.currentTarget.dataset.item.isShoes){
      wx.navigateTo({
        url: `../detail/detail?id=${e.currentTarget.dataset.item.id}`
      })
   }
   else{
      wx.navigateTo({
        url: `../detail2/detail2?id=${e.currentTarget.dataset.item.id}`,
      })
   }
  },

商品的数量的是可以进行加减的，但是最少不能少于0

如下图所示

JS代码如下

  reduceNum() {
    if (this.data.number < 1) {
      wx.showToast({
        title: '不能在减少了',
      });
      this.data.number = 1
    }
    this.setData({
      number: --this.data.number
    })  
  },
  increaseNum() {
    if (this.data.number > 5) {
      wx.showToast({
        title: '亲~不野性消费',
      })
    }
    this.setData({
      number: ++this.data.number
    })
  },

我们选好商品尺码、数量等以后点击加入购物车，可以在购物车里看见刚刚添加的商品显示在购物栏的第一个行，数量为2,该行为的代码逻辑由另一位项目合作人负责，他的文章地址我附在了文章开头，感下大家前去观看🤞🤞🤞

购物车

效果展示

页面分析

复选框的制作

我给鸿星尔克官方旗舰店复选框bind:change触发事件取名为 onChangeOfHD,

给商品复选框bind:change触发事件取名为 onChange，

给全选框 bind:change触发事件取名为 onChangeOfSub.

data:{
    checked: false,
    checked_sub: false,
    result: [],
}

以上代码表示在 js 文件的data中声明变量

  setButton() {
    let result = [];
    for (let index in this.data.products) {
      result.push(index);
    }
    this.setData({
      result: result
    })
  },
  onChangeOfHD(event) {
    this.setData({
      checked: event.detail,
    });

    if (this.data.checked) {
      this.setButton()
    } else {
      this.setData({
        result: []
      })
    } 

  },
  onChange(event) {
    this.setData({
      result: event.detail,
    });
   },
  
  onChangeOfSub(event) {
    this.setData({
      checked_sub: event.detail
    })
    if (this.data.checked_sub) {
      this.setButton()
      this.setData({
        checked: true,
      })
    } else {
      this.setData({
        checked: false,
        result: []
      })
    }
  },

以上代码中 setButton() 方法表示将商品标记为被选中状态，因为多次需要用到，所以将其封装为一个方法，便于复用

当 onChangeOfHD 事件触发时,checked 的布尔值发生改变，如果checked的值为true,商品应该全为被选中状态，将商品的索引值全部传入数组 result ,这样就使得所有商品显示,如果checked值为空，就将result数组清空

当事件 onChange 事件触发时，可以改变单个商品复用框的状态

当事件 onChangeOfSub 事件触发时，如果 checked_sub 的值为 true，则鸿星尔克官方旗舰店复选框和所有商品都应该处于被选中状态,即 checked 变为 true、将商品index值全部传入 result 数组 (调用 setButton() 方法)

搜索页面

效果展示

页面分析

<view class="page">
  <scroll-view scroll-y>
    <view class="hxek-search">
      <van-search value="{{value}}" show-action shape="round" placeholder="请输入搜索关键字" bind:search="onSearch"
        bind:cancel="onCancel" />
      <view wx:if="results.length > 0">
        <van-cell wx:for="{{results}}" wx:key="_id" title="{{item.title}}" size="large" bind:click="gotoDetail"
          data-id="{{results[index].id}}" data-isShoes="{{results[index].isShoes}}" />
      </view>
    </view>
  </scroll-view>
</view>
<view class="search-body">
  <text class="search-body_txt">热门推荐</text>
  <view class="search-body_blk" wx:for="{{recommend}}" wx:key="index" bindtap="gotoHome">{{item.txt}}</view>
</view>

以上代码第6行 result.length > 0 表示仅当查询结果集大于0时才将搜索出的商品显示出来

接下来就是实现查询的功能，首先连接云端数据库，使用模糊查询关键字来返回符合条件的商品

const db = wx.cloud.database(); // 连接数据库
const productsCollection = db.collection("products"); //获取数据集合

//  在 data 中声明
data: {
    productsCollection,
    results: []
}

onSearch(e) {
    //查询时显示
    wx.showToast({
      title: '查询中...',
      icon: 'loading'
    })
    
    let keyword = e.detail; // 获取查询时输入的文字
    // 如果输入的文字为空，显示搜索店铺内商品后返回
    if (!keyword.trim()) {
      wx.showToast({
        title: '搜索店铺内商品',
        icon: 'error'
      })
      return;
    }
    /*
    * where 表示条件查询 根据数据的 title 字段进行查询匹配
    * 采用的是 RegExp 正则方法来查询; options:'i' 表示忽略大小写
    * 查询成功后将数据加入到 result 数组，然后在页面上显示
    */
    productsCollection
      .where({
        title: db.RegExp({
          regexp: keyword,
          options: 'i'
        })

      })
      .get()
      .then(res => {
        this.setData({
          results: res.data
        })
        console.log(this.data.results)
      })
},
//查询完成后点击取消时，result 数组重置为空，页面回到初始状态
onCancel() {
    this.setData({
      results: []
    })
 },

以上就是查询功能的大致内容,查询成功后还要进行页面跳转,以下是页面跳转的代码

  gotoDetail(e){
    根据数据的 id ,isShoes 字段进行页面跳转
    let { id ,isshoes} = e.currentTarget.dataset;
    if(isshoes){
      wx.navigateTo({
        url: '../detail/detail?id='+id,
      })
    }else{
      wx.navigateTo({
        url: '../detail2/detail2?id='+id,
      })
    }
    console.log(id,isshoes)

  },

我的

我的页面分析

以下是html 代码

<view class="page">
    <view class="page_hd">
        <view class="person-center"></view>
        <view class="head-portrait"><image src="https://image.suning.cn/uimg/cmf/cust_headpic/0000000000_01_240x240.jpg" class="head-img"></image></view>
        <view class="person-information">
            <text>鸿星尔克大拿</text>
            <image src="http://image2.suning.cn/uimg/cms/img/153440744708636664.png" class="person-img"></image>
        </view>
        <navigator><view class="exit">退出登录</view></navigator>
    </view>
    <view class="page_bd">  
        <view class="weui-cells weui-bd weui-cells_after-title">
            <block wx:for="{{collect}}" wx:key="index">
                <navigator url="{{item.url}}">
                    <view class="weui-cell weui-cell_access weui-cell_example ">
                        <view class="weui-cell__hd">
                            <image class="icon-img" src="{{item.iconPath}}"></image>
                        </view>
                        <view class="weui-cell__bd">{{item.title}}</view>
                        <view class="weui-cell__ft"></view>
                    </view>
                </navigator>
            </block>
        </view>
        <view class="weui-cells  weui-cells_after-title">
            <block wx:for="{{set}}" wx:key="index">
                <navigator  url="{{item.url}}" bindtap="gotoDetail">
                    <view class="weui-cell weui-cell_access weui-cell_example ">
                        <view class="weui-cell__hd">
                            <image class="icon-img" src="{{item.iconPath}}"></image>
                        </view>
                        <view class="weui-cell__bd">{{item.title}}</view>
                        <view class="weui-cell__ft"></view>
                    </view>
                </navigator>
            </block>
        </view>
    </view>
</view>

跳转页效果图

四个页面的制作都比较简单，这里就不多做分析了，源码项目放在的文章结尾

项目源码

点击这里

总结

第一次写比较大型的项目，对我来说是一个不小的挑战，制作前期遇到了一些页面布局上的困难，问了同学以后之后就得心应手了，云端数据库的操作也在官方网站学习了一段时间，才有了项目里比较有技术的代码(查询、跳转详情页等等)😉😉😉。总的来说，这次的项目对我来说是一个比较大的成长，非常感谢帮助我的老师和同学,如果我的文章对你有帮助不妨点个赞吧👍。期待你在评论区留言，一起探讨和学习