讓咖啡與代碼相伴

---

前言

程序猿最幸福的事情可能就是，在炎熱的夏天，吹着空調，喝着咖啡，敲着代碼。因爲這幾天剛接觸了微信小程序，因而就萌生了作一個小程序的想法。在此次小程序的開發中遇到了不少問題，也得到了不少收穫。接下來我將描述一下我遇到的一些問題和已經解決的問題。但願能給你們帶來一些幫助

小程序詳解

主頁效果

主頁東西很少，主要是佈局問題。頂層一個輪播圖( swiper)。底部是一個用wx:for循環的一個列表。結構佈局用的是浮動。用nth選擇一個左浮動，另外一個右浮動，並設置左右間距

• 浮動css

.starbucks-list:nth-child(n){
  float: left;
  margin-left: 40rpx;
}
.starbucks-list:nth-child(2n){
  float: right;
  margin-left: 0;
  margin-right: 40rpx;
}
複製代碼

接下來將詳細講一下幾個功能

---

• scroll-x及圖片的切換

說到這裏不得不吐槽一些小程序開發者工具
也多是電腦的問題在電腦上開發者工具的scroll-x無效，真機上正常使用，
複製代碼

講一下圖片的切換：我在每個圖片上都有綁定一個id，當點擊圖片是作一個判斷出你點擊的id是否與你綁定的id相等,判斷爲真時，進行數據的交替。圖片的邊框則是作一個三元運算符判斷，以及右上角的叉叉。(不得不說數據綁定是一個好東西)。

代碼以下

wxml

<scroll-view scroll-x="{{scrollx}}" class="list-pic">
        <view class="picture" wx:for="{{listPic}}" wx:key="{{index}}">
            <image class="{{id==item.id?'check':''}}" data-id="{{item.id}}" data-url="{{item.url}}" src="{{item.url}}" bindtap="showChoose"
            />
            <image wx:if="{{id==item.id}}" class="goupic" data-id="{{item.id}}" src="{{goupic}}" />
        </view>
    </scroll-view>
複製代碼

js

showChoose(e){
    const id = e.currentTarget.dataset.id;
    const url = e.currentTarget.dataset.url;
    // console.log(e)
    this.setData({
      titlePic: url,
      id:id
    })
  }
複製代碼

---

• 購物列表的製做以及購物歷史

效果圖

購物車選擇商品和上面圖片的切換其實大同小異，綁定一個值，判斷你點擊的是那一個商品，在把當前商品的數據改變，只須要判斷一下

wx:if="{{item.num!=0 }}"
複製代碼

就能夠實現當數量爲0時，減號與數量同時消失。

是否是很簡單呢？結構代碼以下：

<view class="starbucks-list" wx:for="{{starbucksList}}" wx:key="{{index}}">
        <image bindtap="checkDrink" data-imgnum="{{item.imgnum}}" class="drinkImg" src="{{item.url}}" />
        <text class="description">{{item.name}}</text>
        <text class="price">￥{{item.price}}</text>

        <view class="addNum" bindtap="addNumber" data-index="{{index}}" data-status="{{item.status}}">

            <image wx:if="{{item.num!=0}}" src="{{delNum1}}" />
            <image wx:else="" src="{{addNum}}" />
        </view>
        <view wx:if="{{item.num!=0 }}" data-index="{{index}}" class="delNum {{item.num==0?'out':''}}" bindtap="delNumber"
            data-status="{{item.status}}">
            <image src="{{delNum}}" />
        </view>

        <text wx:if="{{item.num!=0 }}" class="listNum {{item.num==0?'out':''}}">{{starbucksList[index].num}}</text>

        <view wx:if="{{item.num!=0 }}" class="xiabiao {{item.num==0?'out':''}}"></view>
    </view>

複製代碼

