最近正在學(xué)習(xí)微信小程序開發(fā)挠唆，也是與兩個(gè)同學(xué)一起合作著手仿做得物APP微信小程序。這里主要分享一下我的學(xué)習(xí)過程及踩過的一些坑嘱吗，希望對(duì)您有所幫助损搬。
開發(fā)準(zhǔn)備
- 微信開發(fā)者工具
- VScode代碼編輯器
- 得物APP微信小程序
- 有贊vant組件庫
- 阿里巴巴矢量圖標(biāo)庫
- markman（取色量距）
總體架構(gòu)
- 該項(xiàng)目基于小程序云開發(fā)，使用的模板是云開發(fā)快速啟動(dòng)模板由于是個(gè)全棧項(xiàng)目柜与，前端使用小程序所支持的wxml + wxss + js開發(fā)模式巧勤，命名采用BEM命名規(guī)范。后臺(tái)則是借助云數(shù)據(jù)庫進(jìn)行數(shù)據(jù)管理弄匕÷ぃ【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】
項(xiàng)目中我負(fù)責(zé)的部分主要如下（一些數(shù)據(jù)為固定數(shù)據(jù)寫在config中，js文件通過module.exports暴露迁匠，需要引用時(shí)在頁面對(duì)應(yīng)js頭部引入剩瓶，例const {} = require('../../../../config/buys')）。項(xiàng)目中我使用的較多vant組件城丧，需要在構(gòu)建npm包時(shí)引入vant延曙，詳情可見有贊vant的npm安裝。頁面使用第三方組件時(shí)須在對(duì)應(yīng)json文件中聲明亡哄，為了不做重復(fù)工作可直接在app.json中聲明枝缔。例：（"usingComponents": "van-search": "@vant/weapp/search/index"}）
|-config 對(duì)應(yīng)數(shù)據(jù)
|-assem.js
|-buys.js
|-detail.js
|-kind.js
|-search.js
|-pages
|-buy_page
|-page
|-assem 篩選排序頁
|-buy 購買首頁
|-detail 商品詳情頁
|-kinds 品牌分類頁
|-produce 鑒別簡(jiǎn)介頁
|-search 搜索頁
項(xiàng)目規(guī)劃
- 在做該小程序之前，我先是分析每個(gè)頁面對(duì)應(yīng)功能，了解這款小程序的交互細(xì)節(jié)愿卸，清楚數(shù)據(jù)集合數(shù)據(jù)項(xiàng)灵临。這樣大概可以分為分析頁面，創(chuàng)建數(shù)據(jù)集合趴荸，解構(gòu)頁面基本布局儒溉，數(shù)據(jù)綁定及跳轉(zhuǎn)四步來展開。
參照得物APP微信小程序发钝，下面是我的小程序的tabBar顿涣。（有點(diǎn)糙，但是還能看）
"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": "洗護(hù)",
"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"
}
]
},
云數(shù)據(jù)庫
云數(shù)據(jù)庫是一種NoSQL數(shù)據(jù)庫酝豪。每一張表是一個(gè)集合园骆。 對(duì)于我的項(xiàng)目部分，我主要建立了一個(gè)商品集合寓调。
dewu_goods 商品表 用于存儲(chǔ)創(chuàng)商品的信息
- _id
- amway 是否為推薦
- brand 品牌
- buyer 已購買人數(shù)
- ctime 數(shù)據(jù)創(chuàng)建時(shí)間
- digest 詳情介紹
- img 詳情圖
- pic 商品展示圖
- kind 種類
- price 價(jià)格
- sex 適應(yīng)人群
- title 簡(jiǎn)介
- type 首頁索引
建立數(shù)據(jù)集合后需修改數(shù)據(jù)權(quán)限才可正常訪問锌唾。
可對(duì)在數(shù)據(jù)庫中進(jìn)行這些操作，注意導(dǎo)入數(shù)據(jù)格式需要是.csv或.json文件夺英，可先用excel表格建立數(shù)據(jù)集合如何轉(zhuǎn)化成對(duì)應(yīng)格式文件直接導(dǎo)入數(shù)據(jù)庫晌涕。
const db = wx.cloud.database() //云數(shù)據(jù)庫
const dewuCollection = db.collection('dewu') //在js文件中導(dǎo)入數(shù)據(jù)集合
項(xiàng)目解構(gòu)
以下是我主要實(shí)現(xiàn)的得物APP小程序界面
接下來對(duì)每個(gè)頁面的細(xì)節(jié)進(jìn)行解構(gòu)。
購買首頁
購買首頁樣式
<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="搜索單號(hào)" disabled />
</view>
<view class="dewu-kinds" bindtap="kinds"><image src=""></image>
</view>
</view>
</van-sticky>
<!-- van-tabs實(shí)現(xiàn)購買頁導(dǎo)航及與內(nèi)容頁對(duì)應(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 style="" 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>
商品項(xiàng)van-grid-item中采用絕對(duì)定位痛悯。tips中將direction屬性設(shè)置為horizontal余黎，可以讓宮格的內(nèi)容呈橫向排列。搜索框設(shè)置disabled屬性為禁用狀態(tài)解決單擊自動(dòng)聚焦的問題载萌。在使用van-grid布局時(shí)自定義每一項(xiàng)的屬性需設(shè)置use-slot屬性惧财，否則不生效。
這個(gè)頁面布局并不復(fù)雜扭仁，不過我在寫這個(gè)布局時(shí)還是遇到了坑（感覺是自己跳進(jìn)去的 我太了）垮衷。在做dewu-hd吸頂時(shí)我是直接用van-sticky包起來實(shí)現(xiàn)，但是實(shí)際效果是tabs也需要固定在dewu-hd下面乖坠。這里不可以使用同上的方法搀突，實(shí)際效果會(huì)使得整個(gè)van-tabs吸頂導(dǎo)致頁面無法滑動(dòng)。其實(shí)在這里只需要給van-tabs添加一個(gè)sticky屬性并且設(shè)置offset-top熊泵，注意這兩個(gè)屬性需一起使用才能生效仰迁。
獲取商品項(xiàng)
async onLoad() {
this.proData() //獲取推薦數(shù)據(jù)項(xiàng)
this.shoeData() //獲取鞋類數(shù)據(jù)項(xiàng)
},
proData() {
const {data} = await dewuCollection
.where({
amway: db.command.eq('TRUE')
})
.field({ //獲取指定數(shù)據(jù)項(xiàng)，提升性能
_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ù)項(xiàng)id等于_id時(shí)跳轉(zhuǎn)到詳情頁且展示對(duì)應(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?'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">請(qǐng)選擇尺碼</view>
<image class="ricon" style="width:26rpx;height:26rpx;" src=""></image>
</van-cell>
<!-- flex布局 每一個(gè)swiper-item包含三項(xiàng) -->
<view class="detail_bd">
<swiper></swiper></view>
<van-goods-action>
<button>立即購買</button>
</van-goods-action>
</view>
整體分為detail_hd和detail_bd兩部分。自定義swiper需設(shè)置dot對(duì)應(yīng)展示圖片并更改樣式卒蘸，circular屬性設(shè)置是否啟用滑塊切換動(dòng)畫雌隅，這里使用三目運(yùn)算符判斷是否添加新的樣式類名。在定義商品價(jià)格的樣式的時(shí)候可以通過first-letter偽元素來定義￥符號(hào)樣式。引用組件van-goods-action使得購買按鈕吸底澄步。
<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}}">請(qǐng)選擇商品</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組件冰蘑，給對(duì)應(yīng)標(biāo)簽設(shè)置事件即可綁定彈出和泌。例：<van-cell bind:click="showPopup"></van-cell>村缸。三目運(yùn)算符設(shè)置默認(rèn)樣式并且控制選中邊框樣式，設(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;" src=""></image>
</view>
</view>
</van-sticky>
設(shè)置detail_produce-hd吸頂县恕，給右側(cè)關(guān)閉icon綁定bind:close="onClose"事件东羹。
獲取商品詳情
async onLoad(options) { //獲取對(duì)應(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
})
}
},
點(diǎn)擊尺碼，flag==index即為選中狀態(tài)忠烛，再次點(diǎn)擊時(shí)或者點(diǎn)擊其他尺碼時(shí)設(shè)置為非選中狀態(tài)属提，否則使flag等于index，使其變成選中狀態(tài)美尸。
搜索頁
搜索頁樣式
<view class="page">
<view class="search">
<van-stichy>
<van-search value="{{value}}" bind:clear="onClear" placeholder="輸入商品名稱冤议、貨號(hào)"/>
</van-stichy>
<!-- block包裝 flex布局 -->
<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>
搜索頁面主要分為頭部搜索框和內(nèi)容（搜索推薦，歷史記錄和搜索到的商品列表）兩部分师坎。這里用van-sticky包裝搜索框使吸頂恕酸，內(nèi)容部分則用block標(biāo)簽包裝，利用wx:if這個(gè)控制屬性來判斷是否顯示胯陋。
搜索記錄
async onSearch(e) {
// console.log(e);
if (!e.detail.trim()) {
wx.showToast({
title: '請(qǐng)輸入商品名',
})
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
})
}
},
頁面加載時(shí)從本地storage中獲取歷史搜索記錄蕊温，在確定搜索onSearch時(shí)判斷value是否為空，將合法value插入historyList中遏乔，這里使用的時(shí)unshift方法义矛，這樣可以保證最近的搜索記錄展示在前面，利用正則表達(dá)式模糊查詢數(shù)據(jù)庫中符合的項(xiàng)存入數(shù)組results中盟萨，當(dāng)results.length > 0時(shí)顯示商品列表症革。利用wx.setStorageSync將value存入緩存，wx.getStorageSync獲取打印出來。通過indexOf方法判斷value是否已經(jīng)存在，是則刪除historyList中的該項(xiàng)腿宰。
歷史搜索
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: [] //清空商品列表
})
},
點(diǎn)擊歷史搜索項(xiàng)時(shí)setData使對(duì)應(yīng)值改變燕锥，再調(diào)用onSearch方法。
清空控件
onClear() {
this.setData({
results: [],
value: '',
showHotList: true,
showHistory: true
});
},
onChange(e) { //search框輸入改變時(shí)實(shí)時(shí)修改數(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: '確認(rèn)清空歷史記錄',
success: (res) => {
if(res.confirm) {
this.setData({
historyList: []
})
}
}
})
wx.removeStorageSync('value')
},
點(diǎn)擊刪除icon彈出對(duì)話框wx.showModal實(shí)現(xiàn)交互墨微，用戶點(diǎn)擊確定則清空historyList并利用wx.removeStorageSync將本地存儲(chǔ)的歷史記錄刪除。
品牌分類頁
分類頁樣式
<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設(shè)置豎向滾動(dòng)，點(diǎn)擊左側(cè)scroll-view-left-item時(shí)該項(xiàng)變?yōu)榈梦锷?code>#00cbcc）并顯示對(duì)應(yīng)的品牌種類項(xià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)從所有品類中獲取對(duì)應(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?'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頁面的商品布局舅锄。
<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組件做折疊面板時(shí)有個(gè)坑，不應(yīng)該將van-grid內(nèi)容部分放在van-collapse-item中司忱，應(yīng)與其同級(jí)皇忿，否則會(huì)在該單元格下形成留白且無法正常顯示內(nèi)容，多次嘗試后還是放在外面方便實(shí)現(xiàn)效果坦仍。
初始商品排序
async onLoad(options) {
// console.log(options);
let title = options.title
let data1 = await dewuCollection
.where({
kind: title //綁定跳轉(zhuǎn)時(shí)（kind唯一）獲取對(duì)應(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對(duì)應(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) { //價(jià)格降序排序
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)建時(shí)間排序
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) { //價(jià)格升序排序
await dewuCollection
.where({
kind: this.data.titles
})
.orderBy('price', 'asc')
.get()
.then(res => {
this.setData({
goods: res.data,
flag: -1
})
})
}
},
設(shè)置一個(gè)flag屬性默認(rèn)值為-1鳍烁，flag==-1時(shí)點(diǎn)擊價(jià)格降序排序并設(shè)置flag==1，flag==1時(shí)點(diǎn)擊價(jià)格升序排序并設(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() { // 點(diǎn)擊重置按鈕將所有篩選條件回復(fù)默認(rèn)
this.setData({
flag1: -1,
activeIndex1: -1,
flag2: -1,
activeIndex2: -1,
flag3: -1,
activeIndex3: -1,
cd1: '',
cd2: '',
cd3: 0,
cd4: 10000000,
})
},
這里有一個(gè)坑是幔荒，不可在data中聲明（num：Infinity），這里無窮大并不會(huì)生效梳玫，目前優(yōu)化是聲明為常量.
確認(rèn)篩選
async ischeck() { //點(diǎn)擊確定按鈕進(jìn)行篩選顯示結(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
}
},
難點(diǎn)排坑
<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,
})
},
跳轉(zhuǎn)到詳情頁且保留對(duì)應(yīng)數(shù)據(jù)項(xiàng)爹梁。這里利用_id唯一，將每一項(xiàng)的_id賦給data-id,當(dāng)id相等時(shí)才能跳轉(zhuǎn)并接受對(duì)應(yīng)_id的數(shù)據(jù)汽纠。
<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
})
}
},
點(diǎn)擊尺碼時(shí)選中并更改text卫键，再次點(diǎn)擊該項(xiàng)則重置樣式，若點(diǎn)擊其他項(xiàng)則取消選中虱朵，選中被點(diǎn)擊項(xiàng)莉炉。這里通過多設(shè)一個(gè)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?'active': ''}}">
<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)點(diǎn)擊項(xiàng)改變時(shí)服协，將當(dāng)前項(xiàng)index賦給activeNavIndex绍昂，用kindall存儲(chǔ)所有數(shù)據(jù)項(xiàng)，使用foreach循環(huán)遍歷kindall偿荷，將滿足條件kind.camptype==type的數(shù)據(jù)存入一個(gè)數(shù)組中kinds窘游，再將setData即可。
deleteSearchHistory() {
wx.showModal({
content: '確認(rèn)清空歷史記錄',
success: (res) => {
if(res.confirm) {
this.setData({
historyList: []
})
}
}
})
wx.removeStorageSync('value')
},
清空歷史記錄時(shí)不僅將historyList設(shè)為空跳纳，且利用wx.removeStorageSync將本地存儲(chǔ)的緩存清除忍饰。
小建議
在自己寫項(xiàng)目時(shí)，多使用console.log()打印寺庄，跟進(jìn)數(shù)據(jù)變化艾蓝；多查看文檔w3cschool力崇，微信開發(fā)文檔，Vant-Weapp赢织。
源碼
本項(xiàng)目源碼：https://gitee.com/onepiece1205/dewu_weapp
結(jié)語
寫項(xiàng)目的過程對(duì)我來說是一個(gè)挑戰(zhàn)亮靴，畢竟第一次專注于合作做項(xiàng)目，項(xiàng)目中遇到的bug會(huì)煩人但是堅(jiān)持寫功能后是非常有成就感的于置，非常感謝在我寫項(xiàng)目過程中幫助過我的老師和同學(xué)茧吊。如果你喜歡我的這篇文章或者看到這里對(duì)你有些許幫助，不妨點(diǎn)個(gè)贊吧俱两！同時(shí)也非常希望看到文章的你能給我一些建議饱狂，期待與你一起討論學(xué)習(xí)微信小程序曹步！
本文轉(zhuǎn)載自：https://www.php.cn/xiaochengxu-481204.html
更多編程相關(guān)知識(shí)宪彩，請(qǐng)?jiān)L問：編程入門！讲婚！
