黑馬電商品優購小程序

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

該項目使用小程序原生mina框架

項目頁面的搭建

頁面名稱文件

首頁	index
分類	category
商品列表	goods_list
商品詳情	goods_detail
購物車	cart
收藏	collect
訂單	order
搜索	search
個人中心	user
意見反饋	user
登錄	login
授權	auth
結算	pay

• 項目文件目錄

首頁

分類頁面

1.點擊左側菜單切換內容

獲取被點擊的標題身上的索引

給data中的currentIndex賦值

根據不同的索引來渲染右側的商品內容

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

商品列表

Tab欄

1.自定義組件傳值

• ?組件通過屬性的?式給?組件傳遞參數、?組件通過事件的?式向?組件傳遞參數
• ?組件 把數據 {{tabs}} 傳遞到 ?組件的 tabItems 屬性中
• ?組件 監聽 onMyTab 事件
• ?組件 觸發 bindmytap 中的事件
• ?定義組件觸發事件時，需要使? triggerEvent ?法，指定 事件名 、 detail 對象
• ? -> ? 動態傳值 this.selectComponent("#tabs");

2.Tab欄切換

• 獲取被點擊的標題索引

• 修改源數組

• 賦值到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.下拉頁面功能

• ??的json?件中開啟設置 enablePullDownRefresh:true
  

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

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

加載下??功能

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

商品詳情

1.點擊圖片預覽

• 實現效果

2.加入購物車 邏輯

• 先綁定點擊事件
• 獲取緩存中的購物車數據 數組格式
• 先判斷 當前的商品是否已經存在于 購物車
• 已經存在 修改商品數據 執行購物車數量++ 重新把購物車數組 填充回緩存中
• 不存在于購物車的數組中 直接給購物車數組添加一個新元素 新元素 帶上 購買數量屬性 num 重新把購物車數組 填充回緩存中
• 彈出提示

// 點擊 加入購物車handleCartAdd() {// 1 獲取緩存中的購物車 數組let cart = wx.getStorageSync("cart") || [];// 2 判斷 商品對象是否存在于購物車數組中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 已經存在購物車數據 執行 num++cart[index].num++;}// 5 把購物車重新添加回緩存中wx.setStorageSync("cart", cart);// 6 彈窗提示wx.showToast({title: '加入成功',icon: 'success',// true 防止用戶 手抖 瘋狂點擊按鈕 mask: true});},

3.商品收藏

• 頁面onShow的時候 加載緩存中的商品收藏的數據

• 判斷當前商品是不是被收藏

  • 是 改變頁面的圖標

  • 不是

• 點擊商品收藏按鈕

  • 判斷該商品是否存在于緩存數組中
  • 已經存在 把該商品刪除
  • 沒有存在 把商品添加到收藏數組中 存入到緩存中即可

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

購物車

1.獲取用戶的收貨地址

• 綁定點擊事件

• 調用小程序內置 api 獲取用戶的收貨地址 wx.chooseAddress

• 獲取 用戶權限 狀態 scope

• 假設 用戶 點擊獲取收貨地址的提示框 確定 scope 值 true 直接調用 獲取收貨地址

• 假設 用戶 從來沒有調用過 收貨地址的api scope undefined 直接調用 獲取收貨地址

• 假設 用戶 點擊獲取收貨地址的提示框 取消

  • scope 值 false
  • 誘導用戶 自己 打開 授權設置頁面(wx.openSetting) 當用戶重新給與 獲取地址權限的時候
  • 獲取收貨地址
  • 把獲取到的收貨地址 存入到 本地存儲中

// 點擊 收貨地址async handleChooseAddress() {try {// 1 獲取 權限狀態const res1 = await getSetting();const scopeAddress = res1.authSetting["scope.address"];// 2 判斷 權限狀態if (scopeAddress === false) {await openSetting();}// 4 調用獲取收貨地址的 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.全選的實現 數據的展示

• onShow 獲取緩存中的購物車數組
• 根據購物車中的商品數據 所有的商品都被選中 checked=true 全選就被選中

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

3.商品數量編輯

• 獲取傳遞過來的參數
• 獲取購物車數組
• 找到需要修改的商品的索引
• 判斷是否要執行刪除
• 進行修改數量
• 設置回緩存和data中

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

個人中心

收藏

訂單

搜索

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

• 獲取到輸入框的值
• 合法性判斷 (非空)
• 檢驗通過 把輸入框的值 發送到后臺
• 返回的數據打印到頁面上

2.防抖 （防止抖動） 定時器 節流

• 防抖 一般 輸入框中 防止重復輸入 重復發送請求
• 節流 一般是用在頁面下拉和上拉
• 定義全局的定時器id

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

意見反饋

1 點擊 “+” 觸發tap點擊事件

1 調用小程序內置的 選擇圖片的 api

2 獲取到 圖片的路徑 數組

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

4 頁面就可以根據 圖片數組 進行循環顯示 自定義組件

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

2 點擊 自定義圖片 組件

1 獲取被點擊的元素的索引

2 獲取 data中的圖片數組

3 根據索引 數組中刪除對應的元素

4 把數組重新設置回data中

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

3 提交

• 獲取文本域的內容 類似 輸入框的獲取

  • data中定義變量 表示 輸入框內容
  • 文本域 綁定 輸入事件 事件觸發的時候 把輸入框的值 存入到變量中

• 對這些內容 合法性驗證

• 驗證通過 用戶選擇的圖片 上傳到專門的圖片的服務器 返回圖片外網的鏈接

• 遍歷圖片數組

• 挨個上傳

• 自己再維護圖片數組 存放 圖片上傳后的外網的鏈接

• 文本域 和 外網的圖片的路徑 一起提交到服務器 前端的模擬 不會發送請求到后臺

• 清空當前頁面

• 返回上一頁

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

登錄

結算

因為支付功能需要權限，所以這部分沒有做，除了支付其他的部分是都可以做的，大家加油！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。