開發 | 用 4 天時間，他擼了一個「星巴克」同款小程序

文 | 但成立

當我們還在家中吹著空調敲著代碼吃著西瓜的時候，可能你的她還在炎炎夏日下大汗淋漓……

打開這個小程序，為她點上一杯冰鎮的星巴克，後續的故事就不用再說了吧??。

作為還在起跑線上的全棧的學習者，我初試了微信小程序開發，花了四天左右的時間初步完成了高仿「星巴克用心說」的小程序。

這個小程序吸引我的真的就是顏啊（身為顏控的我），有木有覺得美觀呢？

下面，知曉程序（微信號 zxcx0101）就來帶一起看下，這個 demo 是如何實現的。

關注「知曉程序」微信公眾號，回復「開發」，獲取小程序開發文章精選。

開發小程序，必不可少的是兩個東西。

第一個是「微信 Web 開發者工具」，一款很好用的小程序編輯軟體；第二個就是小程序必備的超級無敵開發文檔，有關小程序開發，你想要知道的，都在這裡面。

這個小程序一共有三個頁面，分別是主頁、「@all 我想對你們說」的發禮品卡頁面，以及禮品卡詳情頁。

分別將這三個頁面，在 app.json里進行註冊：

{
"pages":[
"pages/index/index",
"pages/detail/detail",
"pages/giftcard/giftcard"
],
}

小程序功能實現

目前，這個小程序代碼已經實現了 scroll-view 等基礎事件、視圖切換事件，以及購物車、付款（模擬）實現等等。

但是，有關地圖和門店顯示相關功能，還沒有完成。

在視圖切換功能上，做到了大圖切換和小圖高亮。是不是效果還不錯呢？??

具體效果圖如下。

只需要在相應圖片上，綁定點擊事件，就可以做到視圖切換了。具體代碼實現如下：

2. 禮品卡（Giftcard）

在禮品卡購買頁面，點擊列表某個項目的左側，會跳轉到禮品卡詳情頁面。

購物付款功能

在選擇數量的時候，點擊列表項目右邊的「+」和「-」就可以進行修改。

當然，下面的結賬也會顯示你所購買的數量和總價喔。是不是覺得符合現代化簡約美呀。??

這是這個小程序最閃光點也最需要思考的地方啦。仔細一看，可以看到操作後有很多小的變化，也是這小小的變化讓整個小程序更美觀了。??

這部分的視圖層代碼實現：

計算總價的邏輯實現，也很簡單：

getTotalPrice{
let carts = this.data.carts;
let total = 0;
for(let i =0 ;i

對於點擊「+」、「-」做到數量變更的實現，我是這樣做的：

// 增加數量
addCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
num = num + 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice;
this.getTotalNum;
},
// 減少數量
minusCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
if(num

關注「知曉程序」微信公眾號，回復「源碼」，獲取 demo 源碼及本文原文地址。

對於初次嘗試上手小程序開發，我有兩點經驗可以總結出來：

• 做小程序最主要的就是看文檔，一定要看文檔，重要的事情說三遍，看文檔！看文檔！看文檔！
• 因為沒有什麼 JavaScript 基礎，所以踩了很多坑，代碼也不夠簡潔。以後一定會多加改善。

如果有更多小程序問題和經驗希望探討，歡迎隨時聯繫我！

關注「知曉程序」公眾號，在微信後台回復「開發」，獲取小程序開發精選文章。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！