仿【得物】微信小程序实战全教程（动手就会）

ゝ一纸荒年。 2022-09-10 14:10 240阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

![bb391199d04a2468c52fad0300ef585c.png][]

## 前言 ##

最近正在学习微信小程序开发，也是与两个同学一起合作着手仿做得物APP微信小程序。这里主要分享一下我的学习过程及踩过的一些坑，希望对您有所帮助。

![6b360cfc24a29844d7e29c13bd6261f8.gif][] 006.gif

## 开发准备 ##

*  微信开发者工具
 *  VScode代码编辑器
 *  得物APP微信小程序
 *  有赞vant组件库\[1\]
 *  阿里巴巴矢量图标库\[2\]
 *  markman\[3\]（取色量距）

## 总体架构 ##

*  该项目基于小程序云开发，使用的模板是云开发快速启动模板\[4\]由于是个全栈项目，前端使用小程序所支持的wxml + wxss + js开发模式，命名采用BEM\[5\]命名规范。后台则是借助云数据库进行数据管理。

项目中我负责的部分主要如下（一些数据为固定数据写在`config`中，js文件通过`module.exports`暴露，需要引用时在页面对应js头部引入，例`const {} = require('../../../../config/buys')`）。项目中我使用的较多`vant`组件，需要在构建`npm`包时引入`vant`，详情可见有赞vant的npm安装\[6\]。页面使用第三方组件时须在对应json文件中声明，为了不做重复工作可直接在`app.json`中声明。例：（`"usingComponents": "van-search": "@vant/weapp/search/index"}`）

## 项目规划 ##

*  在做该小程序之前，我先是分析每个页面对应功能，了解这款小程序的交互细节，清楚数据集合数据项。这样大概可以分为分析页面，创建数据集合，解构页面基本布局，数据绑定及跳转四步来展开。

参照得物APP微信小程序，下面是我的小程序的tabBar。（有点糙，但是还能看????）

![9727c7f18221b6068fe61a8643fd7381.png][] 000.png

"tabBar": {
        "selectedColor": "#000000",
        "borderStyle": "white",
        "backgroundColor": "#fff",
        "list": [
          {
            "text": "购买",
            "pagePath": "pages/buy_page/page/buy/buy",
            "iconPath": "images/buy.png",
            "selectedIconPath": "images/buy_active.png"
          },
          {
            "text": "鉴别查询",
            "pagePath": "pages/disting/disting",
            "iconPath": "images/disting.png",
            "selectedIconPath": "images/disting_active.png"
          },
          {
            "text": "洗护",
            "pagePath": "pages/wash/wash",
            "iconPath": "images/wash.png",
            "selectedIconPath": "images/wash_active.png"
          },
          {
            "text": "我",
            "pagePath": "pages/my_page/my/my",
            "iconPath": "images/my.png",
            "selectedIconPath": "images/my_active.png"
          }
        ]
      },
    复制代码

## 云数据库 ##

云数据库是一种NoSQL数据库。每一张表是一个集合。对于我的项目部分，我主要建立了一个商品集合。

dewu_goods 商品表 用于存储创商品的信息 
        - _id 
        - amway  是否为推荐
        - brand  品牌
        - buyer  已购买人数
        - ctime  数据创建时间
        - digest 详情介绍
        - img    详情图
        - pic    商品展示图
        - kind   种类
        - price  价格
        - sex    适应人群
        - title  简介
        - type   首页索引
    复制代码

![5d06910e1116d46d2dee11955992e291.png][]建立数据集合后需修改数据权限才可正常访问。

![f6de1377d99434e0d6548b2e59da12fd.png][]可对在数据库中进行这些操作，注意导入数据格式需要是`.csv`或`.json`文件，可先用excel表格建立数据集合如何转化成对应格式文件直接导入数据库。

![1d69c3bb1eeb55ee666b0f2b350f29b1.png][] 0101.png

const db = wx.cloud.database() //云数据库
    const dewuCollection = db.collection('dewu') //在js文件中导入数据集合
    复制代码

## 项目解构 ##

以下是我主要实现的得物APP小程序界面

![ba701c2fff10708a71a2fccd2650aa12.png][]![5eb279c31f4f942c47e1ce4f3cb52bce.png][]![c2bf09628c3651da5f5700eed64741d5.png][]

![995b5bd8ae52e98a199b87783a005d15.png][]![349f2c8b144c0969311ddf1a6c114d28.png][]![db78dd08c81748bff48dae3c417e7be6.png][]接下来对每个页面的细节进行解构。

