黑马优购项目讲解

最新推荐文章于 2022-10-27 04:16:27 发布

PicriL@Shmily

最新推荐文章于 2022-10-27 04:16:27 发布

阅读量1.2k

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/ikun__/article/details/116944553

版权

本文详细讲解了一个微信小程序项目——黑马优购的实现过程，涵盖了项目搭建、初始化、各个页面如首页、分类、商品详情、购物车、订单支付等的实现细节，以及搜索、登录、反馈、收藏和授权等功能。通过这个项目，读者可以深入理解微信小程序的开发流程和技术要点。

摘要由CSDN通过智能技术生成

文章目录

项目搭建
初始化项目
首页
商品分类
商品列表
商品详情
购物车页面
订单支付
搜索
登录页面
意见反馈
收藏页面
授权页面
我的页面

帮助⽂档

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

使用 wepy.showToast() 弹框提示
使用 swiper 组件和 swiper-item 组件渲染轮播图效果
使用 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 .floor_group .floor_list navigator:nth-child(2),
  .home_floor .floor_group .floor_list navigator:nth-child(3) {
    border-bottom: 10rpx solid #fff;
  }
  .home_floor .floor_group .floor_list navigator