黑马优购项目讲解

文章目录

1. 项目搭建
2. 初始化项目
3. 首页
4. 商品分类
5. 商品列表
6. 商品详情
7. 购物车页面
8. 订单支付
9. 搜索
10. 登录页面
11. 意见反馈
12. 收藏页面
13. 授权页面
14. 我的页面

 帮助⽂档

   1. ⼩程序开发⽂档

   3. 阿⾥巴巴字体 iconfont

 

1.项目搭建

1.1目录搭建

1.2页面搭建

2.初始化项目

2.1后期可能会引用外部文件es6转es5语法

    下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js

 

     http中用于存放请求，并且暴露出去

//用于存放请求  并且暴露出去

// 将原生的请求修改为promise的方式 解决回调地域的情况   params传入的参数，用...的形式将传入的参数结构出来
 // 同时发送异步代码的次数 
let ajaxTimes=0;
export const request=(params)=>{
  // 判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
  let header={...params.header};
  if(params.url.includes("/my/")){
    // 拼接header 带上token
    header["Authorization"]=wx.getStorageSync("token");
  }


  ajaxTimes++;
  // 显示加载中 效果
  wx.showLoading({
    title: "加载中",
    mask: true
  });
    

  // 定义公共的url
  // const baseUrl="https://api.zbztb.cn/api/public/v1";
  const baseUrl="https://api-hmugo-web.itheima.net/api/public/v1";

  return new Promise((resolve,reject)=>{
    wx.request({
     ...params,
     header:header,
     url:baseUrl+params.url,
     success:(result)=>{
       resolve(result.data.message);
     },
     fail:(err)=>{
       reject(err);
     },
     complete:()=>{
      ajaxTimes--;
      if(ajaxTimes===0){
        //  关闭正在等待的图标
        wx.hideLoading();
      }
     }
    });
  })
}

utils中引入asyncWX.js  

/**
 * promise 形式  getSetting
 */
export const getSetting=()=>{
  return new Promise((resolve,reject)=>{
    wx.getSetting({
      success: (result) => {
        resolve(result);
      },
      fail: (err) => {
        reject(err);
      }
    });
  })
}
/**
 * promise 形式  chooseAddress
 */
export const chooseAddress=()=>{
  return new Promise((resolve,reject)=>{
    wx.chooseAddress({
      success: (result) => {
        resolve(result);
      },
      fail: (err) => {
        reject(err);
      }
    });
  })
}

/**
 * promise 形式  openSetting
 */
export const openSetting=()=>{
  return new Promise((resolve,reject)=>{
    wx.openSetting({
      success: (result) => {
        resolve(result);
      },
      fail: (err) => {
        reject(err);
      }
    });
  })
}

/**
 *  promise 形式  showModal
 * @param {object} param0 参数
 */
