【慕尚花坊】小程序 代码笔记

目录

一：⾸⻚

1.1：⾸⻚结构

1.2：⾸⻚背景图

1.3：banner组件

a：新建banner组件

b：构建banner组件结构

c：完成轮播图组件

1.4：entrance组件

1.5：完成⼴告区域 

1.6：注册goods-card和goods-list全局组件 

a：完成goods-card组件

b：完成goods-list组件 

1.7：完成⾸⻚⻚⾯ 

二：分类页面  

1.1：wxml页面代码

1.2：scss页面代码

 三：购物车页面

1.1：购物车有商品的页面布局

1.2：购物车里有商品的wxml代码

 1.3： 购物车里有商品的scss代码

1.4： 购物车里有商品的js代码

 2.1：购物车无商品的页面布局

2.2：购物车无商品的wxml页面

2.3：购物车无商品的scss页面 

四：商品详情页面

1：detail.js

2：detail.wxml

3：detail.scss

4：效果图 

五：小程序知识点

01-css单位

02-flex布局

03-元素定位

04-伪元素选择器

05-元素的浮动

06-swith语句

六：页面渲染

1：首页页面的渲染

1.1：轮播图的渲染

1.1.1：index.wxml

1.1.2：banner.wxml

1.1.3：效果图 

1.2：分类页面的渲染 

1.2.1：index.wxml

1.2.2：entrance.wxml

1.2.3： entrance.scss

1.2.4：效果图

1.3：活动区域的渲染

1.3.1：index.wxml

1.3.2：效果图（效果不明显） 

1.4： 猜你喜欢及人气推荐区域的渲染

1.4.1：index.wxml

1.4.2：goods-list.js

1.4.3：goods-list.wxml

1.4.4：效果图

七：网络封装 

1.request方法封装

1.1：request.js

1.2:test.wxml

1.3:test.scss

1.4:效果图

2.对get、post、put、delete 请求方式进行快捷封装

2.1：request.js

2.2：test.js

3：响应拦截器

3.1：http.js

3.2:效果图

---

一：⾸⻚

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：完成轮播图组件