前端开发技术文章列表

文章列表

一文搞懂css中常用的单位：何时使用 rem、em、px

前端
17173 阅读

CSS 不仅仅是一个样式工具。它还决定了网页在浏览器中的呈现方式。优化良好的 CSS 意味着更快的加载时间和更流畅的用户体验。在当今的数字环境中，网站的性能是其成功的关键因素。编写高效的CSS代码可以极大地影响网页的加载速度，影响从用户体验到搜索引擎排名的方方面面。本指南深入探讨了有效的策略，以帮助您完善CSS，确保您的网站不仅看起来很棒，而且加载速度快，运行流畅。CSS 如何影响 Web 性能当用户访问网页时，浏览器会检索网站的结构 HTML 及其样式 CSS。这是一组关于网页每个部分应该如何外观的详细说明。如果CSS包含太多信息或过于复杂，就像给浏览器一个需要更长的时间才能解决的难题。这可能会导致用户等待时间更长，这可能很烦人。这就是简化 CSS 的艺术发挥作用的地方。这不仅仅是整理代码，还要确保浏览器可以更快地准备好网页。当 CSS 变得更精简、更简单时，就像给浏览器一个清晰、易于理解的地图。这使得网页加载速度更快，使一切感觉更灵敏。1. 编写更短的 CSS在编写 CSS 时，使用流行的软件开发原则 Don't Repeat Yourself （DRY）。这提倡代码的简洁明了。这很重要，因为在实践中，CSS 涉及跨各种选择器的重复属性。目标应该是识别和巩固这些重复属性。通过这样做，您可以消除冗余，从而实现更干净、更易于管理的 CSS。例如，在下面的代码中，多个元素（和）共享相同的字体大小和颜色。h1h2h1 {    font-size: 20px;    color: #fff;}h2 {    font-size: 20px;    color: #fff;}CSS 代码因此，您可以将它们分组到一个公共类下，而不是为每个选择器单独声明这些属性。这不仅简化了样式表，而且使未来的更新更容易，更不容易出错。您可以将上面的代码重写为如下所示：h1, h2 {    font-size: 20px;    color: #fff;}CSS 代码使用速记属性是最小化 CSS 大小的另一种有效策略，使代码更有效率。它还允许您使用单个声明设置多个相关的 CSS 属性。以下是编写有效速记 CSS 的方法：当元素的所有边都具有相同的值时，请使用该值。/* Before shorthand */.same-sides {    padding-top: 15px;    padding-right: 15px;    padding-bottom: 15px;    padding-left: 15px;}/* After shorthand */.same-sides {    padding: 15px;}CSS 代码当元素的所有边都具有不同的值时，请使用所有四个值。/* Before shorthand */.different-sides {    padding-top: 10px;    padding-right: 20px;    padding-bottom: 15px;    padding-left: 25px;}/* After shorthand */.different-sides {    padding: 10px 20px 15px 25px;}CSS 代码当 top/bottom 和 right/left 具有相同的值时，请使用两个值。/* Before shorthand */.two-sides {    padding-top: 10px;    padding-right: 20px;    padding-bottom: 10px;    padding-left: 20px;}/* After shorthand */.two-sides {    padding: 10px 20px;}CSS 代码如果只有右/左值相同，但顶部和底部不相同，请使用三个值。/* Before shorthand */.three-sides {    padding-top: 10px;    padding-right: 20px;    padding-bottom: 15px;    padding-left: 20px;}/* After shorthand */.three-sides {    padding: 10px 20px 15px;}CSS 代码2. 使用浅层 CSS 选择器浅层 CSS 选择器是直接而简洁的选择器，具有较少级别的嵌套元素，不会太深入地挖掘 HTML 结构。简化选择器可以显著加快网页呈现速度，因为深度嵌套的选择器需要更长的时间供浏览器评估，从而导致页面呈现速度变慢。考虑以下代码中的示例：将属性值分配给深度嵌套的选择器（如）很麻烦，并且会导致渲染延迟，因为浏览器需要时间来检查每个级别（然后是 header，然后是 nav，然后是 ul 等）以找到正确的 <a> 标签来设置样式）。header nav ul li a或者，给它一个直接的类是直接的，浏览器可以更快地解释。类选择器通常比嵌套标签更有效，因为浏览器只是查找带有类的元素并应用样式，而不必担心它们在 DOM 树中的位置。.nav-link/* Less efficient: Deeply nested selector */header nav ul li a {    color: #000;   font-size: 10px; }/* More efficient: Class selector */.nav-link {   color: #000;   font-size: 10px;}CSS 代码3. 段CSS代码将您的 CSS 代码分割成更小、更集中的片段，例如为不同的网站组件提供单独的文件并创建特定于页面的样式，可以大大提高您网站的性能。这种方法不仅可以更轻松地查找和编辑特定样式，还可以确保网页只加载所需的 CSS，避免不必要的批量。增强的可维护性和更快的页面加载是最明显的关键优势。较小的 CSS 文件更易于管理，就像一个组织良好的工具箱，其中所有内容都很容易找到。而且，通过只为每个页面加载必要的CSS，浏览器可以减少工作量，从而改善用户体验。原始 CSS假设您有一个 CSS 文件，其中包含您网站各个部分的样式：/* Styles for the home page */.homepage {    background-color: #f0f0f0;    padding: 10px;}/* Styles for the services page */.services {    background-color: #333;    color: white;}/* Styles for the contact page */.contact {    background-color: #222;    color: white;    padding: 20px;}CSS 代码分段 CSS现在，让我们根据其用途将此 CSS 分割成不同的文件：主页样式（主页.css）：.homepage {    background-color: #f0f0f0;    padding: 10px;}CSS 代码2. Services page Styles (services.css):.services {    background-color: #333;    color: white;}CSS code3. 联系页面样式（contact.css）：.contact {    background-color: #222;    color: white;    padding: 20px;}CSS 代码每个 CSS 文件都集中在网站的特定部分。现在，当用户访问您的网站时，每个页面仅加载所需的 CSS，从而提高网站的性能。4. 优化 CSS 交付您可以通过缩小 CSS 来使 CSS 文件更轻、加载速度更快——也就是说，您可以删除多余的空格和行（这称为缩小）。然后，您可以压缩这些文件，以便用户下载它们更小、更快捷。此外，请确保首先加载您网站最重要的样式，以便人们更快地看到您的页面。其他样式可以在后台加载而不会减慢速度。您还可以通过在浏览器中保存一些 CSS（这称为缓存）来使访问次数多次的人更快地访问您的网站。这意味着他们不必在每次访问时再次加载。此外，如果您使用 CDN 或服务器网络，无论您的用户身在何处，您的 CSS 文件都可以存储在世界各地的许多地方，以便更快地加载。缩小CSS比较 167KB 的未缩小 CSS 文件和 92KB 的缩小 CSS 文件之间文件大小的图形原始 CSS/* Main Stylesheet *//* Header Style */header {  background-color: #333;  color: white;  padding: 10px;}/* Navigation Style */nav {  background-color: #444;  margin-top: 10px;}CSS 代码上面的CSS代码是可读的，并且有很好的注释，但它包含额外的空格和注释，增加了文件大小。缩小的 CSSheader{background-color:#333;color:white;padding:10px}nav{background-color:#444;margin-top:10px;}CSS 代码缩小版将所有规则合并为一行，删除了不必要的空格和注释，从而减小了文件大小以加快加载速度。结论优化您的 CSS 可以加快您的网站速度，从而改善整体用户体验。通过实现本文中概述的实践，您可以实现性能更高、效率更高且可维护的 CSS。调整几行代码可能带来的性能节省并不显著，但在不同的样式表中，在数百行中，影响将开始显现。请记住，Web 性能是一个持续的过程。定期审查和完善您的 CSS，以跟上最佳实践和新兴趋势。

