# 开发 \| 用 4 天时间，他撸了一个「星巴克」同款小程序

- 作者：知晓程序
- 发布时间：2017-08-03 20:00
- 原文：https://www.ifanr.com/minapp/884562

![](https://s3.ifanr.com/wp-content/uploads/2017/07/minapp-dev-final-feature.jpg)

文 \| 但成立

当我们还在家中吹着空调敲着代码吃着西瓜的时候，可能你的她还在炎炎夏日下大汗淋漓……

打开这个小程序，为她点上一杯冰镇的星巴克，后续的故事就不用再说了吧😄。

作为还在起跑线上的全栈的学习者，我初试了微信小程序开发，花了四天左右的时间初步完成了高仿「[星巴克用心说](http://www.ifanr.com/minapp/872496)」的小程序。

这个小程序吸引我的真的就是颜啊（身为颜控的我），有木有觉得美观呢？

![](https://s3.ifanr.com/wp-content/uploads/2017/08/minapp-starbucks-compressor.gif)

下面，知晓程序（微信号 zxcx0101）就来带一起看下，这个 demo 是如何实现的。

关注「知晓程序」微信公众号，回复「开发」，获取小程序开发文章精选。

### 项目工具及文档

开发小程序，必不可少的是两个东西。

**第一个是「微信 Web 开发者工具」**，一款很好用的小程序编辑软件；**第二个就是小程序必备的超级无敌开发文档**，有关小程序开发，你想要知道的，都在这里面。

### 注册页面

**这个小程序一共有三个页面**，分别是主页、「@all 我想对你们说」的发礼品卡页面，以及礼品卡详情页。

分别将这三个页面，在 `app.json` 里进行注册：

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

### 小程序功能实现

目前，这个小程序代码已经实现了 scroll-view 等基础事件、视图切换事件，以及购物车、付款（模拟）实现等等。

但是，有关地图和门店显示相关功能，还没有完成。

#### 1. 视图切换

**在视图切换功能上，做到了大图切换和小图高亮**。是不是效果还不错呢？😁

具体效果图如下。

![](https://s3.ifanr.com/wp-content/uploads/2017/08/tab.gif-compressor.gif)

只需要在相应图片上，绑定点击事件，就可以做到视图切换了。具体代码实现如下：

```
<view class="tab-poster">
  <image class="tab-poster-photo" model="aspectFit" src="{{poster}}"></image>
</view>
<view class="tab">
  <image class="gift" src="../../images/gift.png"></image>
  <text class="tab-text">选择卡面</text>
  <view class="flex">
    <view class="box-photo" bindtap="btn_change1">
      <image src="{{image1}}" class="box-image"></image>
    </view>
   <view class="box-photo" bindtap="btn_change2">
     <image src="{{image2}}" class="box-image"></image>
   </view>
   <!-- 更多相应视图 -->
   </view>
</view>
```

#### 2. 礼品卡（Giftcard）

在礼品卡购买页面，**点击列表某个项目的左侧，会跳转到礼品卡详情页面**。

![](https://s3.ifanr.com/wp-content/uploads/2017/08/minapp-starbucks-giftcard-list-compressor.gif)

### 购物付款功能

在选择数量的时候，**点击列表项目右边的「+」和「-」就可以进行修改。**

当然，下面的结账也会显示你所购买的数量和总价喔。是不是觉得符合现代化简约美呀。😄

![](https://s3.ifanr.com/wp-content/uploads/2017/08/minapp-starbucks-choose-qualty-compressor.gif)

这是这个小程序最闪光点也最需要思考的地方啦。仔细一看，可以看到操作后有很多小的变化，也是这小小的变化让整个小程序更美观了。😄

这部分的视图层代码实现：

```
<view class="cart-box">
  <image class="money" src="../../images/money.png"></image>
  <text class="gift-text">选择礼品</text>
  <!-- wx:for 渲染列表 并判断高亮事件-->
  <view wx:for="{{carts}}" class="{{item.num>0?'green':'gifts-box'}}">
    <!-- 跳转礼品卡详情页-->
    <navigator class="gifts-content" url="../giftcard/giftcard">
      <view class="gifts-title-box">
        <text class="gifts-title">{{item.title}}</text>
      </view>
      <view class="gifts-price-box">
        <text class="gifts-price">{{item.price}}元</text>
      </view>
    </navigator>
    <!-- 增加减少数量按钮-->
    <view class="numCount numCount_active" wx:if="{{item.num>0}}">
      <view class="numMin-box" bindtap="minusCount" data-index="{{index}}">
        <text class="numMin">-</text>
      </view>
      <view class="num-box">
        <text class="num">{{item.num}}</text>
      </view>
      <view class="numAdd-box" bindtap="addCount" data-index="{{index}}">
        <text class="numAdd">+</text>
      </view>
    </view>
    <view class="numCount" wx:if="{{item.num==0}}">
      <view class="numAdd-box-0" bindtap="addCount" data-index="{{index}}">
        <text class="numAdd-0">+</text>
      </view>
    </view>
  </view>
</view>
```

计算总价的逻辑实现，也很简单：

```
getTotalPrice(){
  let carts = this.data.carts;
  let total = 0;
  for(let i =0 ;i<carts.length;i++){
    if(carts[i].selected){
      total += carts[i].num * carts[i].price;
    }
  }
  this.setData({
    carts:carts,
    totalPrice:total.toFixed(2)
  });
},
```

对于点击「+」、「-」做到数量变更的实现，我是这样做的：

```
// 增加数量
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 <= 0){
    return false;
  }
  num = num - 1;
  carts[index].num = num;
  this.setData({
    carts: carts
  });
  this.getTotalPrice();
  this.getTotalNum();
}
```

关注「知晓程序」微信公众号，回复「源码」，获取 demo 源码及本文原文地址。

### 总结

对于初次尝试上手小程序开发，我有两点经验可以总结出来：

- 做小程序最主要的就是看文档，一定要看文档，重要的事情说三遍，看文档！看文档！看文档！
- 因为没有什么 JavaScript 基础，所以踩了很多坑，代码也不够简洁。以后一定会多加改善。

如果有更多小程序问题和经验希望探讨，欢迎随时联系我！

**关注「知晓程序」公众号，在微信后台回复「开发」，获取小程序开发精选文章。**

![zxcx&#95;0208](https://s3.ifanr.com/wp-content/uploads/2017/02/zxcx_0208.png)