AitSchool

历史页开发

历史页主要为获取本地存储数据展示

配置

同理在 app.json 中把 详情页的路径 放在最上面，方便于调试。

// 修改为
{
  "pages": [
    "pages/history/history",
    "pages/index/index",
    "pages/detail/detail"
  ],
  "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>
    <view class="page-body">
        <view class="history-section">
            <view class="container">
                <view class="history-list">
                    <view class="history-item">
                        <view>顺丰</view>
                        <view>1234242424</view>
                    </view>
                    <view class="history-item">
                        <view>京东</view>
                        <view>8884223223</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="page-footer">
        <view>Copyright  2018 扎克斯未来体验技术部出品</view>
    </view>
</view>

样式

由于在 web H5 时候，为了体验表格元素我们使用了 table 标签，在 小程序里面缺乏table组件，我们重新为其书写样式。

/pages/history/history/history.wxss

.history-item{
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
}

脚本

获取本地缓存信息设置在页面上

  1. 定义模版的动态数据信息
<view class="history-section">
    <view class="container">
        <view class="history-list">
            <view class="history-item" wx:for="{{history_data}}">
                <view>{{item}}</view>
                <view>{{index}}</view>
            </view>
        </view>
    </view>
</view>
  1. 设置对象信息
Page({
    data: {
        history_data:{},
    },
    onLoad: function(options) {
        this.getData();
    },
    getData: function(){
        let history_data = wx.getStorageSync('history_data') || {};
        this.setData({ history_data })
    }
})

重设

/pages/app.json

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/history/history"
  ],
  "window": {
    "navigationBarTitleText": "小猪快递"
  }
}

思考

最后同学们思考下，例如之前事件绑定的方法，实现点击对应的历史记录跳转详情页，可以参考文档。

<view class="history-section">
    <view class="container">
        <view class="history-list">
            <view class="history-item" wx:for="{{history_data}}" wx:key="unique" 
                data-order_id="{{index}}" data-company="{{item}}" 
                bindtap="goDetail">
                <view>{{item}}</view>
                <view>{{index}}</view>
            </view>
        </view>
    </view>
</view>

Page({
    ...,
    goDetail:function(e){
        let company = e.currentTarget.dataset.company;
        let order_id = e.currentTarget.dataset.order_id;
        console.log(company,order_id)

        let url = `/pages/detail/detail?company=${company}&order_id=${order_id}`;
        wx.navigateTo({ url });
    }
})

← 小结 →