黑馬電商品優(yōu)購(gòu)小程序

幾日前完成了該項(xiàng)目，整理了下大概的邏輯思路，希望和大家一起交流學(xué)習(xí)，文檔中不足之處希望各位不吝賜教。

該項(xiàng)目使用小程序原生mina框架

項(xiàng)目頁(yè)面的搭建

頁(yè)面名稱文件

首頁(yè)	index
分類	category
商品列表	goods_list
商品詳情	goods_detail
購(gòu)物車	cart
收藏	collect
訂單	order
搜索	search
個(gè)人中心	user
意見(jiàn)反饋	user
登錄	login
授權(quán)	auth
結(jié)算	pay

• 項(xiàng)目文件目錄

首頁(yè)

分類頁(yè)面

1.點(diǎn)擊左側(cè)菜單切換內(nèi)容

獲取被點(diǎn)擊的標(biāo)題身上的索引

給data中的currentIndex賦值

根據(jù)不同的索引來(lái)渲染右側(cè)的商品內(nèi)容

handleItemTap (e) {const { index } = e.currentTarget.dataset;let rightContent = this.Cates[index].children;this.setData({currentIndex: index,rightContent,scrollTop: 0})}

商品列表

Tab欄

1.自定義組件傳值

• ?組件通過(guò)屬性的?式給?組件傳遞參數(shù)、?組件通過(guò)事件的?式向?組件傳遞參數(shù)
• ?組件 把數(shù)據(jù) {{tabs}} 傳遞到 ?組件的 tabItems 屬性中
• ?組件 監(jiān)聽(tīng) onMyTab 事件
• ?組件 觸發(fā) bindmytap 中的事件
• ?定義組件觸發(fā)事件時(shí)，需要使? triggerEvent ?法，指定 事件名 、 detail 對(duì)象
• ? -> ? 動(dòng)態(tài)傳值 this.selectComponent("#tabs");

2.Tab欄切換

• 獲取被點(diǎn)擊的標(biāo)題索引

• 修改源數(shù)組

• 賦值到data中

• const { index } = e.detail; let { tabs } = this.data; tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false); this.setData({tabs })

3.下拉頁(yè)面功能

• ??的json?件中開(kāi)啟設(shè)置 enablePullDownRefresh:true
  

  • ??的JS中，綁定事件 onPullDownRefresh
  // 下拉刷新事件 onPullDownRefresh () {// 1 重置數(shù)組this.setData({goodsList: []})// 2 重置頁(yè)碼this.QueryParams.pagenum = 1;// 3 發(fā)送請(qǐng)求this.getGoodsList();}

啟?上拉??功能 onReachBottom ??觸底事件

加載下??功能

// 頁(yè)面上滑 滾動(dòng)條觸底事件onReachBottom () {// 1 判斷還有沒(méi)有下一頁(yè)數(shù)據(jù)if (this.QueryParams.pagenum >= this.totalPages) {// 沒(méi)有下一頁(yè)數(shù)據(jù)wx.showToast({ title: '沒(méi)有下一頁(yè)數(shù)據(jù)' });} else {// 還有下一頁(yè)數(shù)據(jù)this.QueryParams.pagenum++;this.getGoodsList();}},

商品詳情

1.點(diǎn)擊圖片預(yù)覽

• 實(shí)現(xiàn)效果

2.加入購(gòu)物車 邏輯

• 先綁定點(diǎn)擊事件
• 獲取緩存中的購(gòu)物車數(shù)據(jù) 數(shù)組格式
• 先判斷 當(dāng)前的商品是否已經(jīng)存在于 購(gòu)物車
• 已經(jīng)存在 修改商品數(shù)據(jù) 執(zhí)行購(gòu)物車數(shù)量++ 重新把購(gòu)物車數(shù)組 填充回緩存中
• 不存在于購(gòu)物車的數(shù)組中 直接給購(gòu)物車數(shù)組添加一個(gè)新元素 新元素 帶上 購(gòu)買數(shù)量屬性 num 重新把購(gòu)物車數(shù)組 填充回緩存中
• 彈出提示

