黑马优购项目讲解

黑马优购项目讲解

一. 准备工作

  我们首先拿到一个项目会看到他的一个文档，里面有他所需要接受的数据的接口，然后我们在微信开发程序中创建好项目文件夹。
  1）先把我们所需要的的接口请求用promise进行封装 ，

封装一个函数，把它们写在一个文件夹里，当那个页面需要那里的数据就进行调用就可以。
2）把我们所必须要的页面也先配置好，当然还有底部导航，以及路由的配置，以及一些全局的配置。
3）看项目文档时，查看每个页面是否有共同的地方，如果有就用把相同的地方封装成一个组件，进行调用

二. 首页的操作

1） 当我们的准备工作完成后，当然先写的就是首页，
在黑马优购中，页有一个搜索框，和一个Swiper，在这里我分别封装了一个组件，进行了调用。

2）然后还有中间的导航，和下面楼层的渲染，在这里只要用app.http接受下你封装的接口数据就行在，再放一个数组，在页面循环进行渲染，在这里我们的导航点击可以跳转到下一个页面---------分类页面，所以我们要给导航注册个点击事件。

分类页面的主要操作

对于分类页面，主要难点是在，导航的切换引起所需商品的改变，
1）在这里我们请求完数据后，把左边的导航数据储存在一个数组内渲染页面，右边商品也有一个数组进行储存，但渲染，先渲染的是第一页的数据。
这里简单的就是来说一个tab切换，不过我在这里用到了微信小程序中的swiper属性中的current属性
1）在导航上设置了一个自定义属性，我这里要的是下标，然后用三元表达式，来判断class类名，并给他绑定一个点击事件
2） 再写一个current事件， current事件只在change发生改变时才会触发。
在导航的点击事件中的操作是，先获取下标我这里是e.currentTarget.dataset.index，
然后his.data.navleft[index].children储存商品下面导航的数据，点击下标，然后然那个current和那个index有同样的值，进行储存，渲染就可以了。
js代码如下

Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    navleft: [],
    index: "",
    resulty: [],
    currentTab: 0,
  },
  menu: function (e) {
   
    // 先获取下标
    let index = e.currentTarget.dataset.index
    // 储存下标对应的数据
    let resulty = this.data.navleft[index].children
    console.log(index);
      this.setData({
   
        currentTab: e.currentTarget.dataset.index,
        resulty: resulty
      })
  },
  }

 wxml代码

<view class="nav_big">
  <scroll-view scroll-y class="navleft_big">
    <view wx:for="{
   {navleft}}" class="nav_left {
   {currentTab==index ? 'on' : ''}}" wx:key="item" data-index="{
   {index}}"
      bindtap="menu">
      {
   {
   item.cat_name}}
    </view>
  </scroll-view>
  <scroll-view scroll-y class="nav_right" current="{
   {currentTab}}">
    <view wx:for="{
   {resulty}}" wx:key="index" class="swiperl-box">
      <text>/{
   {
   item.cat_name}}/</text>
      <view class="nav">
        <block wx:for="{
   {item.children}}" wx:key="index">
          <view class="nav_img" bindtap="listchange" data-id="{
   {item.cat_id}}">
            <image src="{
   {item.cat_icon}}" class="images"></image>
            <text>{
   {
   item.cat_name}}</text>
          </view>
        </block>
      </view>
    </view>
  </scroll-view>
</view>

列表页面

在列表页面最关键的也就是下拉刷新和上拉加载
对于下拉刷新的具体操作
1）现在要实现下拉刷新的页面的json中定义 “enablePullDownRefresh”:true,
“backgroundTextStyle”:"dark"这两个属性，他才能实现下拉
2）在data写一个数组来接受第一次接口接收到的数据，

data{
   
    lister: [ ],    //第一次请求到页面的数据  
}

3）在onPullDownRefresh中写入具体的操作
先写一个wx.showLoading在 数据请求之前， 写一个关闭在数据请求结束后
用展开运算符来写把第一次请求的数据和第二次请求来的数据进行拼接
并储存渲染

  onPullDownRefresh: function () {
   
  let that = this;
    //加载数据中的的Laoding
    wx.showLoading({
   
      title: '加载中...',
    })
    //再次向接口请求的数据
app.http.goods_lists({
   
      cid: that.options.cid
    }, 'get').then(res => {
   
  //  数据请求出来后关闭Llading
      wx.hideLoading()
      let {
   
        data: {
   
          message: {
   
            goods
          }
        }
      } = res
     //定义res 数组 里面的数据是consloe.log(res)下的data下的message下goods
     //利用展开运算符将之前保留的数据和又请求到的数据进行新的存储
      that.setData({
   
        // 用展开运算符 保存数据shopList
        lister: [...goods, ...that.data.lister]
      })
 wx.stopPullDownRefresh();   //数据请求成功后就停止下拉
       wx.hideLoading()             //隐藏动画
  },

上拉加载
1）首先我们先写一个对象用来存取从接口中请求来我们所需要的数据，例如我写的一个项目中，
‘

  data{
   
    list