前端综合实训

Ⅰ.项目介绍

1.1项目概述

慕尚花坊是⼀款同城鲜花订购 的小程序，项目常用功能模块分为项目首页、商品分类、商品列表、商品详情、用户管理、收货地址、购物车、结算支付和订单管理等等。

1.2项目技术栈

小程序内置组件：采用小程序内置组件，结合 Vant 组件库实现⻚⾯结构的搭建。

项⽬中使⽤了 css 拓展语言 Scss 绘制页面的结构。

小程序内置API：交互、支付、文件上传、地图定位、网络请求、预览图片、本地存储等。

小程序分包加载：降低⼩程序的启动时间、包的体积，提升⽤户体验度。

小程序组件开发：将页面内的功能模块抽象成⾃定义组件，实现代码的复⽤。

网络请求封装：request 方法封装、快捷⽅式封装、响应拦截器、请求拦截器。

骨架屏组件：利⽤开发者⼯具提供了⾃动⽣成⻣架屏代码的能力，提⾼了整体使用体验和用户满意 度。

UI 组件库：使用 Vant 组件库实现小程序 结构的绘制。 

LBS ：使⽤腾讯地图服务进行 LBS逆地址解析，实现选择收货地址功能。

miniprogram-licia ：使用 licia 进行函数的防抖节流。

async-validator ：使用async-validator 实现表单验证。

miniprogram-***puted : 使用 miniprogram-***puted 进行计算属性功能。

mobx-miniprogram ：使用 mobx-miniprogram 进行项目状态的管理。

Ⅱ.项目初始化

1.1项目创建

1.2项目目录

1.3自定义构建

⾸先在project.config.json 配置 miniprogramRoot 选项，指定⼩程序源码的⽬录。

然后配置 project.config.json 的 setting.packNpmManually 为 true。

初始化项目，在内建终端打开

packageJsonPath 表示 node_modules 源对应的 package.json 

miniprogramNpmDistDir 表示 node_modules 的构建结果⽬标位置

安装 vant ，然后进⾏ npm 构建，测试是否能够正常 vant 构建成功。

1.4 scss集成

在 project.config.json ⽂件中，修改 setting 下的 use***pilerPlugins 字段为 scss，即可开 启⼯具内置的 scss 编译插件。

Ⅲ.构建项目界面

1.1项目整体框架

assets⽂件导⼊ 配置app.json⽂件