// 點(diǎn)擊 加入購(gòu)物車handleCartAdd() {// 1 獲取緩存中的購(gòu)物車 數(shù)組let cart = wx.getStorageSync("cart") || [];// 2 判斷 商品對(duì)象是否存在于購(gòu)物車數(shù)組中let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);if (index === -1) {//3 不存在 第一次添加this.GoodsInfo.num = 1;this.GoodsInfo.checked = true;cart.push(this.GoodsInfo);} else {// 4 已經(jīng)存在購(gòu)物車數(shù)據(jù) 執(zhí)行 num++cart[index].num++;}// 5 把購(gòu)物車重新添加回緩存中wx.setStorageSync("cart", cart);// 6 彈窗提示wx.showToast({title: '加入成功',icon: 'success',// true 防止用戶 手抖 瘋狂點(diǎn)擊按鈕 mask: true});},

3.商品收藏

• 頁(yè)面onShow的時(shí)候 加載緩存中的商品收藏的數(shù)據(jù)

• 判斷當(dāng)前商品是不是被收藏

  • 是 改變頁(yè)面的圖標(biāo)

  • 不是

• 點(diǎn)擊商品收藏按鈕

  • 判斷該商品是否存在于緩存數(shù)組中
  • 已經(jīng)存在 把該商品刪除
  • 沒(méi)有存在 把商品添加到收藏?cái)?shù)組中 存入到緩存中即可

// 點(diǎn)擊 商品收藏圖標(biāo)handleCollect () {let isCollect = false;// 1 獲取緩存中的商品收藏?cái)?shù)組let collect = wx.getStorageSync("collect") || [];// 2 判斷該商品是否被收藏過(guò)let index = collect.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);// 3 當(dāng)index！=-1表示 已經(jīng)收藏過(guò) if (index !== -1) {// 能找到 已經(jīng)收藏過(guò)了 在數(shù)組中刪除該商品collect.splice(index, 1);isCollect = false;wx.showToast({title: '取消成功',icon: 'success',mask: true});} else {// 沒(méi)有收藏過(guò)collect.push(this.GoodsInfo);isCollect = true;wx.showToast({title: '收藏成功',icon: 'success',mask: true});}// 4 把數(shù)組存入到緩存中wx.setStorageSync("collect", collect);// 5 修改data中的屬性 isCollectthis.setData({isCollect})}

購(gòu)物車

1.獲取用戶的收貨地址

• 綁定點(diǎn)擊事件

• 調(diào)用小程序內(nèi)置 api 獲取用戶的收貨地址 wx.chooseAddress

• 獲取 用戶權(quán)限 狀態(tài) scope

• 假設(shè) 用戶 點(diǎn)擊獲取收貨地址的提示框 確定 scope 值 true 直接調(diào)用 獲取收貨地址

• 假設(shè) 用戶 從來(lái)沒(méi)有調(diào)用過(guò) 收貨地址的api scope undefined 直接調(diào)用 獲取收貨地址

• 假設(shè) 用戶 點(diǎn)擊獲取收貨地址的提示框 取消

  • scope 值 false
  • 誘導(dǎo)用戶 自己 打開(kāi) 授權(quán)設(shè)置頁(yè)面(wx.openSetting) 當(dāng)用戶重新給與 獲取地址權(quán)限的時(shí)候
  • 獲取收貨地址
  • 把獲取到的收貨地址 存入到 本地存儲(chǔ)中

// 點(diǎn)擊 收貨地址async handleChooseAddress() {try {// 1 獲取 權(quán)限狀態(tài)const res1 = await getSetting();const scopeAddress = res1.authSetting["scope.address"];// 2 判斷 權(quán)限狀態(tài)if (scopeAddress === false) {await openSetting();}// 4 調(diào)用獲取收貨地址的 apilet address = await chooseAddress();address.all = address.provinceName + address.cityName + address.countyName + address.detailInfo;// 5 存入到緩存中wx.setStorageSync("address", address);} catch (error) {console.log(error);}},

