微信小程序項目wx-store代碼詳解

這篇文章會很長，非常長，特別長，無敵長。

真的是擠牙膏般的項目進度，差不多是8月底有開始這個項目的想法，時至今日都1個多月了，拋去頻繁的加班時間，王者時間，羽毛球時間...見縫插針的寫這個項目，我竟然寫完了，我竟然沒有半途放棄，可真把我自己感動壞了。

好吧，主要是這個小程序很簡單，本文會講解一下這個小程序的代碼，所有代碼幾乎是我一個個敲出來的，所有邏輯也是自己構思梳理的，因此很多實現方式並不是很好，冗余代碼很多，代碼質量堪憂，但我也在學習中，隨着技術提升，會不斷來重構代碼，如果大家有任何建議歡迎私信我哦，特別感謝。

​

該小程序采用的雲開發，沒有自己搭建后端，我心目中，只要沒有后端的內容我就覺得很簡單。但其實我還是想有朝一日能自己獨立完成前后端所有工作，寫一個更棒的作品。

之前有寫過幾篇文章，可以回顧一下。你可能需要的文章：

• 微信小程序自定義導航欄

• 微信小程序中使用iconfont

• 微信小程序雲開發圖片資源引用

• 微信小程序啟動頁的實現

• 微信小程序使用WeUI組件庫

天啦嚕，看了半天代碼發現還挺多，一時間不曉得該從哪里開始。那還是按照tab頁使用邏輯順序來吧。

---

啟動頁

之前文章也有過如何寫一個啟動頁面。至於為什么需要個啟動頁呢？

我覺得主要也就兩點，一個是好看，還有個就是添加獲取用戶信息類型按鈕，間接引導用戶授權獲取用戶信息。

至於為啥要獲取用戶信息？

曾真有段時間，我糾結了好久，因為我自己這個程序中，除了展示，好像也沒啥需要用到這個數據的地方。

但我還是寫了。

當前登陸用戶的用戶名和頭像圖片，通過 open-data 標簽可以無需授權直接獲取，只要指定相應類型userNickName和userAvatarUrl即可，樣式只需要用view容器包裹起來進行設置。button按鈕指定open-type為getUserInfo，在點擊事件中就可以拿到授權之后的用戶公開信息數據。

拿到用戶信息需要保存到數據庫中，也只需要首次登錄的用戶在授權之后才需要入庫，所以加個判斷當前登陸用戶是否是首次登錄，判斷條件是每個用戶的唯一值openId。

通過這個邏輯，那需要處理的可以分為如下幾個：

1、獲取當前登錄用戶的openId。

getOpenID() {
    let that = this;
    wx.cloud.callFunction({
        name: 'login',
        complete: res => {
            const openId = res.result.event.userInfo.openId;
            that.setData({
                openId
            })
        }
    })
},

這個login雲函數是項目構建時自動生成的，雲函數寫法：

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    env: wxContext.ENV,
  }
}

 2、獲取數據庫中所有用戶數據。

getUsersList() {
    const that = this;
    db.collection('users').get({
        success: res => {
            that.setData({
                usersList: res.data,
            })
        },
        fail: console.error
    })
},

3、在頁面剛加載的時候調用上面兩個方法，拿到openId和userList。在點擊按鈕時，檢查當前登錄用戶是否已經存在數據庫。

goToIndex(e) {
    const that = this;
    const auth = e.detail.errMsg;
    wx.switchTab({
        url: '/pages/index/index',
    });
    if(auth === "getUserInfo:ok") {
        const avatarUrl = e.detail.userInfo.avatarUrl;
        const nickName = e.detail.userInfo.nickName;
        that.checkUser(nickName, avatarUrl);
    }
},

這里獲取到用戶信息數據是這個樣子滴：

​

4、檢查當前登錄用戶是否已經存在數據庫。

checkUser(name, url) {
    const that = this;
    const list = this.data.usersList;
    const openId = this.data.openId
    const ids = [];
    list.forEach((item) => {
        ids.push(item._openid);
    })
    if(ids.indexOf(openId) === -1) {
        that.setUserInfo(name, url)
    } else {
        return;
    }
},