## 购买首页 ##

![aadf4ce55f5332a610ea34a1ad15c490.gif][]

000.gif

### 购买首页样式 ###

![ae9220de3c8326119e755cffa79b7f38.png][] 00.png

<view class="page">
      
      <van-sticky>    
      
        <view class="dewu-hd">
          <view class="dewu-hd-search" bindtap="gotoSearch">
            <van-search placeholder="搜索单号" disabled />
          </view>
          <view class="dewu-kinds" bindtap="kinds"><image src=""></image>
          </view>
        </view>
      </van-sticky>
      
      <van-tabs class="dewu-tabs">
        <van-tab title="推荐">
          <view class="dewu-tip">
            <view class="dewu-tip-img-hd"><image src=""></image>
            </view>
            
            <van-grid>
              <van-grid-item use-slot>
                <image style="" src=""></image>
                <text>正品保障</text>
              </van-grid-item>
            </van-grid>
          </view>
          <view class="van-items">
            <van-grid class="van-grid-bd">
            
              <van-grid-item use-slot>
                <view class="item-img"><image src=""></image></view>
                <view class="item-text">
                  <span>{
        {}}</span>
                </view>
              </van-grid-item>
            </van-grid>
          </view>
        </van-tab>
      </van-tabs>
    </view>
    复制代码

商品项`van-grid-item`中采用绝对定位。`tips`中将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列。搜索框设置`disabled`属性为禁用状态解决单击自动聚焦的问题。在使用`van-grid`布局时自定义每一项的属性需设置`use-slot`属性，否则不生效。

这个页面布局并不复杂，不过我在写这个布局时还是遇到了坑（感觉是自己跳进去的 我太????了）。在做`dewu-hd`吸顶时我是直接用`van-sticky`包起来实现，但是实际效果是tabs也需要固定在dewu-hd下面。这里不可以使用同上的方法，实际效果会使得整个`van-tabs`吸顶导致页面无法滑动。其实在这里只需要给`van-tabs`添加一个`sticky`属性并且设置`offset-top`，注意这两个属性需一起使用才能生效。

### 获取商品项 ###

async onLoad() {
         this.proData()   //获取推荐数据项
         this.shoeData()  //获取鞋类数据项
      },
      proData() {
         const {data} = await dewuCollection
        .where({
          amway: db.command.eq('TRUE')
        })
        .field({          //获取指定数据项，提升性能
          _id:true,
          pic:true,
          title:true,
          buyer:true,
          price:true
        })  
        .get()
        // console.log(data);
        this.setData({
          produces: data,
        })
      }
      shoeData() {
        let data1 = await dewuCollection
        .where({
          type: 1
        }) 
        .get()
        // console.log(data1.data);
        this.setData({
          shoes: data1.data
        })
      }
    复制代码

### 绑定详情页 ###

gotoDetail(e) {
        // console.log(e);
        wx.navigateTo({
          url: '/pages/buy_page/page/detail/detail?id='+e.currentTarget.dataset.id,
        })
      },
    复制代码

利用商品`_id`属性唯一，当设定数据项`id`等于`_id`时跳转到详情页且展示对应数据。

## 商品详情页 ##

![a3579c7d47294e7da01805396b58693b.gif][]

001.gif

### 商品详情页样式 ###

![e2a3ea1a34984a0e34fadd7deb3b0708.png][] 03.png

<view class="page">
    
      <view class="detail_hd">
        <swiper class="swiper__hd">
            <swiper-item class="swiper_hd"></swiper-item>
        </swiper>
        <view class="dots1">
            <view class="{
        {current==index?'active':''}}"></view>
        </view>
        <view class="detail_hd-title">{
        {img.digest}}</view>
        <view class="detail_hd-price">
          <text id="p2">￥{
        {img.price}}</text>
        </view>
      </view>
      <van-cell class="size" bind:click="showPopup1">
        <view class="size-l">选择尺码</view>
        <view class="size-r">请选择尺码</view>
        <image class="ricon" style="width:26rpx;height:26rpx;" src=""></image>
      </van-cell>
      
      
      <view class="detail_bd">
      <swiper></swiper></view>
    
      <van-goods-action>
        <button>立即购买</button>
      </van-goods-action>
    </view>
    复制代码