2.全選的實(shí)現(xiàn) 數(shù)據(jù)的展示

• onShow 獲取緩存中的購(gòu)物車數(shù)組
• 根據(jù)購(gòu)物車中的商品數(shù)據(jù) 所有的商品都被選中 checked=true 全選就被選中

// 商品全選功能handleItemAllCheck() {// 1 獲取data中的數(shù)據(jù)let { cart, allChecked } = this.data;// 2 修改值allChecked = !allChecked;// 3 循環(huán)修改cart數(shù)組 中的商品選中狀態(tài)cart.forEach(v => v.checked = allChecked);// 4 把修改后的值 填充回data或者緩存中this.setCart(cart);},

3.商品數(shù)量編輯

• 獲取傳遞過(guò)來(lái)的參數(shù)
• 獲取購(gòu)物車數(shù)組
• 找到需要修改的商品的索引
• 判斷是否要執(zhí)行刪除
• 進(jìn)行修改數(shù)量
• 設(shè)置回緩存和data中

// 商品數(shù)量的編輯功能async handleItemNumEdit (e) {// 1 獲取傳遞過(guò)來(lái)的參數(shù) const { operation, id } = e.currentTarget.dataset;// 2 獲取購(gòu)物車數(shù)組let { cart } = this.data;// 3 找到需要修改的商品的索引const index = cart.findIndex(v => v.goods_id === id);// 4 判斷是否要執(zhí)行刪除if (cart[index].num === 1 && operation === -1) {// 4.1 彈窗提示const res = await showModal({ content: "您是否要?jiǎng)h除？" });if (res.confirm) {cart.splice(index, 1);this.setCart(cart);}} else {// 4 進(jìn)行修改數(shù)量cart[index].num += operation;// 5 設(shè)置回緩存和data中this.setCart(cart);}},

個(gè)人中心

收藏

訂單

搜索

1.輸入框綁定 值改變事件 input事件

• 獲取到輸入框的值
• 合法性判斷 (非空)
• 檢驗(yàn)通過(guò) 把輸入框的值 發(fā)送到后臺(tái)
• 返回的數(shù)據(jù)打印到頁(yè)面上

2.防抖 （防止抖動(dòng)） 定時(shí)器 節(jié)流

• 防抖 一般 輸入框中 防止重復(fù)輸入 重復(fù)發(fā)送請(qǐng)求
• 節(jié)流 一般是用在頁(yè)面下拉和上拉
• 定義全局的定時(shí)器id

// 輸入框的值改變 就會(huì)觸發(fā)的事件handleInput(e){// 1 獲取輸入框的值const {value}=e.detail;// 2 檢測(cè)合法性if(!value.trim()){this.setData({goods:[],isFocus:false})// 值不合法return;}// 3 準(zhǔn)備發(fā)送請(qǐng)求獲取數(shù)據(jù)this.setData({isFocus:true})clearTimeout(this.TimeId);this.TimeId=setTimeout(() => {this.qsearch(value);}, 1000);},// 發(fā)送請(qǐng)求獲取搜索建議 數(shù)據(jù)async qsearch(query){const res=await request({url:"/goods/qsearch",data:{query}});console.log(res);this.setData({goods:res})},

意見(jiàn)反饋

1 點(diǎn)擊 “+” 觸發(fā)tap點(diǎn)擊事件

1 調(diào)用小程序內(nèi)置的 選擇圖片的 api

2 獲取到 圖片的路徑 數(shù)組

3 把圖片路徑 存到 data的變量中

4 頁(yè)面就可以根據(jù) 圖片數(shù)組 進(jìn)行循環(huán)顯示 自定義組件

