Recently I am learning WeChat applet development, and I am also working with two classmates to imitate the WeChat applet of Wu APP. Here I will mainly share my learning process and some pitfalls I have encountered. I hope it will be helpful to you.

Development Preparation

• WeChat Developer Tools
• VScode Code Editor
• Dewu APP WeChat Mini Program
• Youzan vant component library
• Alibaba vector icon library
• markman(take color amount Distance)

Overall architecture

• This project is based on small program cloud development, and the template used is Cloud Development Quick Start TemplateBecause it is a full-stack project, the front-end uses the wxml wxss js development mode supported by mini programs, and the naming adopts the BEM naming convention. The backend uses cloud databases for data management. [Related learning recommendations: 小program development tutorial]

The parts I am responsible for in the project are mainly as follows (some data are fixed data written in config, The js file is exposed through module.exports. When it needs to be referenced, it should be introduced in the corresponding js header of the page, for example const {} = require('../../../../config/ buys')). I use many vant components in the project, and I need to introduce vant when building the npm package. For details, please see NPM Installation with Like Vant. When a page uses third-party components, it must be declared in the corresponding json file. In order to avoid duplication of work, it can be declared directly in app.json. Example: ("usingComponents": "van-search": "@vant/weapp/search/index"})

    |-config  對應(yīng)數(shù)據(jù)
        |-assem.js   
        |-buys.js    
        |-detail.js  
        |-kind.js    
        |-search.js  
    |-pages
        |-buy_page
            |-page
                |-assem   篩選排序頁
                |-buy     購買首頁
                |-detail  商品詳情頁
                |-kinds   品牌分類頁
                |-produce 鑒別簡介頁
                |-search  搜索頁

Project Planning

• Before making this mini program, I first analyzed the corresponding functions of each page, understood the interaction details of this mini program, and understood the data collection items. This can be roughly divided into four steps: analyzing the page, creating a data collection, deconstructing the basic layout of the page, data binding and jumping.

Refer to the Dewu APP WeChat applet. The following is the tabBar of my applet. (A bit rough, but still watchable)

  "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"
      }
    ]
  },

Cloud database

Cloud database is a NoSQL database. Each table is a collection. For the part of my project, I basically built a collection of items.

dewu_goods 商品表 用于存儲創(chuàng)商品的信息 
    - _id 
    - amway  是否為推薦
    - brand  品牌
    - buyer  已購買人數(shù)
    - ctime  數(shù)據(jù)創(chuàng)建時間
    - digest 詳情介紹
    - img    詳情圖
    - pic    商品展示圖
    - kind   種類
    - price  價格
    - sex    適應(yīng)人群
    - title  簡介
    - type   首頁索引

After creating the data collection, you need to modify the data permissions before you can access it normally.

These operations can be performed in the database. Note that the imported data format needs to be a .csv or .json file. You can First use an excel table to create a data set and how to convert it into a corresponding format file and directly import it into the database.

const db = wx.cloud.database() //云數(shù)據(jù)庫
const dewuCollection = db.collection('dewu') //在js文件中導(dǎo)入數(shù)據(jù)集合

Project Deconstruction

The following is the Dewu APP applet interface I mainly implemented

Next, we will deconstruct the details of each page.

Buy Home Page

Buy Home Page Style

<view class="page">
  <!-- 使用van-sticky設(shè)置dewu-hd吸頂 搜索欄-->
  <van-sticky>    
  <!-- dewu-hd使用flex布局 -->
    <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實現(xiàn)購買頁導(dǎo)航及與內(nèi)容頁對應(yīng) -->
  <van-tabs class="dewu-tabs">
    <van-tab title="推薦">
      <view class="dewu-tip">
        <view class="dewu-tip-img-hd"><image src=""></image>
        </view>
        <!-- 使用van-grid布局設(shè)置邊框隱藏快速定位 -->
        <van-grid>
          <van-grid-item use-slot>
            <image  src=""></image>
            <text>正品保障</text>
          </van-grid-item>
        </van-grid>
      </view>
      <view class="van-items">
        <van-grid class="van-grid-bd">
        <!-- grid布局自定義van-grid-item樣式 -->
          <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屬性設(shè)置為horizontal，可以讓宮格的內(nèi)容呈橫向排列。搜索框設(shè)置disabled屬性為禁用狀態(tài)解決單擊自動聚焦的問題。在使用van-grid布局時自定義每一項的屬性需設(shè)置use-slot屬性，否則不生效。

這個頁面布局并不復(fù)雜，不過我在寫這個布局時還是遇到了坑（感覺是自己跳進去的 我太了）。在做dewu-hd吸頂時我是直接用van-sticky包起來實現(xiàn)，但是實際效果是tabs也需要固定在dewu-hd下面。這里不可以使用同上的方法，實際效果會使得整個van-tabs吸頂導(dǎo)致頁面無法滑動。其實在這里只需要給van-tabs添加一個sticky屬性并且設(shè)置offset-top，注意這兩個屬性需一起使用才能生效。