整体分为`detail_hd`和`detail_bd`两部分。自定义`swiper`需设置`dot`对应展示图片并更改样式，`circular`属性设置是否启用滑块切换动画，这里使用三目运算符判断是否添加新的样式类名。在定义商品价格的样式的时候可以通过`first-letter`伪元素来定义￥符号样式。引用组件`van-goods-action`使得购买按钮吸底。

![e675380cb74b729b47d34b4cefbf4763.png][] 05.png

<van-popup closeable position="bottom" custom-style="height: 75%">
        <view class="detail_size-hd">
          <view class="detail_size-hd-img">
            <image bindtap="previewImage" mode="aspectFit" src="{
        {img.pic}}">
            </image>
          </view>
          <view class="detail_size-hd-price">
            <text style="font-size:25rpx;">￥</text>
            <text wx:if="{
        {activeSizeIndex==-1}}">--</text>
            <text wx:if="{
        {activeSizeIndex==index}}">{
        {item.price}}</text>
          </view>
          <view>
            <image src=""></image>
            <text wx:if="{
        {activeSizeIndex==-1}}">请选择商品</text>
            <text wx:if="{
        {activeSizeIndex==index}}">已选 {
        {item.size}}</text>
          </view>
        </view>
        
        <view class="detail_size-bd">
          <van-grid square gutter="10">
            <van-grid-item>
              <view class="size">
                <text id="p3">{
        {item.size}}</text>
                <text id="p4">￥{
        {item.price}}</text>
              </view>
            </van-grid-item>
          </van-grid>
        </view>
        <view>
          <button>{
        {}}</button>
        </view>
      </van-popup>
    复制代码

使用`van-popup`组件，给对应标签设置事件即可绑定弹出。例：`<van-cell bind:click="showPopup"></van-cell>`。三目运算符设置默认样式并且控制选中边框样式，设置`closeable`属性启用关闭按钮。`square`设置`van-grid-item`为方形，`gutter`设置格子间距。

![3454263e5851a6824ae7ba9d191dfe12.png][] 06.png

<van-sticky sticky offset-top="{
        { 180 }}">
          <view class="head">
            <view class="detail_produce-hd">相关推荐</view>
            <view class="detail_close" bindtap="onClose2">
              <image style="width:40rpx;height:40rpx;" src=""></image>
            </view>
          </view>
        </van-sticky>
    复制代码

设置`detail_produce-hd`吸顶，给右侧关闭icon绑定`bind:close="onClose"`事件。

### 获取商品详情 ###

async onLoad(options) {  //获取对应_id的商品数据
        console.log(options);
        let id = options.id
        console.log(id);
        wx.cloud.database().collection('dewu') 
        .doc(id)             
        .get()
        .then(res => {
          console.log(res);
          this.setData({
           img :res.data
          })
        })
      },
    复制代码

### 弹出层 ###

showPopup() {   //显示弹出层
        this.setData({ 
          show: true,
        });
      },
      onClose() {     //关闭弹出层
        this.setData({ 
          show: false,
        });
      },
    复制代码

### 选择尺码 ###

pickSize(e) {
        let flag = e.currentTarget.dataset.flag
        let index = e.currentTarget.dataset.index
        if(flag==index) {   
          this.setData({
            activeSizeIndex: -1,
            flag: -1
          }) 
        }
        else {
          this.setData({
            activeSizeIndex: index,
            flag: index
          }) 
        }
      },
    复制代码

点击尺码，`flag==index`即为选中状态，再次点击时或者点击其他尺码时设置为非选中状态，否则使`flag`等于`index`，使其变成选中状态。

## 搜索页 ##

![561e1fa976bf1b1c529ac4661c1a8644.gif][]

‍  002.gif

### 搜索页样式 ###

![78f66e8cb493491ef670ea98fdbe92fe.png][] 01.png

<view class="page">
      <view class="search">
        <van-stichy>
          <van-search value="{
        {value}}" bind:clear="onClear" placeholder="输入商品名称、货号"/>
        </van-stichy>
        
        
        <block wx:if="{
        {showHistory == true && historyList.length > 0}}">
          <view class="historyContainer">
            <view class="title">历史搜索<image class="delete" src=""></image>
            </view>
            <view class="historyList">
              <view class="historyItem">
                <text class="order">{
        {}}</text>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    复制代码

搜索页面主要分为头部搜索框和内容（搜索推荐，历史记录和搜索到的商品列表）两部分。这里用`van-sticky`包装搜索框使吸顶，内容部分则用`block`标签包装，利用`wx:if`这个控制属性来判断是否显示。

