該小程序采用的云開(kāi)發(fā)，沒(méi)有自己搭建后端碘箍，我心目中辽慕，只要沒(méi)有后端的內(nèi)容我就覺(jué)得很簡(jiǎn)單京腥。但其實(shí)我還是想有朝一日能自己獨(dú)立完成前后端所有工作，寫(xiě)一個(gè)更棒的作品鼻百。

之前有寫(xiě)過(guò)幾篇文章绞旅，可以回顧一下。你可能需要的文章：

• 微信小程序自定義導(dǎo)航欄

• 微信小程序中使用iconfont

• 微信小程序云開(kāi)發(fā)圖片資源引用

• 微信小程序啟動(dòng)頁(yè)的實(shí)現(xiàn)

• 微信小程序使用WeUI組件庫(kù)

天啦嚕温艇，看了半天代碼發(fā)現(xiàn)還挺多因悲，一時(shí)間不曉得該從哪里開(kāi)始。那還是按照tab頁(yè)使用邏輯順序來(lái)吧勺爱。

啟動(dòng)頁(yè)

之前文章也有過(guò)如何寫(xiě)一個(gè)啟動(dòng)頁(yè)面晃琳。至于為什么需要個(gè)啟動(dòng)頁(yè)呢？

我覺(jué)得主要也就兩點(diǎn)琐鲁，一個(gè)是好看卫旱，還有個(gè)就是添加獲取用戶信息類(lèi)型按鈕，間接引導(dǎo)用戶授權(quán)獲取用戶信息围段。

至于為啥要獲取用戶信息顾翼？

曾真有段時(shí)間，我糾結(jié)了好久奈泪，因?yàn)槲易约哼@個(gè)程序中适贸，除了展示，好像也沒(méi)啥需要用到這個(gè)數(shù)據(jù)的地方涝桅。

但我還是寫(xiě)了拜姿。

當(dāng)前登陸用戶的用戶名和頭像圖片，通過(guò) open-data 標(biāo)簽可以無(wú)需授權(quán)直接獲取冯遂，只要指定相應(yīng)類(lèi)型userNickName和userAvatarUrl即可蕊肥，樣式只需要用view容器包裹起來(lái)進(jìn)行設(shè)置。button按鈕指定open-type為getUserInfo蛤肌，在點(diǎn)擊事件中就可以拿到授權(quán)之后的用戶公開(kāi)信息數(shù)據(jù)壁却。

拿到用戶信息需要保存到數(shù)據(jù)庫(kù)中批狱，也只需要首次登錄的用戶在授權(quán)之后才需要入庫(kù)，所以加個(gè)判斷當(dāng)前登陸用戶是否是首次登錄儒洛，判斷條件是每個(gè)用戶的唯一值openId精耐。

通過(guò)這個(gè)邏輯狼速，那需要處理的可以分為如下幾個(gè)：

1琅锻、獲取當(dāng)前登錄用戶的openId。

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

這個(gè)login云函數(shù)是項(xiàng)目構(gòu)建時(shí)自動(dòng)生成的向胡，云函數(shù)寫(xiě)法：

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恼蓬、獲取數(shù)據(jù)庫(kù)中所有用戶數(shù)據(jù)。

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

3僵芹、在頁(yè)面剛加載的時(shí)候調(diào)用上面兩個(gè)方法处硬，拿到openId和userList。在點(diǎn)擊按鈕時(shí)拇派，檢查當(dāng)前登錄用戶是否已經(jīng)存在數(shù)據(jù)庫(kù)荷辕。

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);
    }
},

這里獲取到用戶信息數(shù)據(jù)是這個(gè)樣子滴：

image

4、檢查當(dāng)前登錄用戶是否已經(jīng)存在數(shù)據(jù)庫(kù)件豌。

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疮方、如果不存在的話，將該用戶信息存入數(shù)據(jù)庫(kù)users中茧彤。管它有用沒(méi)用骡显，先存著唄。

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

數(shù)據(jù)庫(kù)中會(huì)自動(dòng)給這個(gè)字段生成一個(gè)id和openId曾掂。

image

首頁(yè)

首頁(yè)從上到下分為幾塊惫谤，輪播圖，輪播告示珠洗，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>

圖片數(shù)據(jù)來(lái)自數(shù)據(jù)中定義好的蛔糯。

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

輪播告示拯腮。

和輪播圖一樣的，只是輪播方向不同蚁飒，swiper中添加個(gè)參數(shù) vertical动壤。點(diǎn)擊顯示彈窗，引用的是WeUI庫(kù)淮逻，咋用參考以往文章琼懊。

