讓咖啡與程式碼相伴

不特別的你發表於2018-06-09

前言

程式猿最幸福的事情可能就是，在炎熱的夏天，吹著空調，喝著咖啡，敲著程式碼。由於這幾天剛接觸了微信小程式，於是就萌生了做一個小程式的想法。在這次小程式的開發中遇到了很多問題，也獲得了很多收穫。接下來我將描述一下我遇到的一些問題和已經解決的問題。希望能給大家帶來一些幫助

小程式詳解

主頁效果

讓咖啡與程式碼相伴
主頁東西不多，主要是佈局問題。頂層一個輪播圖(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

第一次寫文章，可能專案寫的不是特別好，表達不是那麼的清楚 希望大家多多包涵，喜歡的話可以給我你們的小心心，感謝！

讓咖啡與程式碼相伴

相關文章