可是其中也有一個難點困惱了我好久好久，就是關於Storage，由於購買成功以後須要把購買歷史保存在本地，剛開始個人想法是把點擊每一個加號時，把點擊的商品的下標做爲一個key，而後把一些信息存儲進去。這樣每一個key都是動態的，咱們只要在下一個頁面找到這個key,就能夠獲取到數據。可是，因爲頁面的跳轉，我想了不少種辦法都無法在歷史界面找到以前點擊商品的下標。因而放棄了(有解決方法的小夥伴能夠私聊我)。

此路不通還得另闢蹊徑，因而我想到了用數組來解決，用一個數組每一個商品都默認佔一個位置。如下標爲記號，根據每點擊商品的下標從而push進數組中。而後bug就來了，當你有沒選的商品時，數組幫你佔的位置默認undefined,可是你在歷史中用wx:for循環該數組時undefined也會佔一個格子，致使你的wxml會出問題。解決方案是用數組的split()方法 把爲空的消去。

onLoad: function (options) {
    const historyList = this.data.historyList
    var that = this
    wx.getStorage({
      //獲取數據的key
      key: "key",
      success: function (res) {
        // console.log(res)
        for (let i = 0; i < res.data.length; i++) {
          historyList[i] = res.data[i]
        }
        for (let i = 0; i < historyList.length; i++) {
          if (historyList[i] == null) {
            historyList.splice(i, 1);
            i = i - 1; // i - 1 ,由於空元素在數組下標 2 位置，刪除空以後，後面的元素要向前補位，
            // 這樣才能真正去掉空元素,以爲這句能夠刪掉的連續爲空試試，而後思考其中邏輯
            // console.log(historyList);
          }
        }
       
        that.setData({
          historyList,
          hasHistory:true,
        })       
      
      }
    })
複製代碼

---

• 商品詳情界面

  

---

• 門店詳情以及地圖組件

門店列表是使用了 騰訊地圖api

地圖api是一個蠻實用的組件，這裏用到了關鍵字搜索(search)接口，直接查詢了附近星巴克的門店，裏面還能夠選擇長地址和短地址，基本上你要的數據都有，仍是比較方便的。必須安利一波。

qqmapsdk.search({
      keyword: '星巴克',
      address_format: 'short',
      page_size: 20,
      success: (res) => {
      },
      fail: function (res) {
      },
      complete: function (res) {
      }
複製代碼

---

關於地圖上彈出層，本覺得簡簡單單的用一個wx:if在加上一個fixed就能夠解決的，在開發工具中顯示的好好的，一用真機測試就傻眼了，個人彈出層呢？仔細去查看文檔才發現地圖的層級是最高的，不能有東西覆蓋。在查看文檔後發現了cover-view。能夠凌駕於地圖之上的盒子

彈出層動畫是一個animation組件而後本身弄的的一個動畫效果

checkImg(e) {
    var that = this;
    // 建立一個動畫實例
    var animation = wx.createAnimation({
      // 動畫持續時間
      duration: 500,
      // 定義動畫效果，當前是勻速
      timingFunction: 'linear'
    })
    // 將該變量賦值給當前動畫
    that.animation = animation
    // 先在y軸偏移，而後用step()完成一個動畫
    animation.translateY(400).step()
    // 用setData改變當前動畫
    that.setData({
      // 經過export()方法導出數據
      animationData: animation.export(),
      // 改變view裏面的Wx：if
      hascheck: true
    })
    // 設置setTimeout來改變y軸偏移量，實現有感受的滑動
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export()
      })
    }, 100)
  },
複製代碼

---

小結

這個小程序還有蠻多功能並無實現，也有一些bug尚未解決，好比兩地的規劃線路polyline不該該爲一條筆直的直線，還有街景等等一些功能須要去完善，細節才能決定成敗，仍是得不斷去完善一些細節，才能作出好的做品，這個小程序我還會去不斷的完善它，喜歡的話能夠關注我，咱們能夠一塊兒交流學習，也但願能夠給我提出一些寶貴的意見

個人Github:github.com/liaoruochen

第一次寫文章，可能項目寫的不是特別好，表達不是那麼的清楚 但願你們多多包涵，喜歡的話能夠給我大家的當心心，感謝！