icon列表阁簸。

到這里就要用到本程序中最最最復(fù)雜的一個(gè)數(shù)據(jù)庫(kù)集合了，幾乎所有的商品數(shù)據(jù)都是存放在這個(gè)集合中的哼丈。

image

那icon列表就是獲取goods集合中每個(gè)對(duì)象icon字段值启妹，推薦商品列表就是每個(gè)對(duì)象中l(wèi)ist數(shù)組中所有isHot為true的數(shù)據(jù)。

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
  })
},

給每個(gè)icon圖片上加一個(gè)跳轉(zhuǎn)到分類(lèi)頁(yè)的點(diǎn)擊事件醉旦，一般的跳轉(zhuǎn)可以使用wx.navigateTo饶米，而tab頁(yè)的跳轉(zhuǎn)只允許使用wx.switchTab，官方文檔中指明這個(gè)方法是不可以后綴參數(shù)的车胡。

而我這里肯定是需要點(diǎn)擊不同的icon跳轉(zhuǎn)到不同的分類(lèi)欄目中的檬输，那就需要在跳轉(zhuǎn)時(shí)候攜帶該分類(lèi)id，還是當(dāng)前這個(gè)數(shù)組的下標(biāo)匈棘。

通過(guò)定義全局參數(shù)丧慈，可以解決wx.switchTab無(wú)法攜帶參數(shù)的問(wèn)題。

app.js中主卫，在onLaunch里定義個(gè)全局對(duì)象逃默。

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

商品分類(lèi)頁(yè)

在menu.js中，在最開(kāi)始需要引入全局變量簇搅。

const app = getApp()

那上面定義的globalData可以直接通過(guò)app拿到完域。

分類(lèi)頁(yè)這兒主要的處理邏輯有三塊內(nèi)容。

1馍资、區(qū)分管理員權(quán)限和普通用戶權(quán)限筒主。

管理員權(quán)限可以有新增商品和刪除的功能，普通用戶只可以查看鸟蟹。

權(quán)限這塊的處理應(yīng)該會(huì)有更好的方案乌妙。

我比較挫，想到的最簡(jiǎn)單的方法就是利用openId來(lái)做過(guò)濾建钥。在頁(yè)面初次加載的時(shí)候獲取當(dāng)前用戶的openId藤韵，和啟動(dòng)頁(yè)一樣的方法，只是回調(diào)函數(shù)中不一樣熊经。在數(shù)據(jù)庫(kù)中定義個(gè)管理員集合泽艘，你需要給那些用戶設(shè)置成管理員，將他們的openId放在這個(gè)集合中镐依。

我是在app.js中獲取這個(gè)管理員集合的匹涮，可能是剛剛嘗過(guò)全局變量的甜頭吧。

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

那在menu.js中可以直接拿到這個(gè)adminList中數(shù)據(jù)槐壳，判斷一下當(dāng)前登錄用戶的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、將設(shè)置成喜歡狀態(tài)的商品數(shù)據(jù)存入本地緩存。

當(dāng)時(shí)對(duì)于這個(gè)邏輯處理的考慮也是想了蠻久雳攘，這個(gè)小程序的制作出發(fā)點(diǎn)只是作為一個(gè)助手作用带兜，方便用戶查看店鋪所有商品，是做一個(gè)商品分類(lèi)展示的功能吨灭，不支付線上下單刚照，主要也是因?yàn)轱@示下單這個(gè)功能太復(fù)雜，個(gè)人小程序沒(méi)權(quán)限做喧兄。

那我就想著僅僅分類(lèi)展示并不滿足使用无畔，加入個(gè)喜歡列表實(shí)用性更大。

商品的固定數(shù)據(jù)是可以存入云開(kāi)發(fā)的數(shù)據(jù)庫(kù)中繁莹，但是針對(duì)于每個(gè)用戶不同的喜歡數(shù)據(jù)檩互，最好的方案就是使用緩存特幔。

localStorange的數(shù)據(jù)形式是key / value咨演，一開(kāi)始計(jì)劃的是固定一個(gè)key，value中是個(gè)數(shù)組對(duì)象蚯斯。

這一定是可行的薄风，但我不會(huì)做......麻煩能實(shí)現(xiàn)的朋友私信我。

好的方案來(lái)不了可以來(lái)挫的嘛拍嵌。我用商品的分類(lèi)Id和當(dāng)前商品Id拼接起來(lái)作為key遭赂，這就保證了key唯一性，那存入本地的數(shù)據(jù)是需要在喜歡列表展示的横辆，我需要展示的數(shù)據(jù)有分類(lèi)Id撇他，id，商品名狈蚤，是不是喜歡困肩，封面縮略圖，價(jià)格脆侮。明白了這幾點(diǎn)要求锌畸，實(shí)現(xiàn)就很簡(jiǎn)單了。

