小程序和html、css、js大同小异,但是有些地方还是有差别的,比如js。。
从后台接收到一串json数据,利用block滚动,形成list列表页,之后点击列表中的某一项,进入详情页。然后从后台接收到数据后有点懵了,时间date变成了一大串数字(其实是json自动给转换成时间戳了)是什么鬼啊。。然后随便翻了翻uitl.js,发现小程序官方demo中自带转换(还是很暖心的,虽然保存登录态那一块挺坑的)
效果:
代码:
list.wxml:其中。
<navigator url='../list/item?id={{item.consumption_id}}'>
相当重要,这个就涉及到小程序页面跳转传值的问题,通过这个传值,我们可以在另一个页面的onload方法中得到这个id
<view class='container'>
<loading hidden="{{!loading}}">加载中</loading>
<block class="" wx:for="{{list}}" wx:key="id">
<navigator url='../list/item?id={{item.consumption_id}}'>
<view hover-class='hover-class' id="{{item.consumption_id}}" style='display:flex; height:120px;border-bottom: 1px solid #DBDBDB'>
<!--左边图片-->
<view style='width:128rpx; height:128rpx; margin:20rpx;'>
<image class='index-logo' style='width:128rpx; height:128rpx' src="{{item.merchant_photo}}"></image>
</view>
<!-- 右边内容 上下结构 -->
<view style='display:flex; flex-direction:column; margin:20rpx;'>
<label class='item_title'>{{item.consumption_money}}</label>
<label class='item_content'>{{item.consumption_project}}</label>
<!-- 右边底部内容 左右结构 -->
<view style='display:flex; flex-direction:row; height:40rpx;'>
<label class='item_from'>{{item.merchant_name}}</label>
<label class='item_time'>{{item.consumption_date}}</label>
</view>
</view>
</view>
</navigator>
</block>
</view>
list.wxss:
.item_content{
width: 90%;
height: 100rpx;
font-size: 11pt;
color: #888;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
}
.item_from{
width: 550rpx;
font-size: 10pt;
color: #999;
}
.item_time{
width: 100%;
font-size: 10pt;
color: #999;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 40rpx;
}
.hover-class{
background-color: #A4D3EE;
}
list.js:
//声明js
var time=require('../../utils/util.js')
var app = getApp();
Page({
data: {
//全局变量
list: [],
//加载样式是否显示
loading: true
},
onLoad: function (options) {
var that = this //很重要,一定要写
wx.request({
url: '',//和后台交互的地址,默认是json数据交互,由于我的就是json,这里就没有对header进行编写
data: {},
method: 'POST',
success: function (res) {
var datas=res.data;//res.data就是从后台接收到的值
for(var i=0;i<datas.length;i++){//用for循环把所有的时间戳都转换程时间格式,这里调用的是小程序官方demo中带的方法,
datas[i]["consumption_date"] = time.formatTime(new Date(datas[i]["consumption_date"]))
}
that.setData({//循环完后,再对list进行赋值
list: datas,
loading: false
})
},
fail: function (res) {
console.log('submit fail');
},
complete: function (res) {
console.log('submit complete');
}
})
}
})
这里着重讲一下js文件。
var time=require('../../utils/util.js')
是调用一下这个js,这个js文件里有一个小程序原生的时间戳转换格式。util.js里的
module
.exports = {
formatTime: formatTime,
}
也很重要。
官方程序中的时间戳转换方法就是,
time.formatTime(new Date(你的时间参数))
下面是官方demo中的util.js方法,我也把代码贴出来吧
util.js:
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, ].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime,
}
相比较之下,item里的日期转换就要简单一点
item.wxml:
<view class='container' style='display:block;'>
<view class='item'>
<view class='left'>时间</view>
<view class='right'>{{list.consumption_date}}</view>
</view>
<view class='item'>
<view class='left'>项目</view>
<view class='right'>{{list.consumption_project}}</view>
</view>
<view class='item'>
<view class='left'>技师</view>
<view class='right'>{{list.consumption_technician}}\t号技师</view>
</view>
<view class='item'>
<view class='left'>店铺</view>
<view class='right'>{{list.merchant_name}}</view>
</view>
<view class='item'>
<view class='left'>订单号</view>
<view class='right'>0012003400560078</view>
</view>
<view class='item'>
<view class='left'>总金额</view>
<view class='right'>{{list.consumption_money}}\t元</view>
</view>
<view class='item'>
<view class='left'>优惠金额</view>
<view class='right'>0\t元</view>
</view>
<view class='item'>
<view class='left'>实付金额</view>
<view class='right'>{{list.consumption_money}}\t元</view>
</view>
</view>
item.wxss:
.item{
width: 100%;
margin-top: 10rpx;
font-size: 30rpx;
display: flex;
height: 80rpx;
border-bottom: 1px solid #DBDBDB;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.left{
padding-left: 30rpx;
color: #A9A9A9;
}
.right{
padding-right: 30rpx;
}
item.js:
var time = require('../../utils/util.js')
var app = getApp();
Page({
data: {
list: {},
loading: true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
wx.request({
url: ''+options.id,//options.id是从list页面跳转过来带的参数,可以用来url拼接。比如根据id查询啊什么的
data: {},
method: 'POST',
success: function (res) {
console.log(res.data);
var datas = res.data;
datas["consumption_date"] = time.formatTime(new Date(datas["consumption_date"]))
that.setData({
list: datas,
loading: false
})
},
fail: function (res) {
console.log('submit fail');
},
complete: function (res) {
console.log('submit complete');
}
})
}
}
)