YouGou商城

参考项目文档

1. 搭建目录结构

目录名	作用
styles	存放公共样式
components	存放存放组件样式
lib	存放第三⽅库
utils	帮助库
request	⾃⼰的接⼝帮助库

2. 搭建项目页面
   

在做项目之前呢，我们先来封装下http,方便调用接口
http中包含api.js、fatch.js、http.js

 1. api.js:是导出我们请求的接口
 2. fatch.js:是用的Promise 分别传三个参数( url,data,method,)
 3. http.js:api.js和fatch.js都经过http.js 

//导出
module.exports={
  swipers,
}

开始进入我们的页面

底部导航分别对应的我们的页面，是在app.json中写入
pages:配置我们的页面
window:配置全局头部样式
tabBar:是用于页面路由跳转

首页

最顶部的搜索栏是采用数据的双向数据绑定、页面的跳转
轮播图是调用swiper接口和父传子、子传父来实现

父传子：
在自定义组件的js文件中通过properties属性来接收参数，在父组件的子组件标签中双向绑定挂载自定义属性，然后在父组件中修改值同时子组件值也会修改。
子传父：
在子组件js文件中修改通过properties属性接收到的参数同时父组件中的值也会变化。

下面的楼层，直接渲染数据

分类页

首先把分类页拆分成两份，左边是tap切换，右边是数据渲染

 //生命周期函数--监听页面加载

  onLoad: function (options) { 
    var _this=this
    wx.request({
    //获取我们的接口
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
    
       success:function(res){
         _this.setData({
           list:res.data.message
         })
    }
  
    })
  },

点击tap切换时，我们给它一个默认的参数ID，根据ID进行筛选
点击右侧数据我们请求列表接口，携带者当前点击的cid

