服务日期选择: {{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，代码仅限交流学习使用。
閱讀更多 螞蟻大喇叭 的文章