web前端优化之css优化篇：加快网页访问速度

前端
27865 阅读

CSS 不仅仅是一个样式工具。它还决定了网页在浏览器中的呈现方式。优化良好的 CSS 意味着更快的加载时间和更流畅的用户体验。在当今的数字环境中，网站的性能是其成功的关键因素。编写高效的CSS代码可以极大地影响网页的加载速度，影响从用户体验到搜索引擎排名的方方面面。本指南深入探讨了有效的策略，以帮助您完善CSS，确保您的网站不仅看起来很棒，而且加载速度快，运行流畅。CSS 如何影响 Web 性能当用户访问网页时，浏览器会检索网站的结构 HTML 及其样式 CSS。这是一组关于网页每个部分应该如何外观的详细说明。如果CSS包含太多信息或过于复杂，就像给浏览器一个需要更长的时间才能解决的难题。这可能会导致用户等待时间更长，这可能很烦人。这就是简化 CSS 的艺术发挥作用的地方。这不仅仅是整理代码，还要确保浏览器可以更快地准备好网页。当 CSS 变得更精简、更简单时，就像给浏览器一个清晰、易于理解的地图。这使得网页加载速度更快，使一切感觉更灵敏。1. 编写更短的 CSS在编写 CSS 时，使用流行的软件开发原则 Don't Repeat Yourself （DRY）。这提倡代码的简洁明了。这很重要，因为在实践中，CSS 涉及跨各种选择器的重复属性。目标应该是识别和巩固这些重复属性。通过这样做，您可以消除冗余，从而实现更干净、更易于管理的 CSS。例如，在下面的代码中，多个元素（和）共享相同的字体大小和颜色。h1h2h1 {    font-size: 20px;    color: #fff;}h2 {    font-size: 20px;    color: #fff;}CSS 代码因此，您可以将它们分组到一个公共类下，而不是为每个选择器单独声明这些属性。这不仅简化了样式表，而且使未来的更新更容易，更不容易出错。您可以将上面的代码重写为如下所示：h1, h2 {    font-size: 20px;    color: #fff;}CSS 代码使用速记属性是最小化 CSS 大小的另一种有效策略，使代码更有效率。它还允许您使用单个声明设置多个相关的 CSS 属性。以下是编写有效速记 CSS 的方法：当元素的所有边都具有相同的值时，请使用该值。/* Before shorthand */.same-sides {    padding-top: 15px;    padding-right: 15px;    padding-bottom: 15px;    padding-left: 15px;}/* After shorthand */.same-sides {    padding: 15px;}CSS 代码当元素的所有边都具有不同的值时，请使用所有四个值。/* Before shorthand */.different-sides {    padding-top: 10px;    padding-right: 20px;    padding-bottom: 15px;    padding-left: 25px;}/* After shorthand */.different-sides {    padding: 10px 20px 15px 25px;}CSS 代码当 top/bottom 和 right/left 具有相同的值时，请使用两个值。/* Before shorthand */.two-sides {    padding-top: 10px;    padding-right: 20px;    padding-bottom: 10px;    padding-left: 20px;}/* After shorthand */.two-sides {    padding: 10px 20px;}CSS 代码如果只有右/左值相同，但顶部和底部不相同，请使用三个值。/* Before shorthand */.three-sides {    padding-top: 10px;    padding-right: 20px;    padding-bottom: 15px;    padding-left: 20px;}/* After shorthand */.three-sides {    padding: 10px 20px 15px;}CSS 代码2. 使用浅层 CSS 选择器浅层 CSS 选择器是直接而简洁的选择器，具有较少级别的嵌套元素，不会太深入地挖掘 HTML 结构。简化选择器可以显著加快网页呈现速度，因为深度嵌套的选择器需要更长的时间供浏览器评估，从而导致页面呈现速度变慢。考虑以下代码中的示例：将属性值分配给深度嵌套的选择器（如）很麻烦，并且会导致渲染延迟，因为浏览器需要时间来检查每个级别（然后是 header，然后是 nav，然后是 ul 等）以找到正确的 <a> 标签来设置样式）。header nav ul li a或者，给它一个直接的类是直接的，浏览器可以更快地解释。类选择器通常比嵌套标签更有效，因为浏览器只是查找带有类的元素并应用样式，而不必担心它们在 DOM 树中的位置。.nav-link/* Less efficient: Deeply nested selector */header nav ul li a {   color: #000;   font-size: 10px; }/* More efficient: Class selector */.nav-link {   color: #000;   font-size: 10px;}CSS 代码3. 段CSS代码将您的 CSS 代码分割成更小、更集中的片段，例如为不同的网站组件提供单独的文件并创建特定于页面的样式，可以大大提高您网站的性能。这种方法不仅可以更轻松地查找和编辑特定样式，还可以确保网页只加载所需的 CSS，避免不必要的批量。增强的可维护性和更快的页面加载是最明显的关键优势。较小的 CSS 文件更易于管理，就像一个组织良好的工具箱，其中所有内容都很容易找到。而且，通过只为每个页面加载必要的CSS，浏览器可以减少工作量，从而改善用户体验。原始 CSS假设您有一个 CSS 文件，其中包含您网站各个部分的样式：/* Styles for the home page */.homepage {    background-color: #f0f0f0;    padding: 10px;}/* Styles for the services page */.services {    background-color: #333;    color: white;}/* Styles for the contact page */.contact {    background-color: #222;    color: white;    padding: 20px;}CSS 代码分段 CSS现在，让我们根据其用途将此 CSS 分割成不同的文件：主页样式（主页.css）：.homepage {    background-color: #f0f0f0;    padding: 10px;}CSS 代码2. Services page Styles (services.css):.services {    background-color: #333;    color: white;}CSS code3. 联系页面样式（contact.css）：.contact {    background-color: #222;    color: white;    padding: 20px;}CSS 代码每个 CSS 文件都集中在网站的特定部分。现在，当用户访问您的网站时，每个页面仅加载所需的 CSS，从而提高网站的性能。4. 优化 CSS 交付您可以通过缩小 CSS 来使 CSS 文件更轻、加载速度更快——也就是说，您可以删除多余的空格和行（这称为缩小）。然后，您可以压缩这些文件，以便用户下载它们更小、更快捷。此外，请确保首先加载您网站最重要的样式，以便人们更快地看到您的页面。其他样式可以在后台加载而不会减慢速度。您还可以通过在浏览器中保存一些 CSS（这称为缓存）来使访问次数多次的人更快地访问您的网站。这意味着他们不必在每次访问时再次加载。此外，如果您使用 CDN 或服务器网络，无论您的用户身在何处，您的 CSS 文件都可以存储在世界各地的许多地方，以便更快地加载。缩小CSS比较 167KB 的未缩小 CSS 文件和 92KB 的缩小 CSS 文件之间文件大小的图形原始 CSS/* Main Stylesheet *//* Header Style */header {  background-color: #333;  color: white;  padding: 10px;}/* Navigation Style */nav {  background-color: #444;  margin-top: 10px;}CSS 代码上面的CSS代码是可读的，并且有很好的注释，但它包含额外的空格和注释，增加了文件大小。缩小的 CSSheader{background-color:#333;color:white;padding:10px}nav{background-color:#444;margin-top:10px;}CSS 代码缩小版将所有规则合并为一行，删除了不必要的空格和注释，从而减小了文件大小以加快加载速度。结论优化您的 CSS 可以加快您的网站速度，从而改善整体用户体验。通过实现本文中概述的实践，您可以实现性能更高、效率更高且可维护的 CSS。调整几行代码可能带来的性能节省并不显著，但在不同的样式表中，在数百行中，影响将开始显现。请记住，Web 性能是一个持续的过程。定期审查和完善您的 CSS，以跟上最佳实践和新兴趋势。

