前段综合实训总结

最新推荐文章于 2024-10-09 18:20:40 发布

lbwnb040612

最新推荐文章于 2024-10-09 18:20:40 发布

阅读量641

点赞数 21

文章标签：微信小程序

本文链接：https://blog.csdn.net/lbwnb040612/article/details/136638568

版权

本文详细介绍了慕尚花坊小程序项目的开发过程，包括项目概述、功能模块（如商品列表、支付、地图定位等）、技术栈应用（如Vue组件、Scss、微信小程序API、状态管理工具等），并展示了首页结构和关键组件的实现代码。

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

一：项目介绍
1.1：项⽬概况
[慕尚花坊] 是⼀款同城鲜花订购的⼩程序，专业提供各地鲜花速递、鲜花预定、⽹上订花、包⽉鲜花
等服务。最快3⼩时送花上⻔，保证花材新鲜和鲜花质量，可先送花后付款，专业花艺师傅精美包扎，
品质保证，⾄诚服务。
1.2：项⽬演示
[慕尚花坊] 项⽬涵盖电商项⽬常⻅功能模块，包含：
1. 项⽬⾸⻚
2. 商品分类
3. 商品列表
4. 商品详情
5. ⽤户管理
6. 收货地址
7. 购物⻋
8. 结算⽀付
9. 订单管理
10. 等……

1.3：项⽬技术栈
[慕尚花坊] 项⽬使⽤原⽣⼩程序进⾏搭建开发，项⽬涵盖⼩程序开发所有常⽤的知识点：
1. ⼩程序内置组件：采⽤⼩程序内置组件，结合 Vant 组件库实现⻚⾯结构的搭建。
2. 项⽬中使⽤了 css 拓展语⾔ Scss 绘制⻚⾯的结构。
3. ⼩程序内置 API ：交互、⽀付、⽂件上传、地图定位、⽹络请求、预览图⽚、本地存储等。
4. ⼩程序分包加载：降低⼩程序的启动时间、包的体积，提升⽤户体验度。
5. ⼩程序组件开发：将⻚⾯内的功能模块抽象成⾃定义组件，实现代码的复⽤。
6. ⽹络请求封装：request ⽅法封装、快捷⽅式封装、响应拦截器、请求拦截器。
7. ⻣架屏组件：利⽤开发者⼯具提供了⾃动⽣成⻣架屏代码的能⼒，提⾼了整体使⽤体验和⽤户满意
度。
8. UI 组件库：使⽤ Vant 组件库实现⼩程序结构的绘制。
9. LBS ：使⽤腾讯地图服务进⾏ LBS 逆地址解析，实现选择收货地址功能。
10. miniprogram-licia ：使⽤ licia 进⾏函数的防抖节流。
11. async-validator ：使⽤ async-validator 实现表单验证。
12. miniprogram-computed : 使⽤ miniprogram-computed 进⾏计算属性功能。
13. mobx-miniprogram ：使⽤ mobx-miniprogram 进⾏项⽬状态的管理。

二：创建项目

项目目录

重置 app.js 中的代码

删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。

重置 app.wxss 中的代码。
删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。
删除 components 中的⾃定义组件。
重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。
更新 utils 下 util.js 的⽂件名为 formatTime.js
1.2 ⾃定义构建 npm + 集成Sass
随着项⽬的功能越来越多、项⽬越来越复杂，⽂件⽬录也变的很繁琐，为了⽅便进⾏项⽬的开发，开发⼈员通常会对⽬录结构进⾏调整优化，在慕尚花坊项⽬中，我们就需要将⼩程序源码放到
miniprogram ⽬录下。

首页结构

<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">
<navigator url="">
<image src="../../assets/images/elder.jpg" mode="widthFix" />
</navigator>
<view>
<navigator url="">
<image src="../../assets/images/friend.jpg" mode="widthFix" />
</navigator>
</view>
</view>
</view>


<goods-list/>

</view>

</view>

首页背景

.index-container {

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

.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 8rpx;

// 选中第二张图片
view:last-child{
padding-top: 6rpx;
}
}

image {
width: 100%;
}
}
}

构建banner组件结构

在banner.json界面

{
"component": true,
"usingComponents": {}
}

轮播图界面

//banner.wxml

<view class="swiper-box">
<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 }}" mode="" />
</swiper-item>
</block>
</swiper>

<view class="indicator">
<text
wx:for="{{bannerList.length}}"
wx:key="id"
class="rectangle"></text>
</view>
</view>

//banner.scss

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

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

}

banner.js

Component({
properties:{
bannerList:{
type:Array,
value:[
'../../../assets/banner/banner-1.jpg',
'../../../assets/banner/banner-2.jpg',
'../../../assets/banner/banner-3.jpg'
]
}
}
})