在每個(gè)商品的愛(ài)心圖標(biāo)上加一個(gè)點(diǎn)擊事件靖避。

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以分類(lèi)id和服裝id用-連接
  const key = loveList[index].categoryId + "-" + loveList[index].id;
  this.saveLocally(key, loveList[index]);
},
// 存入本地緩存
saveLocally(key, data) {
  wx.setStorage({
    key,
    data,
  })
},

現(xiàn)在看這個(gè)代碼潭枣，我覺(jué)得還是可以再重構(gòu)優(yōu)化的更好的。

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

有些商品是已經(jīng)加入喜歡列表的盆犁，商品上的喜歡圖標(biāo)已經(jīng)是高亮狀態(tài)，等到下次進(jìn)入該分類(lèi)頁(yè)篡九，就應(yīng)該將之前設(shè)置喜歡狀態(tài)的商品顯示出來(lái)谐岁，不然每次進(jìn)來(lái)都是初始的模樣就毫無(wú)意義了。

首先是需要獲取商品列表數(shù)據(jù)，再根據(jù)本地緩存數(shù)據(jù)翰铡，將喜歡的商品數(shù)據(jù)修改一下?tīng)顟B(tài)钝域。

這樣就是分三步走。

獲取商品列表數(shù)據(jù)锭魔。

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

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

讀取緩存數(shù)據(jù)例证。

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,
                })
              }
            })
          }
        })
      }
    })
  })
},

主要的處理邏輯就是以上這三塊迷捧。還有些其他的交互方法织咧，商品分類(lèi)的切換，詳情頁(yè)跳轉(zhuǎn)漠秋，商品刪除......這些就不寫(xiě)了笙蒙，可以去看代碼，都很容易理解的庆锦。

商品詳情頁(yè)

點(diǎn)擊跳轉(zhuǎn)過(guò)來(lái)的時(shí)候捅位，攜帶的參數(shù)只有分類(lèi)id和商品id。根據(jù)這兩個(gè)字段就可以在商品列表數(shù)據(jù)查詢到具體所有數(shù)據(jù)搂抒。

在當(dāng)前頁(yè)面獲取傳參過(guò)來(lái)的數(shù)據(jù)艇搀。

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

新增商品頁(yè)

按照之前數(shù)據(jù)庫(kù)集合中定義的數(shù)據(jù)格式，這里就分兩塊求晶。一個(gè)是相關(guān)數(shù)據(jù)的填寫(xiě)表單焰雕，一個(gè)就是上傳的圖片列表。

圖片列表上傳的實(shí)現(xiàn)芳杏，官方都給了相應(yīng)的api方法矩屁。

選擇圖片：

wx.chooseImage({
    sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
    sourceType: ["album", "camera"], // 可以指定來(lái)源是相冊(cè)還是相機(jī)爵赵，默認(rèn)二者都有
    success: function (res) {
        // 返回選定照片的本地文件路徑列表吝秕，tempFilePath可以作為img標(biāo)簽的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);
        });
    });
},

最終把表單數(shù)據(jù)和圖片列表數(shù)據(jù)到存入數(shù)據(jù)庫(kù)集合中。

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()
},

商品新增的云函數(shù)：

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
    }
}

喜歡列表頁(yè)

最輕松的一個(gè)頁(yè)面亚再，讀取本地緩存展示數(shù)據(jù)郭膛。這里還用到了WeUI的mp-slideview組件，修改這個(gè)組件的樣式還是挺麻煩氛悬，高度樣式?jīng)]改成功则剃，多少存在點(diǎn)瑕疵。

個(gè)人信息頁(yè)

這個(gè)頁(yè)面已經(jīng)純屬和小程序主旨功能無(wú)關(guān)了如捅，我就是無(wú)聊寫(xiě)著玩湊湊頁(yè)面的棍现。想寫(xiě)些什么都可以自由發(fā)揮，隨便添加什么功能都可以镜遣，這里我就不介紹我隨便寫(xiě)的東西了己肮。

至此士袄，該篇?dú)v經(jīng)四天的文章終于結(jié)束（主要是周末玩了兩天）,目前正文字?jǐn)?shù)4500+......

我廢話可真多呀。

這個(gè)小程序會(huì)繼續(xù)維護(hù)谎僻，有任何不明白的地方聯(lián)系我哦~