黑马优购小程序项目详解

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.indexthis.setData({liindex:ii,right:this.data.tab[ii].children})},

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

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

4.2商品列表页

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

  fn1(e){console.log(e.currentTarget.dataset.index);let i = e.currentTarget.dataset.indexwx.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=trueckk.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.numif (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.listconsole.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.listconsole.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()},

微信支付流程