我们所知道的关于 Vue 3 的 Vapor Mode

前端
19666 阅读

什么是蒸汽模式？蒸汽模式是受 Solid.js 启发的一种新的替代编译策略。它旨在通过将代码编译为更高效的 JavaScript 输出来提高应用程序的性能。在应用级别使用时，您可以完全删除虚拟 DOM，从而减小应用的捆绑包大小。 好处性能更强使用更少的内存需要较少的运行时支持代码。Solid.js 有一个与 Vue 非常相似的反应式系统，它们都在响应式系统中使用代理，并具有基于读取的自动跟踪。这就是为什么 Vue 可以实现与 Solid.js 类似的编译策略。蒸汽模式如何工作？给定相同的单个文件组件，Vapor 模式将能够将其编译为性能更高的 JavaScript 输出。.vue为了优化最佳性能，Vapor 模式将只支持 Vue 功能的一个子集，这些功能是新的组合式 API 和 SFC，这是 Vue 3 编写应用程序的新默认方式。阅读更多关于 Vue 的年度回顾。.vue<script setup>目前的方法是什么？目前，Vue 采用混合 VDOM/Compiler 方法。编译器获取 SFC 的模板，对其进行分析并将 a 馈送到虚拟 DOM。这种编译器告知的虚拟 DOM 方法允许 Vue 在执行 DOM 操作时比 Svelte 4 等无 V-DOM 的工具表现得更好。React / Svelte / Vue Benchmark你的眼睛没有欺骗你Vue 3 目前的表现优于 Svelte 和 React。pic.twitter.com/E6H4OfqGp2&mdash;：icarus.gk （@icarusgkx） 2023年8月21日如何使用蒸汽模式？在组件级别。您将能够使用文件名后缀启用它。.vapor最终目标是在同一应用程序中自由混合 Vapor 和非 Vapor 组件。* 注意最初，蒸汽模式可以从集成到 vDOM 中的纯蒸汽树开始，然后从那里提高它们之间的互操作性。在应用级别。以这种方式编译的应用程序将能够完全删除虚拟 DOM 运行时，并且仅包含@vue/反应性和蒸汽模式运行时帮助程序，这些助手非常轻量级。以这种方式编写的应用程序的基线大小为 ~6kb，而当前带有 vDOM 的基线 Vue 3 应用程序的基线大小为 ~50kb。这减少了 88%！要点这是一项可选功能，不会影响现有代码库。如果你决定将你的 Vue 版本升级到包含 Vapor Mode 的版本，这不会引入任何与 Vapor Mode 相关的重大更改。Vapor 模式将能够与 vDOM 组件进行互操作。因此，如果您想使用任何使用虚拟 DOM 的库，例如 Vuetify，Vapor 模式仍然能够支持它。蒸汽模式级虽然仍在开发中，但我们有一些关于它的新闻：第 1 阶段：核心功能的运行时所有 Vapor 运行时助手都引入了，这些助手基本上是帮助生成代码的代码。这个阶段差不多完成了。目标支持核心指令（）和组件树。v-on, v-if, v-for, etc...验证性能假设。与现有 SSR 输出的水化兼容性。第 2 阶段：核心功能的编译器这里的主要重点是确保我们可以采用 Vue 模板或 JSX 并将其转换为运行时可以处理的东西。目标共享代码生成 IR（中间表示）JSX AST / 模板 AST - IR - 蒸汽模式代码为什么要进行中间表示？由于没有虚拟 DOM，Vapor Mode 的编译过程消除了手动创建渲染函数的需要。但是，一些用户需要 JavaScript 的广泛灵活性。在这种情况下，可以将 JSX 编译成 Vapor 代码。模板和 JSX 都经历了相同的中间表示的转换，最终编译成 Vapor 代码。第 3 阶段：集成Vue 旨在使 Vapor 可以无缝嵌入到您现有的应用程序中，而无需对您当前的设置进行任何修改。您可以灵活地在组件级别选择加入，从而逐步将其引入应用程序的子集或专门引入性能关键领域。目标对独立 Vapor 应用程序的工具支持在现有应用程序中运行 Vapor 组件在 Vapor 中运行 vDOM 组件第 4 阶段：功能奇偶校验在最初的版本中，Vapor Mode 将只提供基本的核心功能，而一些更辅助的功能，如、、将在 Vue 团队整理完之前的所有目标后实现。<Transition /><KeepAlive /><Teleport />Suspense总结Vapor Mode 是 Vue.js 正在开发的一种新的面向性能的编译策略它将使用相同的模板（假设你使用的是组合 API，并生成性能更高的输出。<script setup>它将是可逐步采用的 - 您将能够选择为单个组件或整个应用程序启用蒸汽模式。最终目标是在同一应用程序中自由混合 Vapor 和非 Vapor 组件而不会出现问题，但是，Vapor 模式可以从集成到 vDOM 中的纯 Vapor 树开始，然后从那里提高它们之间的互操作性。