5、如果不存在的話，將該用戶信息存入數據庫users中。管它有用沒用，先存着唄。

setUserInfo(name, url) {
    db.collection('users').add({
        data: {
            nickName: name,
            avatarUrl: url,
        }
    })
},

數據庫中會自動給這個字段生成一個id和openId。

​

首頁

首頁從上到下分為幾塊，輪播圖，輪播告示，icon列表，推薦商品展示。

輪播圖。

直接用自帶的組件，swiper和swiper-item配合使用。

<swiper class="swiper-top" indicator-dots="true" indicator-active-color="#fff" autoplay circular>
  <swiper-item wx:for="{{bannersList}}" wx:key="item">
    <image mode="aspectFill" data-url="{{item}}" src="{{item}}" />
  </swiper-item>
</swiper>

圖片數據來自數據中定義好的。

getBannerList() {
  db.collection('banners').get({
    success: res=> {
      this.setData({
        bannersList: res.data[0].imgs,
      })
    },
    fail: console.error
  })
}

因為之前有小伙伴咨詢過，如何雲開發中數據庫新建集合，這里用gif簡單說明一下。

​

​

為啥要兩個gif呢，因為超過300幀的它不給上傳~

輪播告示。

和輪播圖一樣的，只是輪播方向不同，swiper中添加個參數 vertical。點擊顯示彈窗，引用的是WeUI庫，咋用參考以往文章。

icon列表。

到這里就要用到本程序中最最最復雜的一個數據庫集合了，幾乎所有的商品數據都是存放在這個集合中的。

​

那icon列表就是獲取goods集合中每個對象icon字段值，推薦商品列表就是每個對象中list數組中所有isHot為true的數據。

getIconList() {
  const that = this;
  const arr = [];
  db.collection('goods').get({
    success: res=> {
      const list = res.data;
      list.forEach((item) => {
        item.list.forEach((d) => {
          if(d.isHot) {
            const param = {
              ...d,
              categoryId: item._id
            };
            arr.push(param);
          }
        })
      })
      that.setData({
        categories: list,
        goodsRecommend: arr
      })
    },
    fail: console.error
  })
},

給每個icon圖片上加一個跳轉到分類頁的點擊事件，一般的跳轉可以使用wx.navigateTo，而tab頁的跳轉只允許使用wx.switchTab，官方文檔中指明這個方法是不可以后綴參數的。

而我這里肯定是需要點擊不同的icon跳轉到不同的分類欄目中的，那就需要在跳轉時候攜帶該分類id，還是當前這個數組的下標。

通過定義全局參數，可以解決wx.switchTab無法攜帶參數的問題。

app.js中，在onLaunch里定義個全局對象。

this.globalData = {
  categoryParamId: 0,
  categoryParamIndex: 0,
}

商品分類頁

在menu.js中，在最開始需要引入全局變量。

const app = getApp()

那上面定義的globalData可以直接通過app拿到。

分類頁這兒主要的處理邏輯有三塊內容。

1、區分管理員權限和普通用戶權限。

管理員權限可以有新增商品和刪除的功能，普通用戶只可以查看。

權限這塊的處理應該會有更好的方案。

我比較挫，想到的最簡單的方法就是利用openId來做過濾。在頁面初次加載的時候獲取當前用戶的openId，和啟動頁一樣的方法，只是回調函數中不一樣。在數據庫中定義個管理員集合，你需要給那些用戶設置成管理員，將他們的openId放在這個集合中。

我是在app.js中獲取這個管理員集合的，可能是剛剛嘗過全局變量的甜頭吧。

wx.cloud.database().collection('adminList').get({
    success: res => {
      this.adminList = res.data[0].admin_openId;
    },
})

那在menu.js中可以直接拿到這個adminList中數據，判斷一下當前登錄用戶的openId在不在adminList中。

