前言
程式猿最幸福的事情可能就是，在炎熱的夏天，吹著空調，喝著咖啡，敲著程式碼。由於這幾天剛接觸了微信小程式，於是就萌生了做一個小程式的想法。在這次小程式的開發中遇到了很多問題，也獲得了很多收穫。接下來我將描述一下我遇到的一些問題和已經解決的問題。希望能給大家帶來一些幫助
小程式詳解
主頁效果
- 浮動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是一個蠻實用的元件，這裡用到了關鍵字搜尋(search)介面，直接查詢了附近星巴克的門店，裡面還可以選擇長地址和短地址，基本上你要的資料都有，還是比較方便的。必須安利一波。
qqmapsdk.search({
keyword: '星巴克',
address_format: 'short',
page_size: 20,
success: (res) => {
},
fail: function (res) {
},
complete: function (res) {
}
複製程式碼彈出層動畫是一個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
第一次寫文章，可能專案寫的不是特別好，表達不是那麼的清楚 希望大家多多包涵，喜歡的話可以給我你們的小心心，感謝！