### 搜索记录 ###

async onSearch(e) {
        // console.log(e);
        if (!e.detail.trim()) {
          wx.showToast({
            title: '请输入商品名',
          })
          return
        }
        let {value, historyList} = this.data
        if(historyList.indexOf(value) !== -1) {
          historyList.splice(historyList.indexOf(value), 1)
        }
        historyList.unshift(value)
        this.setData({
          historyList
        })
        wx.setStorageSync('value', historyList)
        let keyword = e.detail.trim()
        let results = await dewuCollection
          .where({
            title: db.RegExp({
              regexp: keyword,
              options: 'i'
            })
          })
          .get()
        if (results.data.length == 0 || keyword == '') {
          wx.showToast({
            title: '不存在'+keyword,
          })
        }
        else {
          await dewuCollection
          .where({
            title: db.RegExp({
              regexp: keyword,
              options: 'i'
            })
          })
          .orderBy('hot', 'desc')
          .get()
          .then(res => {
            console.log(res);
            this.setData({
              results: res.data
            })
          })
        }
      },
    onLoad() {
        this.getSearchHistory()  //获取历史搜索
      },
    getSearchHistory() {
        let historyList = wx.getStorageSync('value')
        if(historyList) {
          this.setData({
            historyList
          })
        }
      },
    复制代码

页面加载时从本地`storage`中获取历史搜索记录，在确定搜索onSearch时判断value是否为空，将合法`value`插入`historyList`中，这里使用的时`unshift`方法，这样可以保证最近的搜索记录展示在前面，利用正则表达式模糊查询数据库中符合的项存入数组`results`中，当`results.length > 0`时显示商品列表。利用`wx.setStorageSync`将`value`存入缓存，`wx.getStorageSync`获取打印出来。通过`indexOf`方法判断`value`是否已经存在，是则删除`historyList`中的该项。

### 历史搜索 ###

async historySearch(e) {
        // console.log(e);
        let historyList = this.data.historyList
        let value = historyList[e.currentTarget.dataset.index]
        this.setData({
          value,               //修改value
          showHotList: false,  //隐藏热门搜索
          showHistory: false,  //隐藏历史搜索
          results: []          //清空商品列表
        })
      },
    复制代码

点击历史搜索项时`setData`使对应值改变，再调用`onSearch`方法。

### 清空控件 ###

onClear() {
        this.setData({
          results: [],
          value: '',
          showHotList: true,
          showHistory: true
        });
      },
      onChange(e) {  //search框输入改变时实时修改数据
        // console.log(e.detail);
        this.setData({
          value: e.detail,
          showHotList: false,
          showHistory: false,
          results: []
        })
        // console.log(this.data.showHotList);
        if (this.data.value=='') {
          this.setData({
            showHotList: true,
            showHistory: true
          })
        }
      },
    复制代码

### 清空搜索历史 ###

deleteSearchHistory() {
        wx.showModal({
          content: '确认清空历史记录',
          success: (res) => {
            if(res.confirm) {
              this.setData({
                historyList: []
              })
            }
          }
        })
        wx.removeStorageSync('value')
      },
    复制代码

点击删除icon弹出对话框`wx.showModal`实现交互，用户点击确定则清空`historyList`并利用`wx.removeStorageSync`将本地存储的历史记录删除。

## 品牌分类页 ##

![78c99411eb897f291b1c93684387e244.gif][] 003.gif

### 分类页样式 ###

![59471becd434036051956ce122668014.png][] 07.png

<view class="page">
      <van-sticky>
        <view class="search" bindtap="gotoSearch">
        <van-search placeholder="搜索商品" input-align="center" disabled />
      </view>
      </van-sticky>
      
      <view class="kinds">
        <view class="hd">
        <scroll-view class="scroll-view-left">
          <view class="scroll-view-left-item {
        {activeNavIndex == index?'active': ''}}">
            <text>{
        {}}</text>
          </view>
        </scroll-view>
      </view>
      
      <view class="bd">
        <scroll-view>
          <view>
            <view class="kind-title">
            <van-divider contentPosition="center">{
        {}}</van-divider>
            </view>
            <van-grid>
            <van-grid-item>{
        {}}</van-grid-item>
            </van-grid>
          </view>
        </scroll-view>
      </view>
      </view>
    </view>
    复制代码