獲取商品項

  async onLoad() {
     this.proData()   //獲取推薦數(shù)據(jù)項
     this.shoeData()  //獲取鞋類數(shù)據(jù)項
  },
  proData() {
     const {data} = await dewuCollection
    .where({
      amway: db.command.eq('TRUE')
    })
    .field({          //獲取指定數(shù)據(jù)項，提升性能
      _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屬性唯一，當(dāng)設(shè)定數(shù)據(jù)項id等于_id時跳轉(zhuǎn)到詳情頁且展示對應(yīng)數(shù)據(jù)。

商品詳情頁

商品詳情頁樣式

<view class="page">
<!-- 頭部 滑塊及標(biāo)題 -->
  <view class="detail_hd">
    <swiper class="swiper__hd">
        <swiper-item class="swiper_hd"></swiper-item>
    </swiper>
    <view class="dots1">
        <view class="{{current==index?&#39;active&#39;:&#39;&#39;}}"></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;" ></image>
  </van-cell>
  
  <!-- flex布局 每一個swiper-item包含三項 -->
  <view class="detail_bd">
  <swiper></swiper></view>

  <van-goods-action>
    <button>立即購買</button>
  </van-goods-action>
</view>

整體分為detail_hd和detail_bd兩部分。自定義swiper需設(shè)置dot對應(yīng)展示圖片并更改樣式，circular屬性設(shè)置是否啟用滑塊切換動畫，這里使用三目運算符判斷是否添加新的樣式類名。在定義商品價格的樣式的時候可以通過first-letter偽元素來定義￥符號樣式。引用組件van-goods-action使得購買按鈕吸底。

<van-popup closeable position="bottom" custom-  style="max-width:90%">
    <view class="detail_size-hd">
      <view class="detail_size-hd-img">
        <image bindtap="previewImage" mode="aspectFit" >
        </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組件，給對應(yīng)標(biāo)簽設(shè)置事件即可綁定彈出。例：<van-cell bind:click="showPopup"></van-cell>。三目運算符設(shè)置默認樣式并且控制選中邊框樣式，設(shè)置closeable屬性啟用關(guān)閉按鈕。square設(shè)置van-grid-item為方形，gutter設(shè)置格子間距。

<van-sticky sticky offset-top="{{ 180 }}">
      <view class="head">
        <view class="detail_produce-hd">相關(guān)推薦</view>
        <view class="detail_close" bindtap="onClose2">
          <image style="width:40rpx;height:40rpx;" ></image>
        </view>
      </view>
    </van-sticky>

設(shè)置detail_produce-hd吸頂，給右側(cè)關(guān)閉icon綁定bind:close="onClose"事件。

獲取商品詳情

  async onLoad(options) {  //獲取對應(yīng)_id的商品數(shù)據(jù)
    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() {     //關(guān)閉彈出層
    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即為選中狀態(tài)，再次點擊時或者點擊其他尺碼時設(shè)置為非選中狀態(tài)，否則使flag等于index，使其變成選中狀態(tài)。

搜索頁

搜索頁樣式

<view class="page">
  <view class="search">
    <van-stichy>
      <van-search value="{{value}}" bind:clear="onClear" placeholder="輸入商品名稱、貨號"/>
    </van-stichy>
    
    <!-- block包裝  flex布局 -->
    <block wx:if="{{showHistory == true && historyList.length > 0}}">
      <view class="historyContainer">
        <view class="title">歷史搜索<image class="delete" ></image>
        </view>
        <view class="historyList">
          <view class="historyItem">
            <text class="order">{{}}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
</view>

搜索頁面主要分為頭部搜索框和內(nèi)容（搜索推薦，歷史記錄和搜索到的商品列表）兩部分。這里用van-sticky包裝搜索框使吸頂，內(nèi)容部分則用block標(biāo)簽包裝，利用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方法，這樣可以保證最近的搜索記錄展示在前面，利用正則表達式模糊查詢數(shù)據(jù)庫中符合的項存入數(shù)組results中，當(dāng)results.length > 0時顯示商品列表。利用wx.setStorageSync將value存入緩存，wx.getStorageSync獲取打印出來。通過indexOf方法判斷value是否已經(jīng)存在，是則刪除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,  //隱藏?zé)衢T搜索
      showHistory: false,  //隱藏歷史搜索
      results: []          //清空商品列表
    })
  },

點擊歷史搜索項時setData使對應(yīng)值改變，再調(diào)用onSearch方法。

清空控件

  onClear() {
    this.setData({
      results: [],
      value: '',
      showHotList: true,
      showHistory: true
    });
  },
  onChange(e) {  //search框輸入改變時實時修改數(shù)據(jù)
    // 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實現(xiàn)交互，用戶點擊確定則清空historyList并利用wx.removeStorageSync將本地存儲的歷史記錄刪除。

品牌分類頁

分類頁樣式

<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?&#39;active&#39;: &#39;&#39;}}">
        <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設(shè)置豎向滾動，點擊左側(cè)scroll-view-left-item時該項變?yōu)榈梦锷?code>#00cbcc）并顯示對應(yīng)的品牌種類項kindsItem。整體采用flex布局，這里的坑是scroll-view-left應(yīng)該把font-size設(shè)為0，在子元素scroll-view-left-item中設(shè)置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 => { //循環(huán)從所有品類中獲取對應(yīng)kindNav的并存入數(shù)組中
      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與推薦品牌的索引有關(guān)。type與kind.js的camptype有關(guān)
    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,
    })
  },

