一、app.js文件配置各项页面路径
{
"pages": [
"pages/index/index",
"pages/list/list",
"pages/hua/hua",
"pages/cart/cart",
"pages/category/category",
"pages/my/my",
"pages/detail/detail",
"pages/order/order"
],
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "幕尚花坊",
"navigationBarBackgroundColor": "#f3514f"
},
"tabBar": {
"color": "#252933",
"selectedColor": "#FF734C",
"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/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "assets/tabbar/cart.png",
"selectedIconPath": "assets/tabbar/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "assets/tabbar/my.png",
"selectedIconPath": "assets/tabbar/my-active.png"
}
二、首页轮播图和广告区域
轮播图区域：商品导航区域、活动宣传区域、猜你喜欢区域、人气推荐区域。
在实现这些功能之前，我们需要先获取数据，在获取数据以后，然后进行页面的渲染，同时完成进行功能的开发。
因为需要同时获取 5 个接口的数据，所以我们使用并发请求来实现。这样能够提升页面的渲染速度。
实现步骤：1、封装接口请求函数，可以一个个封装，也可以直接使用 `all` 方法进行封装
2. 在页面 .js 文件中导入封装的接口 `API` 函数
3. 在 `onLoad` 钩子函数中调用方法，获取首页轮播图数据
首页格式
.index-container {
position: relative;
background-color: whitesmoke;
// 首页背景图
.window-bgc {
height: 200rpx;
width: 100%;
background-color: #f3514f;
border-radius:0 0 25% 25%;
position:absolute;
}
.adver {
display: flex;
width: 96%;
margin: 0 auto;
border-radius: 18rpx;
background-color:white;
.adver-left {
width: 50%;
padding: 8rpx 8rpx 0rpx 8rpx;
}
.adver-right {
width: 50%;
padding: 8rpx 8rpx 0rpx 6rpx;
// 选中第二张图片
view:last-child {
padding-top: 6rpx;
}
}
image{
width: 100%;
}
}
}
首页页面图
商品列表
格式
副页
<!-- pages/hua/hua.wxml -->
<view class="container">
<!-- 商品大图 -->
<view class="banner-img">
<image src="../../assets/images/floor-img.jpg" mode="" />
</view>
<!-- 商品的基本信息 -->
<view class="content">
<!-- 商品价钱 -->
<view class="price">
<view class="price-num">¥299</view>
<view class="price-origin-num">¥399</view>
</view>
<!-- 商品标题 -->
<view class="title">
亲爱的/情人节网红款/19支玫瑰
</view>
<!-- 详细信息 -->
<view class="info">
亲爱的/情人节网红款/19支玫瑰亲爱的/情人节网红款/19支玫瑰亲爱的/情人节网红款/19支玫瑰
</view>
</view>
<!-- 商品的详细信息 -->
<view class="detail">
<image src="../../assets/images/floor-img.jpg" mode="" />
<image src="../../assets/images/floor-img.jpg" mode="" />
<image src="../../assets/images/floor-img.jpg" mode="" />
</view>
<!-- 商品的底部导航栏 -->
<van-goods-action>
<navigator url="/pages/index/index" open-type="switchTab">
<van-goods-action-icon icon="wap-home-o" text="首页" />
</navigator>
<van-goods-action-icon icon="chat-o" text="客服" dot />
<van-goods-action-icon icon="cart-o" text="购物车" info="5" />
<van-goods-action-icon icon="shop-o" text="店铺" />
<van-goods-action-button text="加入购物车" type="warning" bind:tap="handelSheet" />
<van-goods-action-button text="立即购买" bind:tap="handelSheet" />
</van-goods-action>
<!-- 自定义面板 -->
<!-- bind:close为面板关闭事件 -->
<van-action-sheet show="{{ show }}" bind:close="onClose">
<view class="sheet-container">
<view class="img">
<image src="../../assets/images/floor-img.jpg" mode="" />
</view>
<view class="baseInfo">
<view class="title">亲爱的/情人节网红款/19支玫瑰</view>
<view class="buy">
<view class="price">
<view class="symbol">¥</view>
<view class="num">100</view>
</view>
<view class="buyBtn">
<van-stepper value="{{ 1 }}" bind:change="onChange" />
</view>
</view>
</view>
</view>
<view class="textArea">
<view class="title">祝福语</view>
<textarea value="" placeholder="请输入你的祝福" class="box" />
</view>
<view class="btn">
<van-button type="primary" round size="large">主要按钮</van-button>
</view>
</van-action-sheet>
</view>
进行购物
三、第二副分类页面
商品分类是一个单独的 `tabBar` 页面，当点击分类 `tabBar` 的时候就能够进入商品分类页面。
在商品分类页面我们主要实现三个功能：
1. 一级分类的渲染
2. 一级分类的切换
3. 二级分类的渲染
根据接口文档封装接口 `API` 函数，然后在页面调用 `API` 函数获取分类的数据，在获取到数据以后，使用后端返回的数据对一级、二级分类进行渲染。
在项目根目录下 `api` 目录下新建 `category.js` 文件，用来管理分类页面接口请求，在该文件中导入封装的网络请求模块，根据接口文档，创建获取分类数据的 `API` 函数 `reqCategoryData`， 在 `/pages/category/category.js` 中导入封装好的获取分类数据的 `API` 函数， 页面数据需要在页面加载的时候进行调用，因此需要在 `onLoad` 钩子函数中调用 `reqCategoryData` 方法，在获取到数据以后，使用后端返回的数据对页面进行渲染。
分类页面格式
.category-container {
display: flex;
// 左侧
.category-left-view {
width: 220rpx;
background-color: white;
height: 100vh;
.left-view-item {
font-size: 26rpx;
// 文本的排列方式
text-align: center;
line-height: 99rpx;
}
.active {
color: #f3514f;
// &表示当前标签
// ::before是伪元素选择器
// 在指定元素前添加内容
&::before {
content: "";
width: 6rpx;
height: 66rpx;
background-color: #f3514f;
display: block;
position: absolute;
// 沿着Y轴平移
transform: translateY(25%);
}
}
}
// 右侧
.category-right-view {
&::before {
content: "";
width: 6rpx;
height: 100vh;
background-color: pink;
display: block;
position: absolute;
}
.right-view-item {
width: 33%;
float: left;
margin-top: 30rpx;
.navigator {
display: flex;
// 设置纵轴方向上排列
flex-direction: column;
align-items: center;
}
.goods_item_name {
font-size: 26rpx;
margin-top: 18rpx;
}
}
}
image {
width: 90rpx;
height: 90rpx;
}
}
四、购物车页面
1、购物车-封装购物车接口 API
在这一节将购物车所有的接口封装成接口 API 函数，给 `Stepper` 步进器组件，通过`value`设置输入值，同时绑定`change`事件，并将值同步到 `data` 中， 根据接口文档，导入封装的购物车的接口 API，点击弹框按钮的时候，判断点击的加入购物车还是立即购买，执行不同的操作。
页面代码
<view class="container">
<!-- 购物车列表区域 -->
<view class="carList-container" wx:if="{{ carList.length}}">
<view class="carList-container-cell" wx:for="{{ carList }}" wx:key="index">
<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
<view slot="left" class="van-swipe-cell__left">选择</view>
<van-cell-group>
<view class="goods-info">
<view class="left">
<van-checkbox value="{{ false }}" checked-color="#e60017" bind:change="onChange">
</van-checkbox>
</view>
<view class="mid">
<image src="../../assets/images/floor-img.jpg" mode="" />
</view>
<view class="right">
<view class="title">【11支红玫瑰】买花就送女友送爱人送老婆520</view>
<view class="buy">
<view class="price">¥99.99</view>
<view class="buy-btn">
<van-stepper value="{{ 1 }}" bind:change="onChange" />
</view>
</view>
</view>
</view>
</van-cell-group>
<view slot="right" class="van-swipe-cell__right">删除</view>
</van-swipe-cell>
</view>
</view>
<van-empty description="还没有商品,快去添加吧!" wx:else="">
<navigator url="">
<van-button type="danger" round>去购物</van-button>
</navigator>
<navigator url="">
<van-button type="danger" round>去登入</van-button>
</navigator>
</van-empty>
<!-- 提交订单栏区域 -->
<van-submit-bar price="{{ 3050 }}" button-text="提交订单" bind:submit="onClickButton" tip="{{ true }}">
<van-checkbox value="{{ true }}" checked-color="#e60017" bind:change="onChange">
全选
</van-checkbox>
</van-submit-bar>
</view>
格式
.container {
background-color: whitesmoke;
height: 100vh;
}
.carList-container{
.carList-container-cell {
.goods-info {
display: flex;
background-color: white;
border-radius: 16rpx;
margin: 20rpx 20rpx 10rpx 20rpx;
padding: 24rpx 16rpx;
.left{
display: flex;
align-items: center;
}
.mid {
width: 300rpx;
height: 300rpx;
image {
width: 100%;
height: 100%;
}
}
.right {
display: flex;
flex-direction: column;
height: 300rpx;
justify-content: space-between;
padding-left: 20rpx;
.title {
font-size: 26rpx;
}
.buy {
display: flex;
justify-content: space-between;
.price {
font-size: 30rpx;
color: #fa4126;
} }}
}
}}
.van-empty__bottom{
display: flex;
height: 250rpx;
flex-direction: column;
justify-content: space-between;
}
5、我的服务页面
<view class="container">
<!-- 顶部展示图 -->
<view class="top-show">
<image src="../../assets/images/banner.jpg" mode="widthFix" class="top-show-img" />
</view>
<!-- 白色背景面板 -->
<view class="bottom-show">
<!-- 未登录面板 -->
<view class="user-container">
<!-- 左边头像区域 -->
<view class="avatar-container">
<image src="../../assets/images/avatar.png" class="avatar" mode="" />
</view>
<!-- 右边文字区域 -->
<view class="no-login">
<text>未登录</text>
<text>点击授权登录</text>
</view>
</view>
<!-- 已登陆面板 -->
</view>
<!-- 订单面板 -->
<view class="order">
<!-- 订单面板标题部分 -->
<view class="order-title">
<text class="title">我的订单</text>
<text class="more">查看更多></text>
</view>
<!-- 订单面板内容部分 -->
<view class="order-content">
<view class="order-content-item" wx:for="{{orderItem}}" wx:key="index">
<!-- item指数组内的项 -->
<navigator url="/pages/order/order">
<view class="iconfont {{item.iconfont}}"></view>
<text>{{ item.title }}</text>
</navigator>
</view>
</view>
</view>
<!-- 关于售前售后服务面板 -->
<view class="after-scale">
<view class="order-title-wrap">
<text class="title">关于售前售后服务</text>
</view>
<view class="after-scale-item">
<view class="iconfont icon-kefufenxiermaikefu"></view>
<text>可与小程序客服实时聊天或电话咨询</text>
</view>
<view class="after-scale-item">
<view class="iconfont icon-shijian"></view>
<text>小程序客服工作时间为: 8:30 ~ 20:30</text>
</view>
<view class="after-scale-item">
<view class="iconfont icon-dizhiguanli"></view>
<text>鲜花制作完毕情况下暂不支持退款</text>
</view>
<view class="after-scale-item">
<view class="iconfont icon-zhangben"></view>
<text>鲜花可以提前7-15天预订重大节假日不支持定时配送</text>
</view>
</view>
<!-- 底部面板 -->
<view class="info-footer"> 智谷星图技术支持 </view>
</view>
页面展示
页面格式
.container {
background-color: whitesmoke;
height: 100vh;
.top-show {
width: 100%;
height: 360rpx;
.top-show-img {
width: 100%;
height: 100%;
}
}
.bottom-show {
position: relative;
top:-100rpx;
border-radius: 20rpx;
margin: 0 auto;
width: 96%;
background-color: white;
.user-container {
display: flex;
align-items: center;
.avatar-container{
margin: 20rpx;
.avatar {
height: 120rpx;
width: 120rpx;
}
}
.no-login {
display: flex;
flex-direction: column;
font-size: 24rpx;
color: gray;
text:first-child {
font-size: 28rpx;
}
}
}
}
.order {
border-radius: 20rpx;
margin: 0 auto;
width: 96%;
background-color:white;
margin-top: -80rpx;
.order-title {
display: flex;
// justify-content: 设置主轴上的排列方式;
justify-content: space-between;
padding: 40rpx;
.more {
font-size: 30rpx;
color: #ccc;
}
}
.order-content {
display: flex;
justify-content: space-evenly;
text-align: center;
padding-bottom: 24rpx;
.iconfont {
font-size: 60rpx;
}
text {
font-size: 26rpx;
}
}
}
.after-scale {
border-radius: 20rpx;
margin: 0 auto;
width: 96%;
background-color:white;
margin: 20rpx;
padding-bottom: 25rpx;
.order-title-wrap {
padding: 20rpx 0 0 20rpx;
}
.after-scale-item {
display: flex;
margin: 30rpx 25rpx;
text {
font-size: 25rpx;
color: #999;
margin-left: 20rpx;
}
.iconfont {
color: #a2b364;
}
}
}
.info-footer {
text-align: center;
font-size: 24rpx;
color: #999;
margin-top: 30rpx;
}}
六、慕尚花坊小程序介绍
1、项目涵盖电商项目常见功能模块，包含：项目首页、商品分类、商品列表、商品详情、 用户管理收货地址、 购物车、 结算支付、订单管理。
2、项目使用原生小程序进行搭建开发
小程序内置组件：采用小程序内置组件 结合 `Vant` 组件库实现页面结构的搭建。
项目中使用了 css 拓展语言 Scss 绘制页面的结构。
小程序内置`API`：交互、支付、文件上传、地图定位、网络请求、预览图片、本地存储等
小程序分包加载：降低小程序的启动时间、包的体积，提升用户体验度。
小程序组件开发：将页面内的功能模块抽象成自定义组件，实现代码的复用。
网络请求封装：request 方法封装、快捷方式封装、响应拦截器、请求拦截器。
骨架屏`组件：利用开发者工具提供了自动生成骨架屏代码的能力，提高了整体使用体验和用户满意度。
`UI` 组件库：使用 `Vant` 组件库实现小程序 结构的绘制。
`LBS`：使用腾讯地图服务进行 `LBS`逆地址解析，实现选择收货地址功能。
扫一扫
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