分类页面主要是使用了`scroll-view`设置竖向滚动，点击左侧`scroll-view-left-item`时该项变为得物色（`#00cbcc`）并显示对应的品牌种类项`kindsItem`。整体采用`flex`布局，这里的坑是`scroll-view-left`应该把`font-size`设为0，在子元素`scroll-view-left-item`中设置`font`，避免块元素边距影响布局。

### 初始化品类 ###

onLoad: function (options) {
          this.setData({
            kindNav: kindNav,
            kindall: kindItem,
        // console.log(this.data.kindall);
        let kinds=[];
        // console.log(this.data.kindall)
        this.data.kindall.forEach(kind => { //循环从所有品类中获取对应kindNav的并存入数组中
          if(kind.camptype == 0) {
            kinds.push(kind)
          }
        })
        this.setData({
          kindItem: kinds,
        })
        }, )
      },
    复制代码

### 选择分类 ###

changeKinds(e) {
        console.log(e);
        let {index, type} = e.currentTarget.dataset;
        console.log(index, type);//index与推荐品牌的索引有关。type与kind.js的camptype有关
        this.setData({
          activeNavIndex: index,
        })
        let title=[]
        this.data.kindTitles.forEach(kindTitle => {
          if(index == kindTitle.titletype) {
            title.push(kindTitle)
          }
        })
        this.setData({
          kindItem: kinds,
        })
      },
    复制代码

### 绑定筛选页 ###

gotoAssem(e) {
        // console.log(e);  利用kind属性值唯一（buy页面tabs的title）
        wx.navigateTo({
          url: '/pages/buy_page/page/assem/assem?title='+e.currentTarget.dataset.title,
        })
      },
    复制代码

## 筛选排序页 ##

![fb0cc1489acb163575f740f3e04fced1.gif][] 004.gif

### 排序页样式 ###

![0047fea31738ff69ca8ab9826536ad97.png][] 08.png

<view class="page">
      <van-sticky>
        <view class="search" bindtap="gotoSearch">
          <van-search placeholder="{
        {titles}}" disabled />
        </view>
        <view class="tab">
          <view wx:for="{
        {tabs}}" wx:key="index" data-index="{
        {index}}"
            class="tab-item {
        {activeTabIndex == index?'active': ''}}" bindtap="changeItem">
            <text>{
        {item.title}}</text>
            <image style="width:26rpx;height:26rpx;" src="{
        {item.pic}}"></image>
          </view>
        </view>
      </van-sticky>
    </view>
    复制代码

`tab`使用`flex`布局。`goods`部分布局参照`buy`页面的商品布局。

![a599c7c314d0b6a3cb15b09be0c4e14d.png][] 011.png

<van-popup>
        <scroll-view class="pop" scroll-y>
          <van-collapse>
            <van-collapse-item title="适用人群" value="全部" name="1">
            </van-collapse-item>
            <van-grid column-num="3" gutter="{
        { 10 }}">
              <van-grid-item class="{
        {activeIndex1==index?'active1':''}}">{
        {}}</van-grid-item>
            </van-grid>
          </van-collapse>
          
          <van-goods-action>
            <button>重置</button>
            <button>确定</button>
          </van-goods-action>
        </scroll-view>
      </van-popup>
    复制代码

这里使用`van-collapse`组件做折叠面板时有个坑，不应该将`van-grid`内容部分放在`van-collapse-item`中，应与其同级，否则会在该单元格下形成留白且无法正常显示内容，多次尝试后还是放在外面方便实现效果。

### 初始商品排序 ###

async onLoad(options) {
        // console.log(options);
        let title = options.title
        let data1 = await dewuCollection
        .where({
          kind: title        //绑定跳转时（kind唯一）获取对应数据
        }) 
        .get()
        // console.log(data1);
        this.setData({
          goods: data1.data,
          titles: title
        })
      },
    复制代码

### 基本排序 ###