篩選排序頁

排序頁樣式

<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?&#39;active&#39;: &#39;&#39;}}" 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頁面的商品布局。

  <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?&#39;active1&#39;:&#39;&#39;}}">{{}}</van-grid-item>
        </van-grid>
      </van-collapse>
      
      <van-goods-action>
        <button>重置</button>
        <button>確定</button>
      </van-goods-action>
    </scroll-view>
  </van-popup>

這里使用van-collapse組件做折疊面板時有個坑，不應(yīng)該將van-grid內(nèi)容部分放在van-collapse-item中，應(yīng)與其同級，否則會在該單元格下形成留白且無法正常顯示內(nèi)容，多次嘗試后還是放在外面方便實現(xiàn)效果。

初始商品排序

  async onLoad(options) {
    // console.log(options);
    let title = options.title
    let data1 = await dewuCollection
    .where({
      kind: title        //綁定跳轉(zhuǎn)時（kind唯一）獲取對應(yīng)數(shù)據(jù)
    }) 
    .get()
    // console.log(data1);
    this.setData({
      goods: data1.data,
      titles: title
    })
  },

基本排序

  async changeItem(e) {  
    // console.log(e);
    let index = e.currentTarget.dataset.index  //index對應(yīng)排序方式
    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) {                         //創(chuàng)建時間排序
      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
        })
      })
    }
  },

設(shè)置一個flag屬性默認值為-1，flag==-1時點擊價格降序排序并設(shè)置flag==1，flag==1時點擊價格升序排序并設(shè)置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() {    // 點擊重置按鈕將所有篩選條件回復(fù)默認
    this.setData({
      flag1: -1,
      activeIndex1: -1,
      flag2: -1,
      activeIndex2: -1,
      flag3: -1,
      activeIndex3: -1,
      cd1: '',
      cd2: '',
      cd3: 0,
      cd4: 10000000,
    })
  },

這里有一個坑是，不可在data中聲明（num：Infinity），這里無窮大并不會生效，目前優(yōu)化是聲明為常量.

確認篩選

  async ischeck() {   //點擊確定按鈕進行篩選顯示結(jié)果
    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
    }  
  },

難點排坑

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

跳轉(zhuǎn)到詳情頁且保留對應(yīng)數(shù)據(jù)項。這里利用_id唯一，將每一項的_id賦給data-id,當(dāng)id相等時才能跳轉(zhuǎn)并接受對應(yīng)_id的數(shù)據(jù)。

        <van-grid-item class="{{activeSizeIndex==index?&#39;size-active&#39;:&#39;&#39;}}" 
        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，再次點擊該項則重置樣式，若點擊其他項則取消選中，選中被點擊項。這里通過多設(shè)一個flag，結(jié)合index雙重控制是否選中。

      <view 
      wx:for="{{kindNav}}"
      wx:key="index"
      data-index="{{index}}"
      data-type="{{item.type}}"
      bindtap="changeKinds"
      class="scroll-view-left-item {{activeNavIndex == index?&#39;active&#39;: &#39;&#39;}}">
        <text>{{item.text}}</text>
      </view>
      
    changeKinds(e) {
        console.log(e);
        let {index, type} = e.currentTarget.dataset;
        console.log(index, type);//index與推薦品牌的索引有關(guān)。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，當(dāng)點擊項改變時，將當(dāng)前項index賦給activeNavIndex，用kindall存儲所有數(shù)據(jù)項，使用foreach循環(huán)遍歷kindall，將滿足條件kind.camptype==type的數(shù)據(jù)存入一個數(shù)組中kinds，再將setData即可。

  deleteSearchHistory() {
    wx.showModal({
      content: '確認清空歷史記錄',
      success: (res) => {
        if(res.confirm) {
          this.setData({
            historyList: []
          })
        }
      }
    })
    wx.removeStorageSync('value')
  },

清空歷史記錄時不僅將historyList設(shè)為空，且利用wx.removeStorageSync將本地存儲的緩存清除。

小建議

在自己寫項目時，多使用console.log()打印，跟進數(shù)據(jù)變化；多查看文檔w3cschool，微信開發(fā)文檔，Vant-Weapp。

Source code

Source code of this project: https://gitee.com/onepiece1205/dewu_weapp

Conclusion

The process of writing a project is a challenge for me. After all, it is my first time to focus on working together on a project. The bugs encountered in the project will be annoying, but after persisting in writing functions, it is very fulfilling. Thank you very much. Teachers and classmates who helped me during the project writing process. If you like this article of mine or if it is helpful to you, please give it a like! At the same time, I very much hope that you can give me some suggestions after reading the article, and I look forward to discussing and learning WeChat mini programs with you!

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Teach you how to imitate the WeChat applet of Wu APP. For more information, please follow other related articles on the PHP Chinese website!