// 點(diǎn)擊 “+” 選擇圖片 handleChooseImg() { // 2 調(diào)用小程序內(nèi)置的選擇圖片api wx.chooseImage({// 同時(shí)選中的圖片的數(shù)量count: 9,// 圖片的格式 原圖 壓縮sizeType: ['original', 'compressed'],// 圖片的來(lái)源 相冊(cè) 照相機(jī)sourceType: ['album', 'camera'],success: (result) => {this.setData({// 圖片數(shù)組 進(jìn)行拼接 chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]})} });},

2 點(diǎn)擊 自定義圖片 組件

1 獲取被點(diǎn)擊的元素的索引

2 獲取 data中的圖片數(shù)組

3 根據(jù)索引 數(shù)組中刪除對(duì)應(yīng)的元素

4 把數(shù)組重新設(shè)置回data中

// 點(diǎn)擊 自定義圖片組件handleRemoveImg(e) {// 2 獲取被點(diǎn)擊的組件的索引const { index } = e.currentTarget.dataset;// 3 獲取data中的圖片數(shù)組let { chooseImgs } = this.data;// 4 刪除元素chooseImgs.splice(index, 1);this.setData({chooseImgs})},

3 提交

• 獲取文本域的內(nèi)容 類似 輸入框的獲取

  • data中定義變量 表示 輸入框內(nèi)容
  • 文本域 綁定 輸入事件 事件觸發(fā)的時(shí)候 把輸入框的值 存入到變量中

• 對(duì)這些內(nèi)容 合法性驗(yàn)證

• 驗(yàn)證通過(guò) 用戶選擇的圖片 上傳到專門的圖片的服務(wù)器 返回圖片外網(wǎng)的鏈接

• 遍歷圖片數(shù)組

• 挨個(gè)上傳

• 自己再維護(hù)圖片數(shù)組 存放 圖片上傳后的外網(wǎng)的鏈接

• 文本域 和 外網(wǎng)的圖片的路徑 一起提交到服務(wù)器 前端的模擬 不會(huì)發(fā)送請(qǐng)求到后臺(tái)

• 清空當(dāng)前頁(yè)面

• 返回上一頁(yè)

// 提交按鈕的點(diǎn)擊handleFormSubmit() {// 1 獲取文本域的內(nèi)容 圖片數(shù)組const { textVal, chooseImgs } = this.data;// 2 合法性的驗(yàn)證if (!textVal.trim()) {// 不合法wx.showToast({title: '輸入不合法',icon: 'none',mask: true});return;}// 3 準(zhǔn)備上傳圖片 到專門的圖片服務(wù)器 // 上傳文件的 api 不支持 多個(gè)文件同時(shí)上傳 遍歷數(shù)組 挨個(gè)上傳 // 顯示正在等待的圖片wx.showLoading({title: "正在上傳中",mask: true});// 判斷有沒(méi)有需要上傳的圖片數(shù)組if (chooseImgs.length != 0) {chooseImgs.forEach((v, i) => {wx.uploadFile({// 圖片要上傳到哪里url: 'http://img.coolcr.cn/index/api.html',// 被上傳的文件的路徑filePath: v,// 上傳的文件的名稱 后臺(tái)來(lái)獲取文件 filename: "image",// 順帶的文本信息formData: {},success: (result) => {console.log(result);let url = JSON.parse(result.data).url;this.UpLoadImgs.push(url);// 所有的圖片都上傳完畢了才觸發(fā) if (i === chooseImgs.length - 1) {wx.hideLoading();console.log("把文本的內(nèi)容和外網(wǎng)的圖片數(shù)組 提交到后臺(tái)中");// 提交都成功了// 重置頁(yè)面this.setData({textVal: "",chooseImgs: []})// 返回上一個(gè)頁(yè)面wx.navigateBack({delta: 1});}}});})}else{wx.hideLoading();console.log("只是提交了文本");wx.navigateBack({delta: 1});}}

登錄

結(jié)算

因?yàn)橹Ц豆δ苄枰獧?quán)限，所以這部分沒(méi)有做，除了支付其他的部分是都可以做的，大家加油！

總結(jié)

以上是生活随笔為你收集整理的黑马小程序品优购商城项目分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。