async changeItem(e) {  
        // console.log(e);
        let index = e.currentTarget.dataset.index  //index对应排序方式
        this.setData({
          activeTabIndex: index
        })
        // console.log(index);
        if(index == 1) {                        //销量排序
        await dewuCollection
        .where({
          kind: this.data.titles
        })
        .orderBy('buyer', 'desc') 
        .get()
        .then(res => {
          this.setData({
            goods: res.data,
            index: index
          })
          // console.log(this.data.index);
        })
        }
        if(index == 0) {                        //综合排序
          await dewuCollection
          .where({
            kind: this.data.titles
          })
          .get()
          .then(res => {
            this.setData({
              goods: res.data
            })
          })
        }
        if(index == 2 && this.data.flag == -1) {  //价格降序排序
          await dewuCollection
          .where({
            kind: this.data.titles
          })
          .orderBy('price', 'desc') 
          .get()
          .then(res => {
            this.setData({
              goods: res.data,
              flag: 1
            })
          })
          return
        }
        if(index == 3) {                         //创建时间排序
          await dewuCollection
          .where({
            kind: this.data.titles
          })
          .orderBy('ctime', 'desc') 
          .get()
          .then(res => {
            this.setData({
              goods: res.data
            })
          })
        }
        if(index == 4) {                         //弹出筛选层
          this.setData({ 
            show: true,
          })
        }
        else if(index == 2 && this.data.flag == 1) {    //价格升序排序
          await dewuCollection
          .where({
            kind: this.data.titles
          })
          .orderBy('price', 'asc') 
          .get()
          .then(res => {
            this.setData({
              goods: res.data,
              flag: -1
            })
          })
        }
      },
    复制代码

设置一个flag属性默认值为-1，`flag==-1`时点击价格降序排序并设置`flag==1`，`flag==1`时点击价格升序排序并设置`flag==-1`。

### 筛选排序 ###

pick(e) {
        let flag = e.currentTarget.dataset.flag
        let index = e.currentTarget.dataset.index
        let cd = this.data.human[index].kind
        if(flag==index) {
          this.setData({
            activeIndex1: -1,
            flag1: -1,
            cd1: ''
          }) 
        }
        else {
          this.setData({
            activeIndex1: index,
            flag1: index,
            cd1: cd
          }) 
        }
      },
    复制代码

### 筛选重置 ###

replace() {    // 点击重置按钮将所有筛选条件回复默认
        this.setData({
          flag1: -1,
          activeIndex1: -1,
          flag2: -1,
          activeIndex2: -1,
          flag3: -1,
          activeIndex3: -1,
          cd1: '',
          cd2: '',
          cd3: 0,
          cd4: 10000000,
        })
      },
    复制代码

这里有一个坑是，不可在`data`中声明（`num：Infinity`），这里无穷大并不会生效，目前优化是声明为常量.

### 确认筛选 ###

async ischeck() {   //点击确定按钮进行筛选显示结果
        let cd3 = Number(this.data.cd3)
        let cd4 = Number(this.data.cd4)==0?1000000:Number(this.data.cd4)
        let index = Number(this.data.index)
        if(this.data.cd1!='' && this.data.cd2!=''){
          await dewuCollection
        .where({
          kind: this.data.titles,
          sex: this.data.cd1,
          brand: this.data.cd2,
          price: _.gt(cd3).and(_.lt(cd4)),
        })
        .get()
        .then(res => {
          this.setData({
            goods: res.data,
            show: false,
          })
        })
        return
        }  
      },
    复制代码

## 难点排坑 ##

<van-grid-item use-slot wx:for="{
        {shoes}}" data-item="{
        {item}}" 
        wx:key="index" data-id="{
        {item._id}}" bindtap="gotoDetail"></van-grid-item>
        
          gotoDetail(e) {
        // console.log(e);
        wx.navigateTo({
          url: '/pages/buy_page/page/detail/detail?id='+e.currentTarget.dataset.id,
        })
      },      
    复制代码

跳转到详情页且保留对应数据项。这里利用`_id`唯一，将每一项的`_id`赋给`data-id`,当`id`相等时才能跳转并接受对应`_id`的数据。

<van-grid-item class="{
        {activeSizeIndex==index?'size-active':''}}" 
            use-slot wx:for="{
        {size}}" wx:key="index" data-flag="{
        {flag}}" 
            data-index="{
        {index}}" bindtap="pickSize">
              <view class="size">
                <text id="p3">{
        {item.size}}</text>
                <text id="p4">￥{
        {item.price}}</text>
              </view>
            </van-grid-item>
            
             pickSize(e) {
                let flag = e.currentTarget.dataset.flag
                let index = e.currentTarget.dataset.index
                if(flag==index) {
                  this.setData({
                    activeSizeIndex: -1,
                    flag: -1
                  }) 
                }
                else {
                  this.setData({
                    activeSizeIndex: index,
                    flag: index
                  }) 
                }
              },
    复制代码

