微信小程序黑马优购讲解

---

1.准备工作

1.首先拿到项目后做好项目搭建

(1)搭建之前首先要分析整个项目的剧本组成是否有源码或者是效果图（黑马优购有源码和效果图 和请求的接口文档）
(2)在源码或者效果图上分析页面的组成以及效果的展示页面跳转等
(3)在以上准备工作完成之后就要利用微信开发者工具进行开发

2.搭建基础页面

1.首先打开项目文件找到app.json中创建该项目需要的文件

2.在app.json中配置底部导航实现底部基本页面的跳转

3.底部tabbar配好路由可以跳不同的页面
接着就可以写首页的布局以及功能的实现
在请求数据时用的是封装的request请求
在根目录下创建http文件里面包含fetch.js http.js 和api.js在这个文件中来封装请求的接口
api.js

fetch.js

http.js

采用封装的方法可以处理项目在开发过程中出现一致的功能或者效果是可以用这种方式来提高开发效率

接着就可以通过项目的api文档来获取到接口请求过来的数据
首页的轮播图，nav导航，以及下面的楼层都是根据接口地址来获取所需要的所有数据最后渲染到页面上，可以采用组件化开发思想利用组件在首页注册引入。

分类页面

1.商品的分类页面是在首页给中间导航绑定点击事件然后在首页的js文件下写跳转的路由 这里用的是微信小程序文档的方法进行页面跳转

2.在分类页面，根据api接口文档在封装好的http文件中请求分类页面需要的的数据分类页面顶部的搜索按钮可以根据封装的直接引入，下面分类数据请求接口左侧的侧导航与右边的商品相当于竖向的tab切换
可以根据左侧对应的下标来找到对用的商品

列表页内容

1.通过在商品页面右侧的商品设置点击事件根据绑定的自定义是属性这样可以根据唯一的商品goods_id找到对应的商品列表数据
代码如下：

通过点击事件跳转到商品列表页（这里注意跳转路由需要传参就是商品的当前id）

这样可以实现到列表页一个跳转，在列表页根据传的参数id可以获取当前点击的对应的数据
然后遍历数据渲染到列表页

这里有部分功能的实现是上拉加载和下拉加刷新的功能实现
上拉加载下拉刷新

详情页面

跳转详情页也是根据配置详情页的接口这里需要商品的id根据id来获取整个商品的详情数据 在根据接口对页面进行渲染
代码如下：
在详情页面可以根据商品id来渲染页面
在详情页有加入收藏、分享、客服的功能 加入购物车 ：是根据效果来定义一个需要的数组 用一个数组来接收，给点击购物车绑定一个点击事件 当点击后将数据保存到数组里面并保存到本地存储里面，这样的话可以让数据不丢失 通过wx.setStorageSync 方法将数据保存 取的话可以使用wx.getStorageSync 方法获取本地存储的数据
这里要注意 添加购物车要判断商品id是否一致，当id一致时就不会往数组里面添加，只会增加对应的商品数量

handleCartAdd() {
    console.log(this.data.data);
    let k = false;
    // 判重复
    let price = this.data.data.goods_price;
    let image = this.data.data.goods_small_logo;
    let flag = false;
    // 复选框的状态
    let num = 1;
    let name = this.data.data.goods_name;
    let id = this.data.data.goods_id;

    this.obj.cart.forEach(item => {
      if (item.id == id) {
        k = true;
        item.num++;
      }
    });

    if (!k) {
      this.obj.cart.push({
        price,
        image,
        flag,
        num,
        name,
        id
      });
    }
    console.log(this.obj.cart);
    wx.setStorageSync('shopping', this.obj.cart);
    // wx.setStorageSync("cart", cart);
    wx.showToast({
      title: '加入成功',
    });
  },

跳转到购物车页面可以对保存的数据进行渲染，在购物车页面，需要实现对商品全选，反选，商品总量，总价格的计算 以及跳转到预支付页面
购物车页面有获取收获地址等用户信息 获取授权等
在获取收获地址和获取登录授权之前要判断本地是否有数据
如果没有就要通过文档接口获取数据

我的页面

这个页面是有一个登录按钮用来获取微信头像信息
给登录绑定点击事件，跳转到登录界面 在登录界面通过点击事件来获取用户信息采用方法来获取微信信息

getUserProfile(e) {
     wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        console.log(res);
        //res所有的用户信息
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        wx.setStorageSync('user', res.userInfo)
      }
      
    })
    wx.setStorageSync('user', this.data.userInfo)
  
  },

我的页面收藏商品的数量也是根据本地存储保存的收藏商品的数量来计算商品总数

意见反馈页面

需要给‘意见反馈’绑定点击事件跳转意见反馈页面
在此页面有一个需要输入的反馈内容和上传的图片还有提交按钮
点击提交先判断意见是否为空 为空弹出提示
点击＋是执行 wx.chooseImage（）方法可以调用文件选择图片
点击提交可以选择要上传的地址

获取图片：

handleChooseImg(){
    wx.chooseImage({
      // 选择图片会通过微信来调用相册
      count: 5,
      //可以上传的数量
      sizeType: ['original', 'compressed'],
      // 照片格式
      sourceType: ['album', 'camera'],
      success: (result) => {
        console.log(result);
        this.setData({
          // 图片数组 进行拼接 
          image:[...this.data.image, ...result.tempFilePaths]
          // 成功获取后
        })
      }
    })
    console.log(this.data.image);
  },

点击提交：

 handleSubmit(){
    let {text,image} = this.data
    // 判断输入的内容是否为空
    if(!text.trim()){
      wx.showToast({
        title: '请输入内容',
      })
      return;
    }
    // 调用wx.showLoading是弹出Loading字样
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });
    // 判断图片的长度是否为0
    if(image.length !=0){
      image.forEach((item,index)=>{
        // 调用wx.uploadFile方法来获取图片的文件
        wx.uploadFile({
          filePath: item,
          // 文件包含的数据(获取图片的路径)
          name: 'file',
          // 文件名
          formData: {},
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
          // 上传接收的地址
          success:(res)=>{
            console.log(res);
            let url = JSON.parse(res.data).url;
            this.LoadImgs.push(url);
            if (index === image.length - 1) {
              wx.hideLoading();
              this.setData({
                text: "",
                image: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
            }
          }
        })
      })
    }else{
      wx.hideLoading()
      console.log("只提交了文本");
      wx.navigateBack({
        delta: 1,
      })
    }
  },