getOpenID() {
  let that = this;
  wx.cloud.callFunction({
    name: 'login',
    complete: res => {
      const openId = res.result.event.userInfo.openId;
      if(app.adminList.indexOf(openId) === -1) {
        that.setData({
          isAdmin: false
        })
      } else {
        that.setData({
          isAdmin: true
        })
      }
    }
  })
},

2、將設置成喜歡狀態的商品數據存入本地緩存。

當時對於這個邏輯處理的考慮也是想了蠻久，這個小程序的制作出發點只是作為一個助手作用，方便用戶查看店鋪所有商品，是做一個商品分類展示的功能，不支付線上下單，主要也是因為顯示下單這個功能太復雜，個人小程序沒權限做。

那我就想着僅僅分類展示並不滿足使用，加入個喜歡列表實用性更大。

商品的固定數據是可以存入雲開發的數據庫中，但是針對於每個用戶不同的喜歡數據，最好的方案就是使用緩存。

localStorange的數據形式是key / value，一開始計划的是固定一個key，value中是個數組對象。    

這一定是可行的，但我不會做......麻煩能實現的朋友私信我。

好的方案來不了可以來挫的嘛。我用商品的分類Id和當前商品Id拼接起來作為key，這就保證了key唯一性，那存入本地的數據是需要在喜歡列表展示的，我需要展示的數據有分類Id，id，商品名，是不是喜歡，封面縮略圖，價格。明白了這幾點要求，實現就很簡單了。

在每個商品的愛心圖標上加一個點擊事件。

joinFavorites(e) {
  const that = this;
  const id = e.currentTarget.dataset.id;
  const index = e.currentTarget.dataset.index;
  const list = this.data.goodsList[this.data.curIndex].list;
  const loveList = [];
  list.forEach((item) => {
    if (item.id === id) {
      item.isLove = !item.isLove;
    }
    const param = {
      categoryId: this.data.curNav,
      id: item.id,
      name: item.goodsName,
      isLove: item.isLove,
      thumbnail: item.imgs[0],
      price: item.newPrice
    };
    loveList.push(param);
  })
  that.setData({
    goodsList: this.data.goodsList,
  })

  // 緩存的key以分類id和服裝id用-連接
  const key = loveList[index].categoryId + "-" + loveList[index].id;
  this.saveLocally(key, loveList[index]);
},
// 存入本地緩存
saveLocally(key, data) {
  wx.setStorage({
    key,
    data,
  })
},

現在看這個代碼，我覺得還是可以再重構優化的更好的。

3、從本地緩存中獲取喜歡列表詳情

有些商品是已經加入喜歡列表的，商品上的喜歡圖標已經是高亮狀態，等到下次進入該分類頁，就應該將之前設置喜歡狀態的商品顯示出來，不然每次進來都是初始的模樣就毫無意義了。

首先是需要獲取商品列表數據，再根據本地緩存數據，將喜歡的商品數據修改一下狀態。

這樣就是分三步走。

獲取商品列表數據。

getGoodsList() {
  const that = this;
  db.collection('goods').get({
    success: res => {
      const list = res.data;
      that.getDetails(that.data.storageData, list);

      that.setData({
        goodsList: list,
      })
    }
  })
},

讀取緩存數據。

getLocally() {
  const that = this;
  wx.getStorageInfo({
    success(res) {
      if (res.currentSize > res.limitSize) {
        that.setData({
          isDialog: true
        })
      } else {
        that.setData({
          storageData: res.keys
        })
      }

    },
  })
},

從本地緩存中獲取喜歡列表詳情。

getDetails(localArr, goodsList) {
  const that = this;
  localArr.forEach((localItem) => {
    const itemPId = localItem.split("-")[0].toString();
    const itemId = localItem.split("-")[1].toString();
    goodsList.forEach((goodItem) => {
      if (itemPId === goodItem._id) {
        goodItem.list.forEach((item) => {
          if (itemId === item.id.toString()) {
            wx.getStorage({
              key: localItem,
              success(res) {
                item.isLove = res.data.isLove
                that.setData({
                  goodsList,
                })
              }
            })
          }
        })
      }
    })
  })
},