点击尺码时选中并更改`text`，再次点击该项则重置样式，若点击其他项则取消选中，选中被点击项。这里通过多设一个`flag`，结合`index`双重控制是否选中。

<view 
          wx:for="{
        {kindNav}}"
          wx:key="index"
          data-index="{
        {index}}"
          data-type="{
        {item.type}}"
          bindtap="changeKinds"
          class="scroll-view-left-item {
        {activeNavIndex == index?'active': ''}}">
            <text>{
        {item.text}}</text>
          </view>
          
        changeKinds(e) {
            console.log(e);
            let {index, type} = e.currentTarget.dataset;
            console.log(index, type);//index与推荐品牌的索引有关。type与kind.js的camptype
            this.setData({
              activeNavIndex: index,
            })
            let kinds = []
            this.data.kindall.forEach(kind => {
              if(kind.camptype == type) {
                kinds.push(kind)
              }
            })
            this.setData({
              kindItem: kinds,
            })
          }
    复制代码

绑定`type`和`kind.camptype`，当点击项改变时，将当前项`index`赋给`activeNavIndex`，用`kindall`存储所有数据项，使用`foreach`循环遍历`kindall`，将满足条件`kind.camptype==type`的数据存入一个数组中`kinds`，再将`setData`即可。

清空历史记录时不仅将`historyList`设为空，且利用`wx.removeStorageSync`将本地存储的缓存清除。

### 小建议 ###

在自己写项目时，多使用`console.log()`打印，跟进数据变化；多查看文档w3cschool\[7\]，微信开发文档\[8\]，Vant-Weapp\[9\]。

## 源码 ##

本项目源码\[10\]：https://gitee.com/onepiece1205/dewu\_weapp

## 结语 ##

写项目的过程对我来说是一个挑战，毕竟第一次专注于合作做项目，项目中遇到的bug会烦人但是坚持写功能后是非常有成就感的，非常感谢在我写项目过程中帮助过我的老师和同学。如果你喜欢我的这篇文章或者看到这里对你有些许帮助，不妨点个赞吧????！同时也非常希望看到文章的你能给我一些建议，期待与你一起讨论学习微信小程序！（点击????了解更多\[11\]）

![0a7a76411a7c8c1d77916bb02a7bd35b.gif][] 005.gif

关于本文

# 来源：onepiece1205 #

https://juejin.cn/post/6997644572629139492

![ad206d9a035101b8bfcacd06907e16fb.png][]

往期推荐

[大厂面试过程复盘(微信/阿里/头条,附答案篇)][Link 1]