export const showModal=({content})=>{
  return new Promise((resolve,reject)=>{
    wx.showModal({
      title: '提示',
      content: content,
      success :(res) =>{
        resolve(res);
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}


/**
 *  promise 形式  showToast
 * @param {object} param0 参数
 */
export const showToast=({title})=>{
  return new Promise((resolve,reject)=>{
    wx.showToast({
      title: title,
      icon: 'none',
      success :(res) =>{
        resolve(res);
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}

/**
 * promise 形式  login
 */
export const login=()=>{
  return new Promise((resolve,reject)=>{
    wx.login({
      timeout:10000,
      success: (result) => {
        resolve(result);
      },
      fail: (err) => {
        reject(err);
      }
    });
  })
}

/**
 * promise 形式的 小程序的微信支付
 * @param {object} pay 支付所必要的参数
 */
export const requestPayment=(pay)=>{
  return new Promise((resolve,reject)=>{
   wx.requestPayment({
      ...pay,
     success: (result) => {
      resolve(result)
     },
     fail: (err) => {
       reject(err);
     }
   });
     
  })
}

 

2.2页面公共配置

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/assets/icons/home.png",
        "selectedIconPath": "/assets/icons/home-o.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "/assets/icons/category.png",
        "selectedIconPath": "/assets/icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/assets/icons/cart.png",
        "selectedIconPath": "/assets/icons/cart-o.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "/assets/icons/my.png",
        "selectedIconPath": "/assets/icons/my-o.png"
      }
    ]
  },

2.3修改导航栏

"window": {
      //页面背景色
    "backgroundTextStyle": "light",
      //导航条背景色
    "navigationBarBackgroundColor": "#eb4450",
      //导航条标题文本
    "navigationBarTitleText": "黑马优购",
      //导航条标题文本颜色
    "navigationBarTextStyle": "white"
  },

2.4style中引入字体图标 比如收藏 购物车  客服 分享

@font-face {
  font-family: "iconfont"; /* Project id 2534762 */
  src: url('//at.alicdn.com/t/font_2534762_ewol53mgr0l.woff2?t=1620960703935') format('woff2'),
       url('//at.alicdn.com/t/font_2534762_ewol53mgr0l.woff?t=1620960703935') format('woff'),
       url('//at.alicdn.com/t/font_2534762_ewol53mgr0l.ttf?t=1620960703935') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-danju:before {
  content: "\e60c";
}

.icon-tuikuan:before {
  content: "\e6b1";
}

.icon-daishouhuo:before {
  content: "\e771";
}

.icon-tubiao-:before {
  content: "\e61a";
}

.icon-shoucang:before {
  content: "\e657";
}

.icon-Share:before {
  content: "\e6b8";
}

.icon-shou_cang:before {
  content: "\e614";
}

.icon-shop:before {
  content: "\e64e";
}

.icon-kefu:before {
  content: "\e601";
}

3.首页

3.1首页搜索引用自定义组件 

3.2轮播

注意：

  1 swiper标签存在默认的宽度和高度

        100% * 150px 

  2 image标签也存在默认的宽度和高度

         320px * 240px 

  3 设计图片和轮播图

        1 先看一下原图的宽高  750 * 340 

        2 让图片的高度自适应 宽度 等于100%

        3 让swiper标签的高度 变成和图片的高一样即可 

  4 图片标签

        mode属性 渲染模式

          widthFix  让图片的标签宽高 和 图片标签的内容的宽高都等比例的发生变化 

   3.2.1  

1. 使用 wepy.showToast() 弹框提示

2. 使用 swiper 组件和 swiper-item 组件渲染轮播图效果

3. 使用 navigator 组件将 images 图片包裹起来，从而点击图片实现跳转

3.3获取分类导航数据

3.4获取楼层数据

代码如下：

    wxml:

<view class="box">
  <!-- 搜索 -->
  <searchInput></searchInput>
  <!-- 搜索 -->
  <!-- 轮播图 -->
  <view class="lb">
  <!-- autoplay 是否自动切换   indiccator-dots是否显示面板指示点  circular 是否采用衔接滑动 -->
    <swiper autoplay indicator-dots circular>
      <swiper-item wx:for="{
   {swiperList}}" wx:key="goods_id">
        <navigator url="{
   {item.navigator_url}}">
          <image mode="widthFix" src="{
   {item.image_src}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 轮播图 -->
  <!-- 分类导航 -->
  <view class="home_cate">
  <!-- switchTab用于tabBar之间页面的跳转 -->
    <navigator wx:for="{
   {catesList}}" wx:key="name" url="/pages/cate/cate" open-type="switchTab">
      <image mode="widthFix" src="{
   {item.image_src}}"></image>
    </navigator>
  </view>
  <!-- 分类导航 -->
  <!-- 楼层 -->
  <view class="home_floor">
      <view class="floor_group" wx:for="{
   {floorList}}" 
        wx:for-item="item1"
        wx:for-index="index1"
        wx:key="floor_title"
      >
      <!-- 标题 -->
      <view class="floor_title">
        <image mode="widthFix" src="{
   {item1.floor_title.image_src}}"></image>
      </view>
      <!-- 内容-->
      <view class="floor_list">
          <navigator
              wx:for="{
   {item1.product_list}}"
              wx:for-item="item2"
              wx:for-index="index2"
              wx:key="name"
              url="{
   {item2.navigator_url}}"
          >
          <!--widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
              scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
           -->
            <image mode="{
   {index2 === 0?'widthFix':'scaleToFill'}}" src="{
   {item2.image_src}}"></image>
          </navigator>
      </view>
      </view>
  </view>
  <!-- 楼层 -->
</view>

wxss:

  .lb swiper{
    width: 750rpx;
    height: 340rpx;
  }
  .lb swiper image{
    width:100%;
  }
  /* 分类导航 */
  .home_cate{
    display: flex;
  }
  .home_cate navigator{
    padding: 20rpx;
    flex: 1;
  }
  .home_cate navigator image{
    width: 100%;
  }
  /* 楼层c*/
  .home_floor .floor_group .floor_title{
    padding: 10rpx 0;
  }
  .home_floor .floor_group .floor_title image{
    width:100%;
  }
  .home_floor .floor_group .floor_list{
    overflow: hidden;
  }
  .home_floor .floor_group .floor_list navigator{
    float: left;
    width: 31.75%;
    /* 后四个超链接 */
    /* &:nth-last-child(-n+4) */
   
  /* 2 3 两个超链接 */
   /* &:nth-child(2) */
   /* &:nth-child(3) */
  }
  .home_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
    /* 原图的宽高 232 *386 */
    height: 27.72711207vw;
    border-left: 10rpx solid #fff;
  }
  .home_floor .floo