服務日期選擇: {{dateValue}}
服務時間選擇: {{timeValue}}
JS邏輯結構
//在util.js裡文件裡定義了兩個方法，分別是獲取當前的日期和當前的時間，這裡要導入使用到
var util = require('../../utils/util.js')
//表單的formSubmit事件可以獲取到input、picker等組件的值，以便存儲到Storage裡面
formSubmit:function(e){
var that=this;
var addr=e.detail.value.addr,
area=e.detail.value.area,
date=e.detail.value.date,
time=e.detail.value.time;
console.log(e.detail.value);
wx.setStorage({
key:"order",
data:{
addr,
area,
date,
time
}
});
wx.navigateTo({
url:'../pay/index'
})
},
//獲取用戶選擇的時間和日期
timePickerBindchange:function(e){
this.setData({
timeValue:e.detail.value
})
},
datePickerBindchange:function(e){
this.setData({
dateValue:e.detail.value
})
}
查看訂單
強大！牛人分享微信O2O小程序仿阿姨幫【含開發教程】
由圖可知道，訂單的顯示有兩種狀態，一是沒有訂單時的顯示，二是支付後的顯示情況。狀態切換的思想：其實在html結構裡分別用div包含了兩種不同狀態的頁面，只是用display來控制狀態的顯示，而這個狀態取決於在本地存儲裡能不能找到id。id是什麼呢? id就是你下單時產生的一個id號，如果用getStorage能夠捕獲到這個id,則說明用戶已經下單，那麼這時候沒有訂單的div我們把它的display屬性設置為none不可見，而將顯示訂單詳情的div設為block可見。核心代碼：
wx.getStorage({
key:'id',
success:function(res){
that.setData({
id:res.data
});
console.log(that.data.id);
if(that.data.id === res.data){
that.setData({
display1:'block',
display2:'none'
});
}else
that.setData({
display1:'none',
display2:'block'
});
}
},
fail:function(){
that.setData({
id:0
});
console.log(that.data.id);
if(that.data.id === 0){
that.setData({
display1:'none',
display2:'block'
});
}else{
that.setData({
display1:'block',
display2:'none'
});
}
}
})
到這裡差不多也都介紹完了，最後我想分享我在過程中踩過的一些坑：
微信小程序開發中圖片的樣式是有默認值，寬320 高240 display:inline-block···所以有圖片及得要自己給它添上樣式，覆蓋默認，以防影響！
在調用百度地圖的API中，它會返回含有特殊符號的json字符串，我在這個坑裡轉了幾個小時，度娘說是啥發送請求時自帶什麼bom頭，刪除就行，然而，我並沒有搞 明白，我最後用的方法是把這個不太規矩的字符串通過一些字符串方法以及json,parse()方法把它轉化成了json對象。
最後要講的是一個細節問題，如果想要及時刷新頁面的話，我們最好把數據接口放到onshow()方法裡面，這樣數據發生改變就能刷新頁面的顯示。
區分wx.navigateTo和wx.switchTab，前者是保留當前頁面，跳轉到應用內的某個頁面（不在tabbar），後者是跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。當我們要從不在tabbar裡的頁面中跳轉到tabbar頁面時，除了選擇左上角的返回鍵後，應該選擇wx.switchTab,而不是wx.navigateTo。
項目地址：https://github.com/Sukura7/WeChat_ayibang，代碼僅限交流學習使用。
閱讀更多 螞蟻大喇叭 的文章
