慕尚花坊小程序笔记

小程序功能

我的页面

代码

页面代码

样式代码                                                                                                                                 

引入图标代码

效果图

购物车页面

代码

页面代码

样式代码                                                                                                                                      

效果图

商品列表                                                                                                

代码

页面代码

样式代码                                                                                                                                            

效果图                                                                                                                               

商品细节页面                                                                                         

代码

页面代码

样式代码                                                                                                                                            

效果图                                                                                                                             

重点

1.解构赋值
一看到赋值,你应该第一反应是给变量赋值,所以解构赋值与变量有关,所以也叫变量的解构赋值,简称解构赋值
解构赋值:ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

2.三元表达式
三元表达式，也称为条件运算符或三元运算符，是一种简洁的条件表达式，由三个操作数组成：条件、表达式1和表达式2。其基本语法是“条件? 表达式1: 表达式2”。如果条件为真，则返回表达式1的值；如果条件为假，则返回表达式2的值。
三元表达式可以在多种编程语言中使用，包括但不限于JavaScript、Python、Java和C语言。在JavaScript中，三元表达式也被称为ECMAScript条件运算符

3.通常可以将css的优先级由高到低分为6组：
第一优先级：无条件优先的属性只需要在属性后面使用**！important**。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}

4.监听事件watch/bindchange
在JavaScript中，我们可以使用addEventListener或attachEvent（在老版本的IE浏览器中）来监听事件。但是，对于watch/bindchange这样的事件，JavaScript并没有提供原生的监听方法。这是因为watch/bindchange这样的事件主要是由CSS来处理的，而不是JavaScript。
然而，如果你想在某个元素的CSS属性发生变化时得到通知，你可以使用MutationObserver接口。这个接口可以监听DOM树的变化，包括属性的变化。

5.流程（发送请求-拿到数据-渲染页面）
（1）. 用户输入URL并发送请求
用户在浏览器地址栏输入一个URL（统一资源定位符），或者点击一个链接，浏览器开始执行以下操作：
URL解析：浏览器首先解析URL，确定协议（如HTTP或HTTPS）、主机名（如www.example.com）、端口（默认为80或443）以及路径（如/path/to/page.html）。
DNS查询：浏览器通过DNS（域名系统）服务查找主机名对应的IP地址。如果缓存中有该域名的IP，直接使用；否则，发起DNS查询请求，获取IP地址。
TCP连接：浏览器根据协议（通常是TCP/IP）与服务器建立连接，通常涉及三次握手过程以确保可靠的数据传输通道。

（2）. 发送HTTP请求
建立连接后，浏览器构造并发送一个HTTP请求到服务器，请求头通常包含以下信息：
请求方法：如GET（获取资源）或POST（提交数据）。
请求URL：即之前解析出的路径。
HTTP版本：如HTTP/1.1或HTTP/2。

请求头：包括但不限于：
Host：服务器的域名或IP地址。
User-Agent：浏览器标识信息。
Accept：客户端可以接受的内容类型列表。
Accept-Language：客户端首选的语言。
Cache-Control：缓存控制指令。
If-Modified-Since 或 ETag：用于条件请求，检查资源是否已更新。
请求体（仅适用于POST等方法）：可能包含表单数据、JSON对象等提交给服务器的数据。

（3）. 服务器处理请求并返回响应
服务器接收到请求后，进行如下操作：
路由解析：根据请求URL匹配相应的服务器端路由规则，确定要执行的操作或调用的服务。
处理请求：执行相应的业务逻辑，如从数据库查询数据、调用API、生成动态页面等。
生成响应：服务器根据请求结果构建HTTP响应，包括：
状态码：如200（成功）、301（永久重定向）、404（未找到）等，表示请求的处理结果。

响应头：包括但不限于：
Content-Type：响应内容的MIME类型。
Content-Length：响应体长度。
Last-Modified 或 ETag：资源的最后修改时间或唯一标识，用于缓存验证。
Set-Cookie：服务器设置的Cookie信息。
响应体：实际返回的内容，对于HTML页面请求，通常就是HTML文档。

6. 浏览器接收响应并解析HTML
浏览器接收到服务器的HTTP响应后，开始进行以下操作：
解析响应头：根据响应头信息确定如何处理响应内容，如是否缓存、如何解码等。
解析HTML文档：浏览器的HTML解析器开始读取响应体（HTML文本），按照HTML语法结构逐行解析。
构建DOM树：解析过程中，将HTML标签转化为DOM节点，形成一棵表示文档结构的DOM树。
处理脚本标签：当解析到<script>标签时，根据其属性（如async、defer、src等）决定是否阻塞解析过程、是否异步加载外部脚本、何时执行脚本等。
处理样式表：当解析到<link rel="stylesheet">标签时，浏览器发起CSS文件请求。收到CSS文件后，解析并构建CSSOM（CSS对象模型）。
处理其他资源请求：解析HTML过程中，浏览器发现图片、字体、视频等外部资源链接，将分别发起HTTP请求获取这些资源。

7. 构建渲染树与样式计算
合并DOM与CSSOM：浏览器将DOM树与CSSOM合并，生成渲染树（Render Tree）。渲染树只包含可见节点及其计算后的样式信息，隐藏节点（如display: none）不会出现在渲染树中。
布局计算（Layout / Reflow）：根据渲染树中各节点的几何信息（如宽高、位置等），浏览器进行布局计算，确定每个元素在视口内的确切位置。
绘制（Painting）：有了布局信息，浏览器按照渲染顺序，调用GPU（图形处理器）或其他绘图手段，将各个节点绘制到屏幕上。绘制过程可能涉及多个层（Layer），如背景层、普通内容层、叠加层等，以提高渲染效率。

8. 交互与事件处理
页面初步绘制完成后，浏览器开始处理用户交互：
事件监听：浏览器注册对用户输入（如鼠标点击、键盘输入、滚动等）的事件监听器。
事件触发与冒泡：当用户产生交互行为时，触发相应的事件，事件沿着DOM树向上冒泡（除非被阻止），对应的事件处理器被执行。
DOM更新与重绘/重排：JavaScript代码可能会修改DOM结构或样式，导致需要重新计算布局（重排）和重新绘制（重绘）受影响的部分。

7. 持续通信与资源加载
随着用户浏览和交互，浏览器可能需要：
懒加载资源：对于设置了懒加载属性（如loading=lazy）的图片或IFrame，浏览器在满足条件（如滚动到可视区域附近）时才加载它们。
AJAX请求：JavaScript代码可能通过XMLHttpRequest或Fetch API发起异步请求，获取额外数据或更新页面内容。
服务端推送（Server-Sent Events或WebSocket）：浏览器可能接收来自服务器的实时数据更新，用于实现动态内容刷新。

v-for的四种使用方法分别是：
1.使用v-for循环一个简单的数组
2.使用v-for循环一个复杂的数组
3.使用v-for循环对象
4.v-for循环一个迭代的数字

wx:for定义
官方文档：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

总结

慕尚花坊微信小程序是一个集成了多种小程序开发技术的电商平台。它使用原生小程序进行搭建开发，并运用了小程序组件化、网络请求封装等技术。这些技术特点不仅提升了小程序的性能和用户体验，而且使得开发者能够更高效地构建功能模块和管理项目状态。

具体来说，慕尚花坊微信小程序涵盖了电商项目常见的功能模块，包括首页、商品分类、商品列表、商品详情、用户管理、收货地址、购物车、结算支付、订单管理等。进一步优化了用户体验。