{
  "pages": [
    "pages/category/category",
    "pages/index/index",
    
    "pages/cart/cart",
    "pages/my/my"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "幕尚花坊",
    "navigationBarBackgroundColor": "#FF734C"
  },
  "tabBar": {
    "color": "#252933",
    "selectedColor": "#FF734C",
    "backgroundColor": "#ffffff",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tabbar/index.png",
        "selectedIconPath": "assets/tabbar/index-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "assets/tabbar/cate.png",
        "selectedIconPath": "assets/tabbar/cart-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "assets/tabbar/cart.png",
        "selectedIconPath": "assets/tabbar/cate-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "assets/tabbar/index.png",
        "selectedIconPath": "assets/tabbar/my-active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "required***ponents",
  "using***ponents": {
    "van-button": "@vant/weapp/button/index",
    "van-card": "@vant/weapp/card/index",
    "van-submit-bar": "@vant/weapp/submit-bar/index"
  }
}

1.2样式图

Ⅳ.首页

1.1首页结构

在index.wxml构建首页结构

<view class="index-container">

  <!-- 首页背景图 -->
  <view class="window-bgc"></view>

  <!-- 页面主体部分 -->
  <view class="container">
    <!-- 轮播图区域 -->
    <banner />


    <!-- 导航区域 -->
    <entrance />
    <!-- 广告区域 -->
    <view class="adver">
      <view class="adver-left">
      <navigator url="">
        <image src="../../assets/images/love.jpg" mode="widthFix" />
      </navigator>
    </view>
    <view class="adver-right">
    <view>
    <navigator url="">
      <image src="../../assets/images/elder.jpg" mode="widthFix" />
    </navigator>
  </view>
  <view>
    <navigator url="">
      <image src="../../assets/images/friend.jpg" mode="widthFix" />
    </navigator>
  </view>
</view>
</view>

<!-- 商品列表 -->
<goods-list title="人气推荐"/>
<goods-list title="猜我喜欢"/>
<goods-card/>
</view>



</view>

1.1.1navigator

navigator是一个全局对象，它提供了与浏览器相关的信息和操作接口。在前端开发中，我们通常会使用 navigator 对象来获取用户浏览器的相关信息。
navigator 对象的常见属性和方法包括：
navigator.userAgent: 返回当前浏览器的用户代理字符串。
navigator.appName: 返回当前浏览器的名称。
navigator.appVersion: 返回当前浏览器的版本号。
navigator.language: 返回当前浏览器的语言设置。
navigator.platform: 返回当前浏览器所在设备的操作系统平台。
navigator.geolocation: 提供了一组 API，用于获取当前设备的地理位置信息。
navigator.mediaDevices: 提供了一组 API，用于访问当前设备的音频、视频、屏幕等媒体设备。
navigator.serviceWorker: 提供了一组 API，用于在浏览器中注册和管理 Service Worker，实现离线缓存和推送通知等功能

1.2首页背景图

在index.sass中构建首页样式

.index-container{

  //首页背景图
.window-bgc{
  height: 200rpx;
  position:absolute;
  width:100%;
  background-color: #f3514f;
  border-radius:0rpx 0rpx 40% 40%;
}

.adver {
  display: flex;
  margin:0 auto;
  width: 96%;
  padding: 18rpx;
  box-sizing: border-box;
  background-color:rgb(177, 54, 54);
  border-radius: 18rpx;

  .adver-left{
    width: 50%;
    padding: 8rpx 8rpx 0rpx 8rpx;
  }
  .adver-right{
    width: 50%;
    padding: 8rpx 8rpx 0rpx 6rpx;

    view:laat-child{
      padding-top: 10rpx;
    }
  }

  image{
    width: 100%;
  }
}


}

1.2.1 flex布局

            flex-direction属性

             flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向。 */

             row:默认值，主轴为从左到右的水平方向。

               row-reverse:主轴为从右到左的水平方向。

               column:主轴为从上到下的垂直方向。

               column-reverse:主轴为从下到上的垂直方向。 

            justify-content属性

               justify-content属性用于设置项目在主轴方向上的对齐方式。能够分配项目之间及其周围多余的空间。 

               flex-start:默认值，表示项目对齐到主轴起点，项目间不留空隙。

               flex-end:项目对齐到主轴终点，项目间不留空隙。

               center:项目在主轴上居中排列，项目间不留空隙。

               主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。

               space-between:两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等                  space-around:每个项目之间的距离相等   

               第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。 

             align-items属性align-items属性用于设置项目在交叉轴上的对齐方式。

            center:项目在交叉轴的中间位置对齐。

               flex-start:项目顶部与交叉轴起点对齐,flex-end:项目底部与交叉轴终点对齐。

               baseline:项目的第一行文字的基线对齐。

1.3 banner组件

1.3.1构建banner组件结构

banner.js

Properties

(1)Properties类是专门用于读写配置文件的集合类

(2)配置文件的后缀名为.properties

(3)Properties类的方法可查找api文件

banner.json

1.4轮播图组件

在banner.wxml中通过swiper组件建立一个自动轮播列表

使用wx:for循环遍历bannerList数组

bannerList.length为数组长度

<view class="swiperbox">
 <swiper autoplay class="swiper" indicator-active-color="#FF734C" interval="2000" duration="1000" indicator-color="rgba(0,0,0,3)">
 <block wx:for="{{ bannerList }}" wx:key="index">
 <swiper-item class="swiper-item">
   <image class="img" src="{{item}}"></image>
 </swiper-item>
   
 </block>
   
 </swiper>
 <view class="indicator">
 <text wx:for="{{bannerList.length}}" wx:key="id"
 class="rectangle"></text>
 </view>


</view>

设置swiperbox样式 

.swiperbox{
  position: relative;
  .swiper{
    height: 320rpx;
    //设置圆角弧度
    border-radius: 18rpx;
    //设置溢出隐藏
    overflow: hidden;
    width: 95%;
    //margin设置外边距
    margin: 0 auto;
  }
  .swiper-item{
    .img{
      width: 100%;
      height: 100%;
      border-radius: 18rpx;
    }
  }

  .indicator{
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 16rpx;
    left: 0rpx;
    right: 0rpx;
    .rectangle{
      width: 30rpx;
      height: 6rpx;
      background-color: #f3514f;
      margin: 0 8rpx;
      border-radius: 6rpx;
    }
  }
}

样式图

1.5entrance导航组件

在entrance.wxml中渲染一个导航列表

<view class="nav-list">

<view wx:for="{{10}}" wx:key="index" class="nav-item">
<navigator url="" class="navigator-nav">
<image src="../../../assets/images/cate-1.png" mode="" class="nav-img"/>
<text class="nav-text">鲜花玫瑰</text>

</navigator>

</view>

</view>

导航分类样式

.nav-list {
  //设置弹性布局
  display: flex;
  //设置换行
  flex-wrap: wrap;
  margin: 20rpx;
  border-radius: 18rpx;
  padding: 10px 0px 10px 10px;
  background-color: white;
}

.nav-item {
  .navigator-nav {
    //更改主轴方向
    //由默认的横向排列更改为纵向排列
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-top: 10px;

    .nav-text {
      margin-top: 4px;
      font-size: 12px;
    }

    .nav-img {
      width: 66rpx;
      height: 66rpx;
    }
  }
}

1.6完成广告区域

广告区域结构

   <!-- 广告区域 -->
    <view class="adver">
      <view class="adver-left">
      <navigator url="">
        <image src="../../assets/images/love.jpg" mode="widthFix" />
      </navigator>
    </view>
    <view class="adver-right">
    <view>
    <navigator url="">
      <image src="../../assets/images/elder.jpg" mode="widthFix" />
    </navigator>
  </view>
  <view>
    <navigator url="">
      <image src="../../assets/images/friend.jpg" mode="widthFix" />
    </navigator>
  </view>
</view>
</view>

广告区域样式

.adver {
  display: flex;
  margin:0 auto;
  width: 96%;
  padding: 18rpx;
  box-sizing: border-box;
  background-color:rgb(177, 54, 54);
  border-radius: 18rpx;

  .adver-left{
    width: 50%;
    padding: 8rpx 8rpx 0rpx 8rpx;
  }
  .adver-right{
    width: 50%;
    padding: 8rpx 8rpx 0rpx 6rpx;

    view:laat-child{
      padding-top: 10rpx;
    }
  }

样式图：

1.7注册goods-card和goods-list全局组件

在index.wxml设置两个标题

1.7.1完成goods-card组件

在goods-card.wxml中构建结构

<view class="goods_cart_container">
  <navigator url="" class="navigator-nav">
    <image src="../../assets/images/floor.jpg" mode="widthFix" class="good_img" />
    <!-- 详细信息-->
    <view class="goods_item_info">
      <!-- 商品名称-->
      <text class="goods_item_info_name">亲爱的/情人节网红款/19枝</text>
      <!-- 商品描述-->
      <text class="goods_item_info_promo">情人节新品情人节新品情人节新品</text>
      <!-- 商品价钱-->
      <view class="goods_item_info_bottom">
        <!-- 优惠价钱 -->
        <view class="goods_item_info_price">
          <text class="text">$</text>99
        </view>
        <!-- 原价 -->
        <view class="goods_item_info_origin_price">
          <text class="text">$</text>199
        </view>
        <!-- 购物车 -->
        <view class="goods_item_info_btn">
          <image class="goods_image" src="../../assets/images/buybtn.png" mode="" />
        </view>
      </view>

    </view>
  </navigator>
</view>

在goods-card.scss中构建样式

.goods_cart_container{
  width: 350rpx;
  margin-top: 18rpx;
  background: #fff;
  border-radius: 18rpx;
}

.good_img{
  width: 100%;
  max-height: 360rpx;
  border-top-left-radius: 18rpx;
  border-top-right-radius: 18rpx ;
  
}

.goods_item_info{
  //设置弹性布局
  display: flex;
  //更改主轴方向为纵轴
  flex-direction: column;
  padding: 10rpx 20rpx;
}

.goods_item_info .goods_item_info_name{
  //设置字体粗细
  font-weight: 600;
  font-size: 30rpx;
  line-height: 20px;
  //溢出隐藏
  overflow: hidden;
  //超过一行就算溢出
  white-space: nowrap;
  //溢出之后的文本为省略号
  text-overflow: ellipsis;
}

.goods_item_info .goods_item_info_promo{
  padding-top: 20rpx;
  padding-bottom: 3px;
  font-size: 12px;
  color: #71797f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods_item_info_bottom{
  //弹性布局 在同一行显示
  display: flex;
  line-height: 50rpx;
  margin-top: 20rpx;
}

.goods_item_info_bottom .goods_image{
  width: 48rpx;
  height: 48rpx;
}

.goods_item_info_price{
  font-size: 30rpx;
  font-weight: bold;
  color: #f3514f;
}

.goods_item_info_price .text{
  font-size: 24rpx;
  padding-right: 4rpx;
  font-weight: normal;
}
.goods_item_info_origin_price{
  //设置flex为1 则该元素拥有所有剩余部分
  flex:1;
  font-size: 20rpx;
  color: #71797f;
  text-decoration-line:line-through;
  margin-left: 6%;
  margin-top: 4rpx;
}

.goods_item_info_origin_price .text{
  font-size: 20rpx;
}

1.7.2完成goods-list组件

在goods-list.wxml中构建结构

<!-- 商品列表组件-->
<view class="goods_container">
  <!-- 标题-->
  <view class="goods_title">{{ title }}</view>

  <!-- 列表区域-->
  <view class="goods_card_list">
  <block wx:for="{{ 3 }}" wx:key="index">
    <goods-card />
  </block>
</view>
</view>

<!-- 查看更多-->
<view class="goods_more">
  <navigator url="" class="goods_more_btn">查看更多</navigator>
</view>

在goods-list.scss中构建样式

.goods_title{
  //设置文本居中
  text-align: center;
  font-size: 40rpx;
  line-height: 52rpx;
  font-weight: bold;
  color: #232628;
  padding: 20rpx 0 0rpx 0rpx;
}

.goods_card_list{
  display: flex;
  //设置换行
  flex-wrap: wrap;
  //设置元素在主轴上的排列方式
  justify-content: space-between;
}

.goods_card_list::after{
  content:'' ;
  width: 350rpx;
}

.goods_more{
  margin: 10rpx 0;
}

.goods_more_btn{
  width: 95%;
  display: block;
  margin: 0 auto;
  background: rgb(233, 94, 94);
  margin: 0 auto;
  border-radius: 20rpx;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: rgba(35,38,40,0.7);
}

样式图

Ⅴ.分类

1.1分类结构

<view>
  <view class="category-container">
    <scroll-view class="category-left-view" scroll-y>
      <view class="left-view-item active">爱礼精选</view>
      <view class="left-view-item ">鲜花玫瑰</view>
      <view class="left-view-item ">永生玫瑰</view>
      <view class="left-view-item ">玫瑰珠宝</view>
    </scroll-view>
    <scroll-view class="category-right-view" scroll-y>
      <view class="test">
        <view wx:for="{{ 10 }}" wx:key="index" class="right-view-item">
          <navigator class="navigator" url="">
            <image class="" src="../../assets/images/cate-1.png" mode="" />
            <text class="goods_item_name">真情告白</text>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

1.2分类样式

.category-container {
  display: flex;

  .category-left-view {
    width: 220rpx;
    height: 100vh;
    background: #fff !important;

    .left-view-item {
      line-height: 99rpx;
      //文本排列方式
      text-align: center;
      font-size: 26rpx;
    }

    .active {
      background-color: #ffffff;
      position: relative;
      color: #f3514f;


      //&表示当前标签
      //：：before是伪元素选择器
      //在指定元素的添加内容
      &::before {
        content: '';
        display: block;
        width: 6rpx;
        height: 66rpx;
        background-color: #f3514f;
        position: absolute;
        left: 0;
        top: 50%;
        //沿着y轴平移
        transform: translateY(-50%);
      }
    }
  }
}

.category-right-view{
  width: 100%;
  height: 100vh;
  flex-wrap: wrap;
  background: #fff !important;
  margin-left: 8rpx;

  .right-view-item{
    width: 33%;
    float: left;
    margin-top: 30rpx;

    .navigator{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    image{
      width: 90rpx;
      height: 90rpx;
    }
    text{
      font-size: 26rpx;
      margin-top: 18rpx;
    }
    &::before{
      content: '';
      display: block;
      width: 6rpx;
      height: 100vh;
      background-color: rgb(177, 174, 174);
      position: absolute;
      left: 0;
      top: 0%;
      transform: translateY();
    }
  }
}

1.2.1伪元素选择器

 所谓“伪元素” 就是在dom结构本来是不存在的 但是通过css创建出来的元素

        ::before   ::after

        用于向指定元素的前面或者后面加入特定的内容

样式图