//获取列表页
onLoad: function (options) {
    this.setData({
      re:options
    })
    var _this=this
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query=&cid='+options.id+'&pagenum=1&pagesize='+this.data.num*10,
      success(res){
        _this.setData({
          list:res.data.message.goods
        })
      }

点击详情页中单条数据----代码展示

//点击每一条获取当前的ID
go_lis(e){
console.log(e.target.dataset.id);
//将获取的iD重新赋值到data中
this.setData({
  id:e.target.dataset.id
})
//跳转时，会携带data中的id
wx.redirectTo({
  url: '../lis/index?id='+this.data.id,
})

进入加入购物车页面

在加入购物车页面渲染数据，写一写样式，当我们点击加入购物车时

//点击加入购物车
  get(){
    Toast.success('添加成功'); 
    var nn=true
    //修改下this的指向
  var _this=this
  //获取本地数据
  var obj=wx.getStorageSync('shopCar')||[]
 //如果本地有这条数据，我就让它num++，前提是ID相等的情况下
    obj.forEach(res=>{
      if(res.cat_id==_this.data.list.cat_id){
        res.num++
        nn=false
      }
    })
//如果本地里面没有这条数据时，让它默认添加一条 即num=1
if(nn==true){
      _this.data.list.num=1
      _this.data.list.flag=false
      obj.push(_this.data.list)
    }else{
      
    }
    //我们将这条数据重新存储到本地
 wx.setStorage({
    data: obj,
    key: 'shopCar',
  })
}

点击左下购物车时

//跳到购物车页面
go_shop(){
  wx.reLaunch({
    url: '../btn-shop/index',
  })
},

进入购物车页面

//点击单选
ck(e){
//打印出来的是我们的下标
  console.log(e.target.dataset.index);
  //如果是点击当前的下标时 flag是判断选中不选中的
  if(this.data.list[e.target.dataset.index].flag==true){
    this.data.list[e.target.dataset.index].flag=false
  }else{
    this.data.list[e.target.dataset.index].flag=true
  }
//var一个空数组
  var nn=[]
  //筛选之后把不选中的放到一个空数组中
  this.data.list.forEach(res=>{
    if(res.flag==false){
    nn.push(res)
    }
  })

//如果为false的数组中为空时，这就相当于我们都选中了，相反
  if(nn.length==0){
    this.setData({
      checked:true
    })
  }else{
    this.setData({
      checked:false
    })
  }

//我们将data中的list存到数据中
  wx.setStorage({
    data: this.data.list,
    key: 'shopCar',
  })

}

接下来进入我们的加减法计算

//加
jia(a){
//点击加号我们将下标存一下
  var index=a.target.dataset.index
  //将当前数据中的num++
this.data.list[index].num++
//将data中的list再重新存一下
wx.setStorage({
  data: this.data.list,
  key: 'shopCar',
})
this.onLoad()

},
//减
jian(a){
  var index=a.target.dataset.index
  this.data.list[index].num--
  //减法唯一不同的地方在判断num=0时删除这条数据
  if( this.data.list[index].num==0){

    Dialog.confirm({
      title: '删除',
      message: '确认删除',
    })
      .then(() => {
        this.data.list.splice(a.target.dataset.index,1)
        wx.setStorage({
          data: this.data.list,
          key: 'shopCar',
        })
        this.onLoad()
        // on confirm
      })
      //相反点击取消时，我们让它的数量等于1
      .catch(() => {
        this.data.list[a.target.dataset.index].num=1
        //再存一下
        wx.setStorage({
          data: this.data.list,
          key: 'shopCar',
        })
        this.onLoad()
      });
  }

全选功能的实现

//点击全选，获取它的状态
  onChange(event) {
    this.setData({
      checked: event.detail,
    });
  //这个list是我们一开始选中的数据,当全部选中时，就意味着状态一样
    this.data.list.forEach(res=>{
      res.flag=event.detail
    })
    wx.setStorage({
      data: this.data.list,
      key: 'shopCar',
    })
    this.onLoad()
  },

价格渲染以及实现

//生命周期函数--监听页面加载

  onLoad:function(options) {
   var _this=this
   //获取数据
   wx.getStorage({
     key: 'shopCar',
     success(res){
   //价格
      var pric=0
      res.data.forEach(aa=>{
      如果点击的这条数据为true时，我们就计算他们的价格
       if(aa.flag==true){
        pric+=(aa.goods_price*aa.num)
       }
      })
      console.log(pric);
      _this.setData({
        price:pric
      })

      _this.setData({
        flag:false,
        list:res.data
      })
      console.log(res.data);
     }
   })

  },

点击提交订单时,我们将选中的数据存一下，然后在订单页面获取并展示

下单

1. 点击下单按钮，请求下单支付，返回支付参数，收到5个参数之后输入密码确认用户支付 输入密码是跟小程序 小程序是跟微信 然后返回给我们

wx.requestPayment() //获取五个参数后调用支付接口
timeStamp:res.data.timeStamp //时间戳
nonceStr:res.data.nonceStr //随机字符串
package:res.data.package ///订单详情扩展字符串
signType:res.data.signType //签名方式
paySign:res.data.paySign //签名

2. 支付流程

• 登录微信公众平台, 首先开通微信支付功能 这是准备工作的第一步，确保小程序对应的支付功能已经开启
• 登录微信商户平台需要获取两个参数，一个是商户号 一个是支付秘钥。

 1.首先要调用wx.login()获取code，唯一标识openID和会话秘钥session_key。并将获取到token缓存下来。
2.服务器端则是通过小程序提交的code，和小程序的APP和url，并用url进行get请求。
他返回的数据是一个json字符串，我们通过使用json_decode将他解析成数组，里面包括openID和session_key。
3.调用下单接口，获取prepay_id，这是后端完成的。
点击提交订单，创建订单，清空购物车，完成支付，过程会有两种清空，如果是在购物车进行提交订单操作，我们需要先清空一下购物车再创建订单，最后完成支付。