![ff79632fc89aa860cea1e03af58a3f4e.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![49f70caaf1e90e7379e6b1cdb90775fb.png][]

[专心工作只想搞钱的前端女程序员的2020][2020]

![2aa6831c22a362a2df464ae027931c24.png][]

最后

*  欢迎加我微信，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![dc04ba0620796ef3d8b02db0601c1f1a.png][]

![7d894d0151a6fb61850ed1850725f188.png][]

点个**在看**支持我吧

![789924e5c4c30b361bc22b4947665b59.gif][]

[bb391199d04a2468c52fad0300ef585c.png]: /images/20220829/37ed189aef264c5cb09a20672c0200a8.png
[6b360cfc24a29844d7e29c13bd6261f8.gif]: /images/20220829/e4a310af860c4102a1a09aa883c5e37c.png
[9727c7f18221b6068fe61a8643fd7381.png]: /images/20220829/7a080164481842a2b7033bffa417d0fa.png
[5d06910e1116d46d2dee11955992e291.png]: /images/20220829/dbc3161410704330a921e5c5c1f6b761.png
[f6de1377d99434e0d6548b2e59da12fd.png]: /images/20220829/d67ec767c5e146e8835c1bfb51a8cc0c.png
[1d69c3bb1eeb55ee666b0f2b350f29b1.png]: /images/20220829/fba062e18d534e7e804ab113e4c4a88c.png
[ba701c2fff10708a71a2fccd2650aa12.png]: https://img-blog.csdnimg.cn/img_convert/ba701c2fff10708a71a2fccd2650aa12.png
[5eb279c31f4f942c47e1ce4f3cb52bce.png]: https://img-blog.csdnimg.cn/img_convert/5eb279c31f4f942c47e1ce4f3cb52bce.png
[c2bf09628c3651da5f5700eed64741d5.png]: /images/20220829/ee360b5d2f5640b69bbea868fc9fb930.png
[995b5bd8ae52e98a199b87783a005d15.png]: https://img-blog.csdnimg.cn/img_convert/995b5bd8ae52e98a199b87783a005d15.png
[349f2c8b144c0969311ddf1a6c114d28.png]: https://img-blog.csdnimg.cn/img_convert/349f2c8b144c0969311ddf1a6c114d28.png
[db78dd08c81748bff48dae3c417e7be6.png]: /images/20220829/ef4a99fd05f94642b7cbdd68b28bfe26.png
[aadf4ce55f5332a610ea34a1ad15c490.gif]: /images/20220829/1bb99662b6df4d19a17ecddae9ee342a.png
[ae9220de3c8326119e755cffa79b7f38.png]: /images/20220829/37fe5f33c7f64784a1c7486d07e9c07a.png
[a3579c7d47294e7da01805396b58693b.gif]: /images/20220829/2ef665bb72984a1fbd45b57cfb583f6a.png
[e2a3ea1a34984a0e34fadd7deb3b0708.png]: /images/20220829/854acf5098d84762bb2819402bffef86.png
[e675380cb74b729b47d34b4cefbf4763.png]: /images/20220829/7311ee693fda41589049d82d9e3bbed1.png
[3454263e5851a6824ae7ba9d191dfe12.png]: /images/20220829/cc2cd1a9b67a43c797efd1420bc766e6.png
[561e1fa976bf1b1c529ac4661c1a8644.gif]: /images/20220829/84aecec9d9fd4744b113103f6432b297.png
[78f66e8cb493491ef670ea98fdbe92fe.png]: /images/20220829/b76ec6396d5d4d7dbbd6569b33fb95f6.png
[78c99411eb897f291b1c93684387e244.gif]: /images/20220829/983977d21c524a9994ba24fa4c71a38d.png
[59471becd434036051956ce122668014.png]: /images/20220829/a58e65c731a2474bb0c8a13d474d0511.png
[fb0cc1489acb163575f740f3e04fced1.gif]: /images/20220829/cdff801ad340451a817bec696dda91df.png
[0047fea31738ff69ca8ab9826536ad97.png]: /images/20220829/22e4213af84041b3a4f627acb13e2a2f.png
[a599c7c314d0b6a3cb15b09be0c4e14d.png]: /images/20220829/a347cfd4c1134c33b2cf8270e32a5bb9.png
[0a7a76411a7c8c1d77916bb02a7bd35b.gif]: /images/20220829/05b6a0a189774a06b3e4f8db86a3140f.png
[ad206d9a035101b8bfcacd06907e16fb.png]: /images/20220829/5da7298b5ad644e59f265bab0ca8bc52.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175e460c6026d76bcdfc6dd42cfe80a3f14ea832d1922d65043f666d6de22bd17b09e779ed9&idx=2&mid=2649829027&scene=21&sn=1a433047a8d6e8af65012bfa0bd27e3f#wechat_redirect
[ff79632fc89aa860cea1e03af58a3f4e.png]: /images/20220829/9edead4bb0ff4931bce22a6992f0ae04.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175ef9ec60266880a86f33085ff43f95e3180846c5f139cb9b1b33c3245201157f39d949e9a&idx=1&mid=2649826653&scene=21&sn=9e5e2de78a8ef4de3820769ff3ab7c02#wechat_redirect
[49f70caaf1e90e7379e6b1cdb90775fb.png]: /images/20220829/b363c1e69fb84addaf512a9a82bf86b8.png
[2020]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng%3D%3D&chksm=f175f306c6027a1029967cde600630a5107fbbfdd125b64ba3f2c9d9b570b102162ab4c3b373&idx=1&mid=2649831877&scene=21&sn=9352cf4624308602c50a6fd10379d132#wechat_redirect
[2aa6831c22a362a2df464ae027931c24.png]: /images/20220829/dbe813a279644cd3af1d89ae9b595a87.png
[dc04ba0620796ef3d8b02db0601c1f1a.png]: /images/20220829/2c8f0dbdff8b4c329977cf0f34361ae5.png
[7d894d0151a6fb61850ed1850725f188.png]: /images/20220829/08f49421ffdc4e1d96770d8feea06523.png
[789924e5c4c30b361bc22b4947665b59.gif]: /images/20220829/8ddb470ff6eb4a9682ac702c0be7ed9c.png