主要的處理邏輯就是以上這三塊。還有些其他的交互方法，商品分類的切換，詳情頁跳轉，商品刪除......這些就不寫了，可以去看代碼，都很容易理解的。

商品詳情頁

點擊跳轉過來的時候，攜帶的參數只有分類id和商品id。根據這兩個字段就可以在商品列表數據查詢到具體所有數據。

在當前頁面獲取傳參過來的數據。

onLoad: function (options) {
    this.setData({
        categoryId: options.categoryId,
        id: options.id
    });
}

新增商品頁

按照之前數據庫集合中定義的數據格式，這里就分兩塊。一個是相關數據的填寫表單，一個就是上傳的圖片列表。

圖片列表上傳的實現，官方都給了相應的api方法。

選擇圖片：

wx.chooseImage({
    sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認二者都有
    sourceType: ["album", "camera"], // 可以指定來源是相冊還是相機，默認二者都有
    success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        for (var i = 0; i < tempFilePaths.length; i++) {
            if (imgs.length >= 9) {
                that.setData({
                    imgs: imgs,
                });
                return false;
            } else {
                const filePath = res.tempFilePaths[i];
                var timestamp = Date.parse(new Date());
                const cloudPath = `${timestamp}-${i}`;
                const param = {
                    cloudPath,
                    filePath,
                };
                imgs.push(param);
            }
        }
        that.setData({
            imgs: imgs,
        });
    },
});

上傳圖片：

uploadImgs(list) {
    const that = this;
    const imgList = [];
    list.forEach((item) => {
        wx.cloud.uploadFile({
            cloudPath: `uploadImgs/${item.cloudPath}`, // 存入uploadImgs文件夾中
            filePath: item.filePath, // 文件路徑
        }).then((res) => {
            if(res.errMsg === "cloud.uploadFile:ok") {
                imgList.push(res.fileID)
            }
            that.setData({
                imgList,
            })
            if(that.data.imgList.length === that.data.imgs.length) {
                that.add()
            }
        })
        .catch((error) => {
            console.log(error);
        });
    });
},

最終把表單數據和圖片列表數據到存入數據庫集合中。

add() {
    const that = this;
    wx.cloud.callFunction({
        name: 'addGoods',
        data: {
            categoryId: that.data.categoryId,
            id: that.data.id,
            goodsName: that.data.goodsName,
            newPrice: that.data.newPrice,
            oldPrice: that.data.oldPrice,
            isHot: that.data.isHot,
            imgs: that.data.imgList
        }
        }).then()
},

商品新增的雲函數：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const _ = db.command
exports.main = async (event, context) => {
    const goodsName = event.goodsName;
    const categoryId = event.categoryId;
    const id = event.id;
    const newPrice = event.newPrice;
    const oldPrice = event.oldPrice;
    const isHot = event.isHot;
    const imgs = event.imgs;
    db.collection("goods").doc(categoryId).update({
        data: {
            list: _.push({
                id,
                goodsName,
                newPrice,
                oldPrice,
                isHot,
                imgs
            })
        }
    })

    return {
        categoryId,
        id,
        goodsName,
        newPrice,
        oldPrice,
        isHot,
        imgs
    }
}

喜歡列表頁

最輕松的一個頁面，讀取本地緩存展示數據。這里還用到了WeUI的mp-slideview組件，修改這個組件的樣式還是挺麻煩，高度樣式沒改成功，多少存在點瑕疵。

個人信息頁

這個頁面已經純屬和小程序主旨功能無關了，我就是無聊寫着玩湊湊頁面的。想寫些什么都可以自由發揮，隨便添加什么功能都可以，這里我就不介紹我隨便寫的東西了。

---

至此，該篇歷經四天的文章終於結束（主要是周末玩了兩天）,目前正文字數4500+......

我廢話可真多呀。

這個小程序會繼續維護，有任何不明白的地方聯系我哦~

 

關注我吧

​