黑马优购

准备工作

我们先把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"
  },
}

封装一些公共的组件

首先看一下我们页面中哪些功能被使用了2次或以上，我们就都封装成公共的组件。比如一些搜素、头部等。在根目录下创建一个components文件夹。然后创建一个公用的文件夹

这个文件夹中存放我们公用的组件
我们准备工作就完成了。

请求接口渲染页面

我是先写的首页，使用我们封装好的wx.request请求来数据，拿着数据去渲染页面就可以了。

列表页面渲染

到了列表页面，我们左边导航和右边数据是外部盒子的一个滚动条，而不是整个页面的，左边和右边的滚动条是不互相影响的，因此我们使用了一个小程序内置的标签。

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

然后应为头部上边有一个搜素组件，占据了一定的位置，我们这个盒子的高度不能设置为100%。
这时我们可以使用css中的一个计算方法calc()方法来计算高度。

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

这样我们就计算出来页面剩余的高度。接着就是给每一个内容绑定一个点击事件。跳转页面了。当然，跳转的时候我们需要把当前点击的id通过路由传参发送出去。
路由传参：一般常用的有2种，

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  这个对象中

详细列表下拉刷新，上拉加载

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

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

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

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

收藏：在我们进入页面时，需要判断我们这条数据有没有收藏过，如果收藏过，就让收藏的星星变亮。
当我们单击收藏时，我们肯定要判断当前这条数据有没有被收藏，如果被收藏是要取消收藏的，如果每有收藏就收藏。最后存入本地存储。

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

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

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

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

点击复选框：我们渲染的时候使用

<checkbox-group></checkbox-group> // 标签，把我们一组的复选框包裹住
 // 他有一个bindchange 事件，当我们点击这一组内的复选框时触发。

购物车的数量加减。
都注册一个点击事件，当我们点击减号时，我们传入一个下标，让后让当前下标的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,
        })
      }
    })
// 这个方法来获取我们用户的登录信息