【慕尚花坊】小程序 代码笔记
一：项目介绍
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 进⾏项⽬状态的管理。二：项目初始化
1.1：创建项目与项目初始化
a：创建项目
在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。 然后在右侧点击 [+] 开始新建项⽬。 最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可。
b：项⽬初始化
（1）重置 app.js 中的代码。
（2）
删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。
（3）删除 app.wxss 中的代码。
（4）删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。
（5）删除 components 中的⾃定义组件。
（6）重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。
（7）更新 utils 下 util.js 的⽂件名为 formatTime.js。
1.2：⾃定义构建 npm + 集成Sass
随着项⽬的功能越来越多、项⽬越来越复杂，⽂件⽬录也变的很繁琐，为了⽅便进⾏项⽬的开发，开发 ⼈员通常会对⽬录结构进⾏调整优化，在慕尚花坊项⽬中， 我们就需要将⼩程序源码放到 miniprogram ⽬录下 。
a：⾃定义构建
（1）⾸先在project.config.json 配置 miniprogramRoot 选项，指定⼩程序源码的⽬录。
（2）然后配置 project.config.json 的 setting.packNpmManually 为 true。
（3）初始化项⽬。
（4）终端中输入
npm init -y
（5）最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和
miniprogramNpmDistDir 的位置。
（6）安装 vant ，然后进⾏ npm 构建 ，测试是否能够正常 vant 构建成功。
输入 npm i @vant/weapp
（7）“⼯具”-“构建npm”。
b：集成 Sass
（1）在 project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开 启⼯具内置的 sass 编译插件。
（2）更改wxss后缀名为sass
三：构建项⽬⻚⾯
a：assets⽂件导⼊
b：配置app.json⽂件
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/cart/cart",
"pages/my/my"
],
"window": {
"navigationBarTitleText": "慕尚花坊",
"navigationBarBackgroundColor": "#f3514f",
"navigationBarTextStyle": "white"
},
"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/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"
}
]
},
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents",
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-card": "@vant/weapp/card/index",
"van-submit-bar": "@vant/weapp/submit-bar/index"
}
}
四：⾸⻚
1.1：⾸⻚结构
1.2：⾸⻚背景图
.index-container {
// 首页背景图
.window-bgc {
height: 200rpx;
position: absolute;
width: 100%;
background-color: #f3514f;
border-radius: 0rpx 0rpx 25% 25%;
}
1.3：banner组件
a：新建banner组件
b：构建banner组件结构
c：完成轮播图组件