详细介绍CSS 中的形状shapes

前端
15926 阅读

矩形最初，HTML 中的所有内容都是矩形。因此，矩形很容易绘制;指定宽度和高度。如果这不起作用，您可以使用带有内联显示的元素，切换到块或内联块元素，您应该没问题。.rectangle {  width: 500px;  height: 300px;  background: black;}CSS 代码旁边的矩形以生成矩形广场正方形是宽度和高度具有相同值的矩形。我们可以采用矩形代码并将高度更改为与宽度相同的值，如下所示：.square {  width: 300px;  height: 300px;  background: black;}那行得通，但是......如果我们想改变正方形的大小，我们每次都需要更新两个值。这不是一个大问题，但在 CSS 中，我们有 aspect-ratio 属性，它允许我们指定宽度和高度之间的关系。设置值 or（如视频中所示）也会产生一个包含相同代码行的正方形，但现在我们只需要更新一行代码来调整它的大小：11 / 1.square {  width: 300px;  aspect-ratio: 1;  background: black;}CSS代码旁边的正方形来绘制一个正方形圈从正方形开始，我们需要设置一个圆形。我们通过使用 border-radius 并将其分配给一个相当大的百分比值（50% 或更高）来实现这一点。简单易行。.circle {  width: 300px;  aspect-ratio: 1;  background: black;  border-radius: 50%;}CSS代码旁边的圆圈，用于绘制圆圈椭圆椭圆是像圆形一样的圆形，但不是正方形，而是基于矩形。（椭圆有一个更准确和技术性的定义，但我现在只用这个定义。因此，我们将像圆形一样添加属性，但将其添加到矩形而不是正方形中。border-radius.ellipse {  width: 300px;  height: 400px;  background: black;  border-radius: 50%;}用于绘制椭圆的代码旁边的椭圆椭圆形/卵形椭圆和椭圆是不一样的。内圈是否相互交叉有一些技术定义，但为了简单起见，我们将考虑椭圆形类似于鸡蛋。我们通过使用 border-radius 属性的两个值来实现此形状。是的，有两组，每组最多 4 个值：水平半径，然后用正斜杠（）分隔垂直半径。/我们将水平半径设置为，然后为顶角指定较大的垂直半径值，为底角指定较小的垂直半径值。像这样的东西：100%.oval {  width: 300px;  height: 400px;  background: black;  border-radius: 100% / 120% 120% 75% 75%;}这些值将取决于矩形的大小。太大的值可能以平坦的顶部结束，而太小的值可能以平坦的底部结束。您可能需要玩弄数字才能获得所需的形状。绘制椭圆所需的 CSS 代码旁边的椭圆形钟铃铛是一种夸张的卵形，一侧长而圆，另一侧是扁平的（尽管仍然具有柔和的曲线）。要获得此形状，请取一个椭圆形，并使大值变大，小值变小。如果您创建 CSS 艺术，则此形状可以方便地用于身体甚至面部（稍微调整半径值）。.bell {  width: 300px;  height: 400px;  background: black;  border-radius: 100% / 160% 160% 25% 25%;}CSS 代码旁边的铃铛形状，用于绘制铃铛拱椭圆和钟形略有变化，拱形底部平坦，顶部弯曲。这个值没有玩弄;我们可以将 border-radius 属性设置为固定值：.arch {  width: 300px;  height: 400px;  background: black;  border-radius: 50% / 100% 100% 0% 0%;}使用这种方法，如果元素的宽度是高度的两倍，我们将得到一个半圆形而不是拱形。CSS 代码旁边的拱形，用于绘制拱形眼睛三个形状中的第一种形状，需要稍微旋转。我们将从一个正方形开始，然后设置两个相对角的边框半径，同时将其他两个角保留为零。我总是从左上角开始并添加 45 度旋转，但您可以选择任何其他角落并相应地调整旋转。.eye {  width: 300px;  aspect-ratio: 1;  background: black;  rotate: 45deg;  border-radius: 80% 0;}您可以使用该属性或 .无论哪种方式都可以。至于边框半径，该值越高，眼睛曲率越柔和（重复值以允许一侧比另一侧高：.）rotate: 45degtransform: rotate(45deg)80% 0 100% 0用CSS代码画眼睛的眼睛形状撕有趣的是，眼泪的形状是眼睛形状的变体。相同的代码，只是更改了边框半径：最大化三个半径以获得圆形，并将最后一个角半径保留为零，使其以一个点结束。.tear {  width: 300px;  aspect-ratio: 1;  background: black;  rotate: 45deg;  border-radius: 0 50% 50% 50%;}CSS 代码旁边的撕裂形状，用于绘制撕裂形状心绘制心形与前面的形状略有不同，因为它将使用元素以及：：before 和：：after 伪元素。我们从一个正方形开始，将其旋转 45 度，然后将伪元素添加为圆形（见上文）。我们水平平移一个伪伪，垂直平移另一个伪伪斜移（当元素旋转时，两者都会斜移），这样就完成了。代码可能看起来很“复杂”，但想法很简单。.heart {  width: 300px;  aspect-ratio: 1;  background: black;  rotate: 45deg;  position: relative;}.heart::before,.heart::after {  content: "";  position: absolute;  width: 100%;  aspect-ratio: 1;  border-radius: 50%;  background: inherit;  translate: -50% 0;}.heart::after {  translate: 0 -50%;}CSS代码旁边的一颗心画一颗心三角形许多在线文章讨论了如何使用边框、高度/宽度为零和一些透明颜色绘制三角形。我强烈反对这种做法。虽然它有效，但它是老式的，如果我们想要灵活性和响应能力，可能会很麻烦。（如果你想了解更多关于为什么，我写了一篇文章，用不同的方法在CSS中绘制三角形，它们的优缺点）。相反，我建议使用 clip-path 来绘制三角形 - 以及以下一些多边形形状。使用 clip-path，我们指定定义形状的路径（可以使用多边形、图像、实际路径等）。该形状之外的所有内容都将被剪裁。在三角形的情况下，我们只需要 3 个点。.triangle {  width: 300px;  height: 300px;  background: black;  clip-path: polygon(50% 0, 100% 100%, 0 100%);}CSS代码旁边的三角形，用于绘制三角形梯形另一个多边形。使用中的函数很容易制作。在这种情况下，我们将从一个矩形或正方形开始，我们需要四个点：底部的点在角落里，顶部的点稍微在里面。我们完成了！polygon()clip-path.trapezoid {  width: 400px;  height: 300px;  background: black;  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);}CSS 代码旁边的梯形，用于绘制梯形八角形我做了八边形，因为它很容易做到（不需要计算任何东西或使用三角学）。好消息是 / 方法可以外推到任何多边形形状。clip-pathpolygon()在视频中，我简化了点，这样它们就不会占据整个屏幕;实际上，我们需要使用一些十进制数来获得八边形：.octagon {  width: 300px;  height: 300px;  background: black;  clip-path: polygon(16.6% 16.6%, 50% 0, 83.3% 16.6%, 100% 50%,                     83.3% 83.3%, 50% 100%, 16.6% 83.3%, 0 50%);}CSS 代码旁边的八边形，用于绘制八边形火花火花是八边形的变体。唯一的区别是其中四个点的位置。在八角形中，它们朝向外面;在火花中，它们将朝向内部（想象一个旋转的正方形）。.spark {  width: 300px;  aspect-ratio: 1;  background: black;  clip-path: polygon(40% 40%, 50% 0, 60% 40%, 100% 50%,                     60% 60%, 50% 100%, 40% 60%, 0 50%);}为了获得更酷的效果，不要将形状应用于元素本身，而是应用于元素和伪元素。然后将一个旋转 45 度（如果将此旋转应用于 .::before::after::beforeCSS 代码旁边的四点火花形状来绘制它月亮月亮可以有多种形式。我们所说的月亮形状是指新月形（或渐变）。我们可以从圆形开始并应用框阴影来快速实现这一点。框阴影允许五个值：水平平移、垂直平移、模糊度（可选）、缩放（可选）和颜色（可选，默认为文本颜色）。根据我们是想要新月形还是渐变形，我们会在右边或左边添加一个大阴影。.moon {  width: 300px;  aspect-ratio: 1;  border-radius: 50%;  box-shadow: -90px 0 0 80px black;}作为替代实现，我建议使用蒙版而不是阴影。这是因为使用蒙版实现时，月亮的绘制在页面的流程中是明确定义的，并且它与用于绘制月亮的元素的大小相匹配（我们可以使用插图来避免这个问题）。此外，蒙版比阴影提供了更大的灵活性。.moon {  width: 300px;  aspect-ratio: 1;  border-radius: 50%;  -webkit-mask: radial-gradient(circle at 75% 50%, #0000 33%, #000 0);}CSS 代码旁边的递减月亮来绘制它污渍/飞溅此形状比此列表中的所有其他形状都更复杂。我写了一篇关于如何创建它的更详细的文章（包括一个分步视频）。这个想法是具有重复的圆锥渐变并应用过滤器以使它们看起来平滑。您可以通过更改背景的数量或其大小来实现许多不同形状的效果。玩一玩，找到你最喜欢的那个。.stain {  width: 300px;  height: 300px;  background:    repeating-conic-gradient(#000 0 3%, #0000 0 11%),    repeating-conic-gradient(#0000 0 5%, #000 0 7%) 50% / 60% 60%,    repeating-conic-gradient(#0000 0 7%, #000 0 9%) 50% / 70% 70%,    repeating-conic-gradient(#0000 0 11%, #000 0 13%) 50% / 80% 80%,    radial-gradient(#000 22%, #0000 0),    #fff;  mix-blend-mode: darken;  filter: blur(10px) contrast(100) brightness(1)  grayscale(1);  box-shadow: 0 0 0 50px #fff;}用代码染色形状

盘点vue最常被问到的5个问题

前端
13539 阅读

<ol class="ol1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li>Vue.js 如何进行组件通信？ </li></ol><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vue.js 中组件之间的通信主要有以下几种方式：<ul class="ul1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">父组件向子组件传递数据：通过 props 属性进行传递。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">子组件向父组件传递数据：通过 $emit 方法触发自定义事件，并在父组件中通过 v-on 指令监听该事件进行处理。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">兄弟组件之间传递数据：通过一个公共的父组件作为中转，或者使用 Vue.js 提供的 EventBus 或 Vuex 等全局状态管理工具进行通信。 </li></ul><ol class="ol1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li>Vue.js 的生命周期钩子有哪些？ </li></ol><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vue.js 的生命周期钩子包括以下几个：<ul class="ul1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">beforeCreate：实例创建之前，组件选项对象已经创建完成，但 data 和 methods 等选项还未初始化。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">created：实例已经创建完成，data 和 methods 等选项已经初始化，但 DOM 还未渲染。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">beforeMount：模板编译完成，但还未挂载到页面中。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">mounted：组件已经挂载到页面中，DOM 已经渲染完成。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">beforeUpdate：组件数据更新之前。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">updated：组件数据更新完成之后。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">beforeDestroy：实例销毁之前。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">destroyed：实例已经销毁。 </li></ul><ol class="ol1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li>Vue.js 的路由如何实现？ </li></ol><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vue.js 提供了一个官方的路由库 Vue Router，可以通过 Vue.use(VueRouter) 来安装。使用 Vue Router 可以实现路由的配置和跳转等功能。<ol class="ol1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li>Vue.js 如何进行异步请求？ </li></ol><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vue.js 中常用的进行异步请求的方法有以下几种：<ul class="ul1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">使用 Axios 或者 Fetch 等第三方库进行异步请求。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">在 Vue.js 中使用官方提供的 vue-resource 插件进行异步请求。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">在组件中使用 Vue.js 提供的 $http 方法进行异步请求。 </li></ul><ol class="ol1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li>Vue.js 如何进行性能优化？ </li></ol><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vue.js 中进行性能优化的方法有以下几种：<ul class="ul1 list-paddingleft-2" style="font-size: medium; white-space: normal;"><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">使用 v-if 指令代替 v-show 指令，可以减少 DOM 的数量。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">合理使用 computed 和 watch 属性，减少不必要的计算。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">合理使用 v-for 指令的 key 属性，避免重复渲染。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">对于大量数据的渲染，可以使用虚拟列表技术进行优化。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">尽量避免在模板中使用复杂的表达式。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">使用异步组件和路由懒加载来减少应用程序的初始加载时间。 </li><li><span class="s1" style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: Menlo;">合理使用 keep-alive 组件，可以缓存组件的状态避免重复渲染。 </li></ul><p class="p2" style="margin-top: 0px; margin-bottom: 2px; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-stretch: normal; font-size: 17px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">

vue动态路由/异步路由与组件拆分复用

前端
10818 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js中，可以使用动态路由和异步路由来实现组件的动态加载和复用。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">动态路由<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">动态路由是指通过在路由配置中使用变量来动态生成路由。例如：<pre class="brush:as3;toolbar:false">const router = new VueRouter({   routes: [     {       path: '/user/:id',       component: User     }   ] })</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的例子中，我们定义了一个动态路由/user/:id，其中:id表示一个变量，可以根据不同的用户ID动态生成不同的路由。当用户访问/user/1时，就会加载User组件并传递参数id为1。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">异步路由<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">异步路由是指将组件按需加载，而不是一次性全部加载。这可以减少首屏加载时间，提升应用性能。在Vue.js中，可以使用webpack提供的import函数实现异步路由。例如：<pre class="brush:as3;toolbar:false">const router = new VueRouter({   routes: [     {       path: '/about',       component: () => import('./views/About.vue')     }   ] })</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的例子中，我们将About组件通过import函数进行异步加载。当用户访问/about路由时，会先加载路由组件About.vue，然后再渲染页面。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">组件拆分复用<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js中，可以将组件拆分为更小的组件，然后进行复用。例如，我们可以将页面中的公共部分拆分为组件，然后在需要的地方进行引用。例如：<pre class="brush:as3;toolbar:false"><template>   <div>     <header-nav></header-nav>     <router-view></router-view>     <footer-nav></footer-nav>   </div> </template> <script> import HeaderNav from './HeaderNav.vue' import FooterNav from './FooterNav.vue' export default {   name: 'App',   components: {     HeaderNav,     FooterNav   } } </script></pre><p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">在上面的例子中，我们将页面中的头部和底部拆分为组件HeaderNav和FooterNav，并在App组件中进行引用。这样，无论哪个页面需要头部和底部，都可以直接引用HeaderNav和FooterNav组件，实现了组件的复用。

vue使用路由守卫实现基础登陆校验功能

前端
10800 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js中，可以使用路由守卫来实现基础的登录校验功能。路由守卫是Vue.js提供的一种机制，用于在路由跳转时拦截并执行一些逻辑。通过路由守卫，可以在用户访问某个路由之前进行一些校验操作，例如检查用户是否已登录。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">实现步骤如下：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">定义路由守卫<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js项目中，可以通过定义路由守卫来实现基础的登录校验功能。例如：<pre class="brush:as3;toolbar:false">router.beforeEach((to, from, next) => {   const isLogin = localStorage.getItem('token') ? true : false;   if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限     if (isLogin) {  // 判断是否已经登录       next();     } else {       next({         path: '/login',         query: { redirect: to.fullPath }  // 将跳转的路由path作为参数，登录成功后跳转到该路由       });     }   } else {     next();   } });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的例子中，我们定义了一个全局的路由守卫，并在其中进行了登录校验。首先，我们通过localStorage.getItem('token')来判断用户是否已经登录，如果已经登录，那么就可以跳转到目标路由；如果未登录，那么就需要跳转到登录页面进行登录。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在路由配置中设置路由元信息<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">为了让路由守卫知道哪些路由需要进行登录校验，需要在路由配置中设置路由元信息。例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false">const routes = [   {     path: '/',     component: Home,     meta: {       requireAuth: true  // 添加该字段，表示进入这个路由需要登录权限     }   },   {     path: '/login',     component: Login   } ];</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的例子中，我们定义了两个路由，其中Home路由需要进行登录校验，因此在其对应的路由配置中设置了meta: { requireAuth: true }。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">通过上面的步骤，就可以实现基础的登录校验功能。当用户访问需要进行登录校验的路由时，会自动跳转到登录页面进行登录；当用户登录成功后，又会自动跳转回目标路由。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">

Vuex的引入、应用场景及项目中的实现

前端
13427 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vuex是一个专为Vue.js应用程序开发的状态管理模式，它集中管理组件的状态，并且能够进行可预测的状态更新。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">引入：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">为了在Vue.js应用程序中使用Vuex，需要安装Vuex，并在Vue.js应用程序中创建一个store对象。可以通过以下方式来引入Vuex：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">安装Vuex<pre class="brush:as3;toolbar:false">npm install vuex --save</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">引入Vuex<pre class="brush:as3;toolbar:false">import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex);</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建store对象<pre class="brush:as3;toolbar:false">const store = new Vuex.Store({   state: {     count: 0   },   mutations: {     increment(state) {       state.count++;     }   },   actions: {     incrementAsync(context) {       setTimeout(() => {         context.commit('increment');       }, 1000);     }   },   getters: {     getCount(state) {       return state.count;     }   } }); export default store;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在上面的例子中，我们创建了一个名为store的Vuex对象，并定义了state、mutations、actions和getters四个属性。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">应用场景：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Vuex主要适用于以下几种场景：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">多个组件需要共享同一状态：在Vue.js应用程序中，如果多个组件需要共享同一状态，那么可以使用Vuex将该状态存储在store对象中，从而使得多个组件都可以访问该状态。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">组件之间需要进行状态传递：有时候需要将某个组件的状态传递给另一个组件，在这种情况下，可以使用Vuex来进行状态传递。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">管理异步操作的状态：在Vue.js应用程序中，如果需要管理异步操作的状态，例如网络请求、定时器等，那么可以使用Vuex来进行管理。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">项目中的实现：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js项目中使用Vuex，需要在Vue.js应用程序中引入Vuex，并创建一个store对象。然后可以在组件中使用Vuex来进行状态管理。<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">例如，在Vue.js项目中，可以在main.js中引入Vuex，并创建一个store对象：<pre class="brush:as3;toolbar:false">import Vue from 'vue'; import Vuex from 'vuex'; import store from './store'; Vue.use(Vuex); new Vue({   el: '#app',   store,   render: h => h(App) });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">然后可以在组件中通过this.$store来访问store对象，并使用Vuex来进行状态管理。例如：<pre class="brush:as3;toolbar:false"><template>   <div>     <h1>{{ count }}</h1>     <button @click="increment">Increment</button>     <button @click="incrementAsync">Increment Async</button>   </div> </template> <script> export default {   computed: {     count() {       return this.$store.getters.getCount;     }   },   methods: {     increment() {       this.$store.commit('increment');     },     incrementAsync() {       this.$store.dispatch('incrementAsync');     }   } }; </script></pre><p class="p3" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "PingFang SC"; white-space: normal;">在这个例子中，我们定义了一个组件，用于显示count状态，并提供两个按钮用于触发mutation和action来更新状态。

Axios网络请求及路由使用

前端
12705 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它的特点包括支持Promise API、拦截请求和响应、转换请求和响应数据等，可以轻松地与现代的前端框架集成，如React、Vue等。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">下面介绍如何在Vue.js中使用Axios来进行网络请求：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">安装Axios<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">可以通过npm命令来安装Axios：<pre class="brush:as3;toolbar:false">npm install axios --save</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">引入Axios<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在需要使用Axios的文件中引入：<pre class="brush:as3;toolbar:false">import axios from 'axios';</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">发送网络请求<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">可以通过Axios发送网络请求，例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false">axios.get('/api/data')   .then(response => {     console.log(response.data);   })   .catch(error => {     console.log(error);   });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这个例子中，我们发送了一个GET请求到/api/data接口，并在成功和失败的情况下分别打印了结果。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">添加拦截器<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">可以使用Axios的拦截器来在请求和响应过程中添加一些通用的处理逻辑，例如添加请求头、统一处理错误等。例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false">axios.interceptors.request.use(config => {   // 添加请求头   config.headers.Authorization = 'Bearer ' + token;   return config; }, error => {   return Promise.reject(error); }); axios.interceptors.response.use(response => {   // 统一处理响应数据   if (response.data.code !== 200) {     return Promise.reject(response.data.msg);   }   return response.data; }, error => {   return Promise.reject(error); });</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这个例子中，我们分别添加了请求拦截器和响应拦截器，用于在请求和响应过程中添加一些通用的处理逻辑。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用路由<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js中，可以使用Vue Router来进行路由管理。可以通过以下方式来使用Vue Router：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">安装Vue Router：<pre class="brush:as3;toolbar:false">npm install vue-router --save</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建路由实例：<pre class="brush:as3;toolbar:false">javascript Copy code import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(VueRouter); const routes = [   { path: '/', component: Home },   { path: '/about', component: About } ]; const router = new VueRouter({   mode: 'history',   routes }); export default router;</pre><p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">这个例子中，我们创建了两个组件Home和About，并定义了路由表，包括根路由和/about路由。然后创建了一个路由实例，并将路由表传递给路由实例。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">使用路由：<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">在Vue.js的模板中可以通过<router-link>和<router-view>来使用路由。例如：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <pre class="brush:as3;toolbar:false"><template>   <div>     <router-link to="/">Home</router-link>     <router-link to="/about">About</router-link>     <router-view></router-view>   </div> </template></pre>

详细介绍微信小程序注册流程/注册方式/注册主体

前端
12466 阅读

<p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">微信小程序注册流程：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">准备工作：首先需要有一个微信公众号账号，如果没有可以先去注册一个。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">注册小程序账号：登录微信公众平台，进入“小程序”菜单，在“开发”->“开发设置”中进行开发者注册。注册需要提供企业营业执照或个人身份证等资料，审核通过后即可注册为小程序开发者。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">创建小程序：注册开发者账号后，可以在微信公众平台中创建小程序。创建小程序需要填写小程序的基本信息，包括小程序名称、AppID、类目、logo等。创建完成后，可以进行小程序的开发和发布。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">注册方式：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">微信小程序可以注册个人账号和企业账号两种方式。个人账号需要提供个人身份证信息，企业账号需要提供企业营业执照等相关资料。同时，个人账号只能创建5个小程序，企业账号没有限制。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">注册主体：<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;"> <p class="p1" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; white-space: normal;">微信小程序的注册主体可以是个人或企业。个人可以使用个人账号进行注册，企业需要使用企业账号进行注册。注册主体需要提供相应的资料进行认证，审核通过后即可注册成功。<p class="p2" style="margin-top: 0px; margin-bottom: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 15px; line-height: normal; font-family: "Helvetica Neue"; min-height: 17px; white-space: normal;">