优购商城项目讲解

①首先先把wx.request()封装好。接着去配置路由。把底部导航写出来，
在全局的app.json中配置：

{
  "pages": [ //  这个是我们的页面，有点类似我们的vue路由
    "pages/index/index", 
    "pages/category/category",
    "pages/goods_list/goods_list",
    "pages/goods_detail/goods_detail",
    "pages/cart/cart",
    "pages/collect/collect",
    "pages/order/order",
    "pages/search/search",
    "pages/user/user",
    "pages/feedback/feedback",
    "pages/login/login",
    "pages/auth/auth",
    "pages/pay/pay"
  ],
  "tabBar": {
    "list": [{ // 这个是我们小程序内置的下部导航
      "pagePath": "pages/index/index",
      "text": "首页",		
      "iconPath": "/icons/home.png", // 没被选中的图片
      "selectedIconPath": "/icons/home-o.png"		// 被选中时的图片
    },{
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "/icons/category.png",
      "selectedIconPath": "/icons/category-o.png"
    },{
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "/icons/cart.png",
      "selectedIconPath": "/icons/cart-o.png"
    },{
      "pagePath": "pages/user/user",
      "text": "我的",
      "iconPath": "/icons/my.png",
      "selectedIconPath": "/icons/my-o.png"
    }]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTextStyle": "white"
  },
}

 

②封装公共组件，找出使用重复的功能，把它封装成公共的组件，比如一些搜索框、头部等。在根目录下创建一个components文件夹。再在里面创建一个公用的文件夹，这个文件夹中存放我们公用的组件。
③请求接口渲染页面，在首页完成以后，使用封装好的wx.request()请求数据，用这个数据去渲染页面。

④列表页渲染：在列表页，分为左边导航和右边数据，它们都是外部盒子的是滚动的，就可以使用小程序内置的标签。

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

在头部有搜索框，是固定的，可以使用css中的一个计算方法calc()方法来计算出页面剩余的高度。

height:calc(100vh - 80px);   // 假设我们搜素组件的高度为80px
// 原生css 中的计算

给每个内容绑定一个点击事件。并跳转页面。在跳转的时候需要把当前点击的id通过路由传参发送出去，
一般常用的路由传参有两种：

wx.navigateTo({		
// 不可以跳转到tabBar页面，就是我们在全局的app.json设置的tabBar属性里的那几个路由
	url:'/pages/goods_list/goods_list?id=' + id  // 我们要跳转到哪个页面
	// 如果要传参，我们可以直接拼接就可
})

wx.redirectTo({  // 只能跳转tabBar页面
	url:'/pages/goods_list/goods_list?id=' + id 
})
// 注意：我们传过去的数据是在this.options  这个对象中

⑤详情页的上拉加载，下拉刷新：

 上拉加载
要先知道，小程序中有一个生命周期函数是：监听用户的滚动条是否触底。
可以在全局定义一个num，表示当前页数，在页面显示的时候后台会给我们返回一个数据的总条数。
我们根据这个总条数计算出一共需要多少页。
公式：总页数 / 每页多少条数据 = 一共有多少页
注意：因为我们页数如果是10 / 3 肯定有小数点，所以这里我们需要向上取整的。
let page = Math.ceil(total / 10); //这个10也可以是个变量
我们在监听到用户触底的时候，首先让当前页num+1，然后判断一下是否大于我们计算出来，然后去请求num页的数据

下拉刷新：要把页面先渲染出来，然后在实现功能。开启页面的下拉刷新，在当前页面的json中写配置：

"enablePullDownRefresh":true,	// 开启用户下拉
  "backgroundTextStyle":"dark"	// 下拉时loading颜色
  // 需要加上这2个属性

在这个页面有一个监听用于下拉动作的生命周期函数，我们可以重新请求第一页数据，我们最后给每一条数据绑定一个点击事件，然后传过去一个id。

⑥详情页：

在刚进详情页先去根据详情列表页传过来的id去请求接口，然后使用返回的数据去渲染。
详情页大概分为收藏、加入购物车、分享、联系客服。

收藏：在我们进入页面时，需要判断我们这条数据有没有收藏过，如果收藏过，就让收藏的图标变红。
          如果以收藏就取消收藏，如果没有收藏就收藏。最后存入本地存储。

加入购物车：当我们点击加入购物车时，首先判断我们购物车内有没有这个商品，如果有就让这个商品的数量+1，如果没有就添加。最后存入本地存储。

分享：我们给分享一个按钮，给这个按钮一个open-type="share"属性。

联系客服：我们给联系客服一个按钮，给这个按钮一个open-type="contact"属性。

⑦购物车：购物车页面有：全选、增加/减少数量、复选框和全选交互、计算总价、获取收货地址、支付。
全选：我们添加购物车的时，给每一条数据都加上一个flag，表示当前复选框的checked存在不存在。点击全选，我们把这个flag属性全部变为true，然后在点一下就变为flag。

购物车的数量加减。
注册一个点击事件，在点击减号时，传入一个下标，让后让当前下标的num数量-1，判断当前数量是否小于1，如果小于1就提示是否删除。
                                 当我们点击加号时，我们还是传入一个下标，让当前下标的num属性+1。

点击获取地址时，给一个点击事件，之后使用：

wx.getSetting({});	
wx.chooseAddress({})
// 这2个方法来获取地址

支付
点击支付时，需要判断用户有没有登录，登录以后。查看详情
 登录成功，先发送请求创建一个订单号，接着发起预支付接口，然后发起微信支付，支付完成后我们就手动删除掉用户购买的商品，然后跳转到订单页面。

⑧我的：先判断本地存储中有没有登录过，如果没有登录过，就提示让用户去登录。
登录：我们写好登录页面后，给一个登录按钮，然后写一个点击事件，在这个事件中使用：

 wx.getUserProfile({
      desc: 'desc',
      success(res) {  // 成功
        console.log(res); // res获取到我们用户的信息
        wx.setStorageSync('userinfo', res.userInfo);  // 本地存储
        wx.navigateBack({ // 返回上一页
          delta: 1,
        })
      }
    })
// 这个方法来获取我们用户的登录信息