黑马优购的项目

文章目录

• 目录

  文章目录

  1、准备工作。

  2、封装一些公共的组件 

  3、请求接口渲染页面 

  4、列表页面渲染 

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

  下拉刷新

   上拉加载更多

  6、详情页

  小程序收藏

  分享

  分享，是我们小程序封装好的，所以直接使用就可以了。

   分享 // 这个属性是我们小程序封装好的

  客服功能

  7、购物车页面

   7-5、支付

  8、我的页面 

  ---

1、准备工作。

我们先把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、封装一些公共的组件 

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

 

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

3、请求接口渲染页面 

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

4、列表页面渲染 

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

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

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

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

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

 然后我们页面有一个监听用于下拉动作的生命周期函数，我们可以重新请求第一页数据。

下拉刷新

思路：我们小程序有封装好的下拉动作，开启后，在使用小程序内置的监听用户下拉动作的函数，在里面重新请求第一页的数据
首先在我们要使用下拉刷新页面的json配置中写入

"enablePullDownRefresh":true,

// 开启下拉刷新 "backgroundTextStyle":"dark"

// 改变刷新时出现的样式，默认是白色。

然后在我们的开启下拉刷新的页面就可以下拉了。

onPullDownRefresh:function(){   // onPullDownRefresh 专门用来监听用户的下拉动作
			wx.request({			// 用户下拉后我们重新请求一次
			url:'https://wwwaksdha',
			data:{pagenum:1,pagesize:10},// 发送的参数		请求第一页的数据	每页10条数据
			method:'get',			// 请求方式
			success(res){
				this.setData({
				list:res.data.list /