详情页开发
详情页WXML
- 在 app.json 中把 详情页的路径 放在最上面，方便于调试。
// 之前
{
"pages": [
"pages/index/index",
"pages/detail/detail",
"pages/history/history"
],
"window": {
"navigationBarTitleText": "小猪快递"
}
}
// 修改为
{
"pages": [
"pages/detail/detail",
"pages/index/index",
"pages/history/history"
],
"window": {
"navigationBarTitleText": "小猪快递"
}
}
- 和首页同理，转化Web H5 标签为 小程序组件标签。
<view class="view-container">
<view class="page-header">
<view class="user-info">
<image class="user-avatar" src="/images/avatar.png"></image>
<text class="user-nickName">张三</text>
</view>
<view class="page-nav">
<navigator url="/pages/history/history">历史</navigator>
</view>
</view>
<view class="page-body">
<view class="detail-section">
<view class="container">
<view class="detail-info">
<text class="detail-campany">顺丰快递</text>
<text class="detail-id">12345678</text>
</view>
<view class="detail-progress-list">
<view class="detail-progress-item">
<view class="detail-progress-time">时间 2018-04-14 11:44:22</view>
<view class="detail-progress-address">订单已完成，感谢您在京东购物，欢迎您再次光临！ 妥投</view>
</view>
<view class="detail-progress-item">
<view class="detail-progress-time">时间 2018-04-14 08:16:21</view>
<view class="detail-progress-address">配送员开始配送，请您准备收货，配送员，张三，手机号，13811111111 配送员收货</view>
</view>
<view class="detail-progress-item">
<view class="detail-progress-time">时间 2018-04-13 18:45:23</view>
<view class="detail-progress-address">货物已交付京东物流</view>
</view>
</view>
</view>
</view>
</view>
<view class="page-footer">
<view>Copyright 2018 扎克斯未来体验技术部出品</view>
</view>
</view>
详情页wxss
在CSS章节中app.css文件中，拷贝对应的样式到 history.wxss 文件中，如以下部分：
/pages/detail/detail
修改一下 detail-section 的 paddingTop 属性，让其不要距离顶部太远。
.detail-section{
padding-top: 40px;
}
/* 详情-副标题 */
.detail-section .detail-info{
font-size: 18px;
margin-bottom: 40px;
font-weight: 600;
}
/* 详情-列表 */
.detail-section .detail-progress-list{
list-style-type: none;
padding-left: 0;
}
/* 详情-列表项 */
.detail-section .detail-progress-item{
margin-bottom: 20px;
line-height: 20px;
}
/* 详情-时间 */
.detail-section .detail-progress-time{
margin-bottom: 8px;
font-weight: 600;
}
/* 详情-位置内容 */
.detail-section .detail-progress-address{
color: #666;
}
详情页脚本
详情页中我们从来源获取到快递公司及订单号的参数，然后请求资源，获取到数据在页面上展示。
微信开发者工具中开启 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书，方便本地调试。
- 定义模版的动态数据信息，快递公司、订单、详情
Page({
data: {
company:'',
order_id:'',
detailList:[],
}
})
<view class="detail-section">
<view class="container">
<view class="detail-info">
<text class="detail-campany">{{company}}</text>
<text class="detail-id">{{order_id}}</text>
</view>
<view class="detail-progress-list">
<view class="detail-progress-item" wx:for="{{detailList}}" wx:key="unique" wx:for-item="detail">
<view class="detail-progress-time">{{detail.time}}</view>
<view class="detail-progress-address">{{detail.context}}</view>
</view>
</view>
</view>
</view>
- 获取数据, 在 getData 方法时候，为方便调试我们给参数设置默认值，因为当前非首页调整过来参数里面是没有值的。
Page({
data: {
company:'',
order_id:'',
detailList:[],
},
onLoad: function(options) {
let company = options.company;
let order_id = options.order_id;
this.getData(company,order_id);
},
getData: function(company = 'jd', order_id = '73959856936'){
let url = 'https://www.kuaidi100.com/query';
wx.request({
url,
data:{
type:company,
postid:order_id
},
success:(res)=>{
if(res.data.data.length){
this.setData({
detailList:res.data.data,
order_id:order_id,
company:company
})
this.setStorage(company,order_id);
}else{
console.log(err)
}
},
fail:(err)=>{
console.log(err)
}
})
},
setStorage:function(company,order_id){
console.log(company,order_id)
}
})
- 存储到本地缓存，小程序本地存储支持对象，所以不需要像 web H5 一样做字符串转换。
Page({
...,
setStorage:function(company,order_id){
console.log(company,order_id)
let history_data = wx.getStorageSync('history_data') || {};
history_data[order_id] = company;
wx.setStorage({ key: 'history_data', data: history_data });
}
})
恢复设置
/pages/app.json
{
"pages": [
"pages/index/index",
"pages/detail/detail",
"pages/history/history"
],
"window": {
"navigationBarTitleText": "小猪快递"
}
}
/pages/detail/detail/detail.js
Page({
data: {
company:'',
order_id:'',
detailList:[],
},
onLoad: function(options) {
let company = options.company;
let order_id = options.order_id;
this.getData(company,order_id);
},
getData: function(company, order_id){
let url = 'https://www.kuaidi100.com/query';
wx.request({
url,
data:{
type:company,
postid:order_id
},
success:(res)=>{
if(res.data.data.length){
this.setData({
detailList:res.data.data,
order_id:order_id,
company:company
})
this.setStorage(company,order_id);
}else{
console.log(err)
}
},
fail:(err)=>{
console.log(err)
}
})
},
setStorage:function(company,order_id){
console.log(company,order_id)
let history_data = wx.getStorageSync('history_data') || {};
history_data[order_id] = company;
wx.setStorage({ key: 'history_data', data: history_data });
}
})