黑马优购小程序项目详解

黑马优购小程序项目详解

1.准备工作

先把wx.request封装好。然后配置路由。把底部的导航配置出来。就是我们的首页、分类、购物车、还有我的，在全局的app.json中配置。

{
  "pages":[
    "pages/home/home",
    "pages/search/search",
    "pages/my/my",
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs",
    "pages/goodslist/goodslist",
    "pages/goods/goods",
    "pages/shopsc/shopsc",
    "pages/zhifu/zhifu",
    "pages/shopcar/shopcar",
    "pages/auth/auth",
    "pages/feedback/feedback"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "黑马优购",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "./icons/home.png",
      "selectedIconPath": "./icons/home-o.png"
    },
    {
      "pagePath": "pages/list/list",
      "text": "列表",
      "iconPath": "./icons/category.png",
      "selectedIconPath": "./icons/category-o.png"
    },
    {
      "pagePath": "pages/shopcar/shopcar",
      "text": "购物车",
      "iconPath": "./icons/cart.png",
      "selectedIconPath": "./icons/cart-o.png"
    },{
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "./icons/my.png",
      "selectedIconPath": "./icons/my-o.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.封装公共组件

在根目录下创建components文件夹作为公共组件存放的地方，将头部等常用组件封装进去。

3.请求数据

在封装好的request文件里面的http 文件中创建请求函数导入页面 详见wx.request
在页面上请求到数据之后就将数据渲染到页面上

4.页面渲染

4.1分类页tab切换

列表页面，我们左边导航和右边数据是外部盒子的一个滚动条，而不是整个页面的，左边和右边的滚动条是不互相影响的，因此我们使用了一个小程序内置的标签scroll-view 给这个标签加上scroll-y的属性就能实现滚动的效果。

  <scroll-view scroll-y></scroll-view>  
  // 作为一个盒子使用，给定一个高度或宽度，让里面的内容在这个区域出现滚动条
  // scroll-y   y轴开启滚动条
  // scroll-x   x轴开启滚动条

当点击左边盒子的时候获取到对应的数据来渲染右边

  chanege(e){
    const ii=e.currentTarget.dataset.index
    this.setData({
      liindex:ii,
      right:this.data.tab[ii].children
    })
  },

点击右边商品的时候获取到对应的商品id来进行跳转到对应的页面之后获取对应的数据

  fn1(e){
    const id=e.currentTarget.dataset.cid
    wx.navigateTo({
      url: '/pages/goodslist/goodslist?cid='+id,
    })
  },

4.2商品列表页

关于
商品列表上拉加载更多，下拉刷新
点击商品跳转到对应的详情页

  fn1(e){
    console.log(e.currentTarget.dataset.index);
    let i = e.currentTarget.dataset.index
    wx.navigateTo({
      url: '/pages/goods/goods?goods_id='+i,
    })
  },

4.3 商品详情页

在进入页面的时候，通过接口获取到数据，然后将数据渲染到页面上

小程序分享，收藏，客服功能

加入购物车

加入购物车的时候进行判断，判断当前商品是否已经在购物车里面，在的话就让该商品的数量+1，不在就将该商品添加至购物车的本地存储中

  add() {
    let car = wx.getStorageSync("car") || [];
    let index = car.findIndex(v => v.goods_id === this.data.list.goods_id);
    if (index === -1) {
      this.data.list.num = 1;
      this.data.list.check = false;
      car.push(this.data.list);
      wx.setStorageSync("car", car);
    } else {
      car[index].num++;
    }
    wx.setStorageSync("car", car);
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      mask: true
    });
  },

购物车

购物车全选，当点击全选的时候，判断全选按钮点击后的状态，来将上面的数据来推进新的数组里面，并计算总价

  myChange1(e) {
    var ckk=[];
    if(e.detail.value.length==1){
      this.data.list.forEach((item,index)=>{
        item.check=true
        ckk.push(item.goods_id)
      })
      this.setData({
        ckall:true,
        clist:ckk,
        list:this.data.list
      })
      this.jisuan()
    }else{
      this.data.list.forEach((item,index)=>{
        item.check=false
      })
      this.setData({
        ckall:false,
        clist:ckk,
        list:this.data.list
      })
      this.jisuan()
    }
  },

交互，当点击单选的时候，判断已被选中的长度是否跟购物车总长度一致来决定是否全选。

  myChange(e) {
    this.setData({
      clist: e.detail.value
    })
    if (this.data.clist.length == this.data.list.length) {
      this.setData({
        ckall: true
      })
    } else {
      this.setData({
        ckall: false
      })
    }
    this.jisuan()
  },

计算总价 在已选中的数组中进行计算

  jisuan() {
    var aa = 0;
    this.data.clist.forEach((item, index) => {
      this.data.list.forEach((it, i) => {
        if (it.goods_id == item) {
          aa += it.goods_price * it.num
          if (this.data.list[i].check == false) {
            this.data.list[i].check = true
          } else {
            this.data.list[i].check = false
          }
          wx.setStorageSync("car", this.data.list);
        }
      })
    })
    this.setData({
      sum: aa
    })
  },

商品加加减减
当点击减号的时候判断当前商品的数量是否大于1，大于一的话就让当前商品的数量-1，不大于一就将该商品删除掉，点击加号让对应商品的数量++就可以了

  jian(e) {
    var i = e.currentTarget.dataset.index;
    let car = this.data.list
    console.log(car);
    if (car[i].num > 1) {
      car[i].num--
      wx.setStorageSync("car", car);
      this.setData({
        list: car
      })
      this.jisuan()
    } else {
      car.splice(i, 1)
      wx.setStorageSync("car", car);
      this.setData({
        list: car
      })
      this.jisuan()
      if(this.data.list.length!=0){
        this.setData({
          show:true
        })
      }else{
        this.setData({
          show:false
        })
      }
    }
  },
  jia(e) {
    var i = e.currentTarget.dataset.index;
    let car = this.data.list
    console.log(this.data.list[i].check);
    car[i].num++
    wx.setStorageSync("car", car);
    this.setData({
      list: car
    })
    console.log(this.data.list[i].check);

    this.jisuan()
  },

微信支付流程