第10章：CSS最佳实践 --[CSS零基础入门]

news2024/12/21 8:16:17

代码组织

在CSS开发中，良好的代码组织和最佳实践对于项目的可维护性和扩展性至关重要。以下是两个示例，展示了如何遵循CSS最佳实践来组织代码。

示例 1: 使用 BEM（Block Element Modifier）命名法

BEM 是一种用于提高 CSS 可读性和可维护性的命名约定。它通过使用特定的命名模式帮助开发者更好地理解和组织样式规则。下面是一个简单的例子，展示如何在 HTML 和 CSS 中应用 BEM 命名法。

HTML
<article class="card">
    <img src="image.jpg" alt="Description" class="card__image">
    <div class="card__content">
        <h2 class="card__title">Title</h2>
        <p class="card__text">Some descriptive text.</p>
        <a href="#" class="card__link card__link--primary">Read More</a>
    </div>
</article>
CSS
/* Block */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Element */
.card__image {
    width: 100%;
    display: block;
}

.card__content {
    padding: 16px;
}

.card__title {
    margin: 0 0 8px;
    font-size: 1.5em;
}

.card__text {
    margin: 0 0 16px;
}

/* Modifier */
.card__link {
    color: #007bff;
    text-decoration: none;
}

.card__link--primary {
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
}

说明：

  • Block: .card 是一个独立的组件。
  • Element: .__element 表示属于该块的部分，如 .card__image、.card__content 等。
  • Modifier: .--modifier 用来表示元素或块的不同状态或版本，例如 .card__link--primary 表示链接的一个变体。

示例 2: 使用 SCSS（Sass）进行模块化和嵌套

SCSS 是 CSS 的预处理器，允许你编写更简洁且结构化的代码。它可以让你利用变量、嵌套、混合（mixins）、函数等功能，从而提高代码的可维护性。

SCSS 文件 (styles.scss)
// Variables
$primary-color: #007bff;
$secondary-color: #6c757d;

// Mixin for media queries
@mixin respond-to($media) {
    @if $media == small {
        @media (max-width: 576px) { @content; }
    } @else if $media == medium {
        @media (min-width: 576px) and (max-width: 768px) { @content; }
    } // Add more media queries as needed
}

// Base styles
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: $secondary-color;
}

// Component: Button
.button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;

    &--primary {
        background-color: $primary-color;
        color: white;

        &:hover {
            background-color: darken($primary-color, 10%);
        }
    }

    &--secondary {
        background-color: $secondary-color;
        color: white;

        &:hover {
            background-color: darken($secondary-color, 10%);
        }
    }

    @include respond-to(small) {
        padding: 6px 12px;
        font-size: 0.9em;
    }
}

说明：

  • Variables: 定义了颜色等常用值作为变量，方便全局修改。
  • Mixins: 创建了一个响应式断点的 mixin，简化了媒体查询的书写。
  • Nesting: 使用嵌套减少了重复选择器的输入，并且使得样式与HTML结构更加匹配。
  • Component: 按照组件的方式定义样式，比如按钮（.button），并且为不同类型的按钮提供了修饰符（如 .button--primary 和 .button--secondary）。

这两个示例展示了如何通过采用 BEM 命名法和使用 SCSS 来提高 CSS 代码的组织性和可维护性。遵循这些最佳实践可以帮助团队成员更容易地理解代码，同时也使得项目在未来更容易扩展和维护。

重用代码

在CSS开发中，重用代码是提高效率、减少冗余和增强可维护性的关键。以下是两个示例，展示了如何通过不同的方法来实现CSS代码的重用。

示例 1: 使用 CSS 类的组合与继承

通过定义通用样式类，并将这些类组合应用到HTML元素上，可以有效地重用样式规则。此外，使用伪类（如 :hover）可以在不增加额外类的情况下为特定状态添加样式。

HTML
<div class="container">
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
    <button class="btn btn-success">Success Button</button>
</div>
CSS
/* 基础按钮样式 */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 按钮颜色变体 */
.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-success {
    background-color: #28a745;
    color: white;
}

/* 鼠标悬停效果 */
.btn:hover {
    opacity: 0.9;
}

说明：

  • 基础样式类：.btn 定义了所有按钮共享的基础样式。
  • 变体类：.btn-primary, .btn-secondary, .btn-success 等为不同类型的按钮提供了特定的颜色和外观。
  • 状态样式：通过 :hover 伪类为所有按钮提供一致的鼠标悬停效果，无需为每个按钮单独定义。

示例 2: 使用 CSS 预处理器（如 SCSS/Sass）进行代码重用

CSS预处理器如SCSS允许你使用变量、混合（mixins）、嵌套等功能，从而更方便地重用代码并保持样式的一致性。

SCSS 文件 (styles.scss)
// 定义全局变量
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$padding-base: 10px;
$border-radius: 4px;

// 创建mixin用于生成按钮样式
@mixin button-style($color) {
    background-color: $color;
    color: white;
    &:hover {
        background-color: darken($color, 10%);
    }
}

// 定义基础按钮样式
.button {
    display: inline-block;
    padding: $padding-base 20px;
    font-size: 16px;
    border: none;
    border-radius: $border-radius;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

// 应用mixin到不同类型的按钮
.button--primary {
    @include button-style($primary-color);
}

.button--secondary {
    @include button-style($secondary-color);
}

.button--success {
    @include button-style($success-color);
}

说明：

  • 变量：使用 $variable 定义常用值，例如颜色和间距，这使得全局修改变得简单。
  • Mixin：创建了一个名为 button-style 的 mixin 来封装按钮的颜色逻辑，包括默认状态和悬停状态。这样可以避免重复编写相似的样式代码。
  • 嵌套：利用 SCSS 的嵌套功能简化选择器结构，同时保持代码清晰易读。

这两个示例展示了如何通过合理组织 CSS 类以及使用预处理器特性来重用代码，减少重复劳动，并确保样式的一致性和可维护性。

性能优化

优化 CSS 性能对于提高网页加载速度和用户体验至关重要。以下是两个示例，展示了如何通过具体的策略来优化 CSS 性能。

示例 1: 减少重排（Reflow）和重绘（Repaint）

频繁的 DOM 操作和样式变化会触发浏览器重新计算布局（重排）和重新绘制页面（重绘），这可能会导致性能瓶颈。为了减少这些操作，应该尽量避免在运行时频繁修改样式，并将多个样式变更合并为一次执行。

优化前
/* 不推荐：每个属性单独设置 */
.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

/* 动态添加类或内联样式 */
<script>
    document.querySelector('.box').style.width = '200px';
    document.querySelector('.box').style.height = '200px';
</script>
优化后
/* 推荐：使用简写属性 */
.box {
    margin: 10px 20px; /* 简化后的写法 */
}

/* 使用类切换而不是直接修改样式 */
<style>
    .box--expanded {
        width: 200px;
        height: 200px;
    }
</style>

<script>
    // 合并所有样式变更到一个类中，然后一次性应用
    document.querySelector('.box').classList.add('box--expanded');
</script>

说明：

  • 使用简写属性：CSS 提供了多种简写属性（如 margin、padding、border 等），可以减少代码量并降低解析负担。
  • 批量更新样式：通过定义好状态变化所需的全部样式，并以类的形式应用，可以减少对 DOM 的多次操作，从而降低重排和重绘的频率。

示例 2: 使用 Will-Change 属性和硬件加速

will-change 属性可以告诉浏览器哪些元素即将发生变化，使浏览器提前进行必要的优化准备。此外，某些 CSS 属性（如 transform 和 opacity）可以通过 GPU 加速渲染，从而提高动画性能。

优化前
.element {
    transition: transform 0.5s, opacity 0.5s;
}

.element:hover {
    transform: rotate(360deg);
    opacity: 0.5;
}
优化后
/* 提示浏览器提前准备好元素的变化 */
.element {
    will-change: transform, opacity;
    transition: transform 0.5s, opacity 0.5s;
    backface-visibility: hidden; /* 强制硬件加速 */
}

.element:hover {
    transform: rotate(360deg);
    opacity: 0.5;
}

说明：

  • will-change 属性：告知浏览器元素可能发生的改变，允许它提前做出优化。注意不要滥用此属性，因为过度使用可能导致不必要的资源消耗。
  • 硬件加速：通过设置 backface-visibility: hidden 或者使用 translateZ(0) 等技巧，可以强制浏览器使用 GPU 来处理特定的动画效果，提升性能。

这两个示例展示了如何通过减少重排和重绘的操作次数以及利用硬件加速来优化 CSS 性能。遵循这些最佳实践可以帮助你构建更快、更流畅的网页应用。

语义化命名

语义化命名是 CSS 编码中的一个重要原则，它强调通过有意义的名称来描述样式的作用和用途，而不是基于样式的表现形式。这种方式有助于提高代码的可读性和可维护性，并且让其他开发者更容易理解代码的意图。

以下是两个使用语义化命名的例子：

示例 1: 使用语义化的类名来定义导航栏

HTML
<nav class="main-navigation">
    <ul>
        <li><a href="#home" class="nav-link">Home</a></li>
        <li><a href="#services" class="nav-link">Services</a></li>
        <li><a href="#about" class="nav-link">About</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
    </ul>
</nav>
CSS
.main-navigation {
    background-color: #333;
}

.main-navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 14px 16px;
    display: block;
}

.nav-link:hover {
    background-color: #ddd;
    color: black;
}

说明：

  • main-navigation: 这个类名清晰地表示了这是一个主要的导航组件。
  • nav-link: 表示这些链接是导航的一部分，而不仅仅是普通的链接。这使得它们与页面上的其他链接区分开来。

示例 2: 使用语义化的类名来构建一个消息框

HTML
<article class="message-box message-box--success">
    <h1 class="message-title">Success!</h1>
    <p class="message-text">Your changes have been saved.</p>
</article>

<article class="message-box message-box--error">
    <h1 class="message-title">Error!</h1>
    <p class="message-text">There was a problem with your request.</p>
</article>
CSS
.message-box {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 16px;
    margin-bottom: 10px;
}

.message-box--success {
    border-color: #28a745;
    background-color: #d4edda;
}

.message-box--error {
    border-color: #dc3545;
    background-color: #f8d7da;
}

.message-title {
    margin-top: 0;
    font-size: 1.2em;
}

.message-text {
    margin: 0;
}

说明：

  • message-box: 类名直接反映了这个组件的功能——它是一个用来显示消息的盒子。
  • message-box--success 和 message-box--error: 这些修饰符清楚地表达了不同状态的消息框（成功或错误），并且可以很容易地添加更多状态（如警告、信息等）。
  • message-title 和 message-text: 这些类名明确了元素在消息框内的角色，即标题和正文内容，而不是依赖于视觉表现（如颜色或大小）来命名。

这两个例子展示了如何利用语义化命名来编写更清晰、更具描述性的 CSS。这样的做法不仅使代码更容易被其他开发者理解，而且也有助于保持样式的一致性和适应未来的设计变更。如果你有更多问题或需要进一步的帮助，请随时提问！

代码注释

良好的代码注释是确保CSS代码可读性和可维护性的关键。适当的注释可以帮助开发者快速理解样式的目的和作用，尤其是在团队协作或代码需要长期维护的情况下。以下是两个示例，展示了如何在CSS中添加有效的注释。

示例 1: 使用注释解释复杂的样式规则

当编写涉及复杂逻辑或特定浏览器兼容性的样式时，清晰的注释可以大大提升代码的可读性。下面是一个关于响应式设计的例子：

CSS
/* 
    响应式布局：根据屏幕宽度调整主内容区域和侧边栏的比例。
    主要适用于桌面和移动设备之间的转换。
*/

/* 桌面视图 */
@media (min-width: 768px) {
    .main-content {
        /* 主内容区占据75%的宽度 */
        flex: 3;
    }
    
    .sidebar {
        /* 侧边栏占据25%的宽度 */
        flex: 1;
    }
}

/* 移动视图 */
@media (max-width: 767px) {
    .main-content, .sidebar {
        /* 在较小屏幕上，主内容区和侧边栏都占据整个宽度 */
        flex: 1 100%;
    }
}

说明：

  • 整体注释：在 @media 查询之前添加了一段描述，解释了接下来的样式将如何影响页面布局。
  • 局部注释：为每个具体的样式规则提供了简短的注释，说明它们的作用和预期效果。

示例 2: 使用注释组织代码结构和模块化

对于大型项目，通过注释来划分不同的样式模块可以显著提高代码的结构性和易读性。以下是如何使用注释来组织一个包含多个组件的样式文件的例子：

SCSS 文件 (styles.scss)
// === 全局变量 ===
$primary-color: #007bff;
$secondary-color: #6c757d;
$base-font-size: 16px;

// === 混合（Mixins） ===
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// === 组件：按钮 ===
.button {
    padding: 0.5em 1em;
    font-size: $base-font-size;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &--primary {
        @include button-style($primary-color);
    }

    &--secondary {
        @include button-style($secondary-color);
    }
}

// === 组件：卡片 ===
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &__image {
        width: 100%;
        display: block;
    }

    &__content {
        padding: 1em;
    }
}

// === 工具函数 ===
@function button-style($color) {
    @return (
        background-color: $color,
        color: white,
        &:hover {
            background-color: darken($color, 10%);
        }
    );
}

说明：

  • 分隔线注释：使用 === 分隔符将不同部分的代码区分开来，如全局变量、混合、组件等。这有助于快速定位和浏览代码的不同模块。
  • 组件注释：为每个组件添加简短的标题注释，使读者能够迅速识别出各个部分的功能。
  • 内联注释：对于一些不那么直观的样式规则（如混合中的 flex-center），提供额外的解释以帮助理解其功能。

这两个示例展示了如何通过详细的注释来增强CSS代码的可读性和可维护性。遵循这些最佳实践可以帮助你创建更加清晰、易于理解和维护的样式表。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2263154.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于“2+1 链动模式商城小程序”的微商服务营销策略探究

基于“2+1 链动模式商城小程序”的微商服务营销策略探究

摘要&#xff1a;本文探讨在竞争激烈的市场经济与移动互联网时代背景下&#xff0c;微商面临的机遇与挑战。着重分析“21 链动模式商城小程序”如何助力微商改变思路&#xff0c;通过重视服务、提升服务质量&#xff0c;以服务营销放大利润&#xff0c;实现从传统微商模式向更具…
阅读更多...
1-1 STM32-0.96寸OLED显示与控制

1-1 STM32-0.96寸OLED显示与控制

1.0 模块原理图 2.0 0.96OLED简介 资料下载&#xff1a;https://jiangxiekeji.com/download.html 程序介绍&#xff1a;https://jiangxiekeji.com/tutorial/oled.html SSD1306是一款OLED/PLED点阵显示屏的控制器&#xff0c;可以嵌入在屏幕中&#xff0c;用于执行接收数据、显…
阅读更多...
在Visual Studio 2022中配置C++计算机视觉库Opencv

在Visual Studio 2022中配置C++计算机视觉库Opencv

本文主要介绍下载OpenCV库以及在Visual Studio 2022中配置、编译C计算机视觉库OpenCv的方法 1.Opencv库安装 ​ 首先&#xff0c;我们需要安装OpenCV库&#xff0c;作为一个开源库&#xff0c;我们可以直接在其官网下载Releases - OpenCV&#xff0c;如果官网下载过慢&#x…
阅读更多...
QT:QDEBUG输出重定向和命令行参数QCommandLineParser

QT:QDEBUG输出重定向和命令行参数QCommandLineParser

qInstallMessageHandler函数简介 QtMessageHandler qInstallMessageHandler(QtMessageHandler handler) qInstallMessageHandler 是 Qt 框架中的一个函数&#xff0c;用于安装一个全局的消息处理函数&#xff0c;以替代默认的消息输出机制。这个函数允许开发者自定义 Qt 应用…
阅读更多...
网站灰度发布？Tomcat的8005、8009、8080三个端口的作用什么是CDNLVS、Nginx和Haproxy的优缺点服务器无法开机时

网站灰度发布？Tomcat的8005、8009、8080三个端口的作用什么是CDNLVS、Nginx和Haproxy的优缺点服务器无法开机时

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把…
阅读更多...
OpenGL ES 03 加载3张图片并做混合处理

OpenGL ES 03 加载3张图片并做混合处理

OpenGL ES 02 加载3张图片并做混合处理 什么是纹理单元纹理单元的作用使用纹理单元的步骤详细解释加载图片并绑定到到GPU纹理单元采样器的设置1.设置采样器变量的纹理单元编号&#xff0c;目的是为了告诉纹理采样器&#xff0c;从哪个纹理单元采集数据2.如果你没有显式地设置采…
阅读更多...
临床外显子组测序分析中的那些坑（上）

临床外显子组测序分析中的那些坑（上）

大规模并行测序技术或下一代测序已成为基因诊断和研究的标准技术&#xff0c;尤其是外显子组和基因组测序现在已经在世界范围内广泛应用于患者的分子诊断。在过去几年中&#xff0c;许多实验室都在努力应对基于全新技术建立基因检测工作流程的挑战。测序技术中持续引入新的仪器…
阅读更多...
【Tomcat】第六站（最后一站啦！）：数据的返回

【Tomcat】第六站（最后一站啦！）：数据的返回

1. 引言 前端资源比如html页面&#xff0c;进行返回。截止到目前我们写的项目架构不支持前端页面&#xff08;静态资源 &#xff09;。 2. 数据的返回 2.1 准备 为了能够写前端页面&#xff0c;新建一个项目。选择Maven项目&#xff0c;下一步&#xff0c;下一步。 加载完…
阅读更多...
ai论文生成器：分享8款AI一键生成论文的写作软件

ai论文生成器：分享8款AI一键生成论文的写作软件

在撰写毕业论文的过程中&#xff0c;高效利用各类软件工具可以极大地提升写作效率与质量。以下是八个免费的神器软件工具&#xff0c;它们各自在论文撰写、文献管理、语法校对、数据可视化等方面发挥着重要作用。希望这些推荐能帮助你顺利完成毕业论文的写作。 千笔AI论文&…
阅读更多...
【Ubuntu 20.04】notepad++的安装与汉化

【Ubuntu 20.04】notepad++的安装与汉化

一&#xff0c;简介 本文介绍如何在Ubuntu虚拟机中安装notepad&#xff0c;供参考。 二&#xff0c;操作步骤 2.1 notepad的安装 sudo snap install notepad-plus-plus
阅读更多...
Cherno C++学习笔记 P45 拷贝与拷贝构造函数

Cherno C++学习笔记 P45 拷贝与拷贝构造函数

在这一篇文章当中&#xff0c;我们会学习一下C当中的复制以及复制构造函数&#xff0c;当然&#xff0c;还会用一个相对比较完整的代码类作为例子。这也是我们第一次写一个相对比较长的和完整的代码。 对于C来说&#xff0c;理解复制是非常重要的&#xff0c;因为整个C变成可以…
阅读更多...
uniapp入门 01创建项目模版

uniapp入门 01创建项目模版

0安装 hbuilder x 标准版 1.创建模版工程 2.创建官方 案例工程 index.uvuewen 文件解析 <!-- 模版 标签 --> <template><view></view></template><!-- 脚本 --> <script>export default {data() {return {}},onLoad() {},methods:…
阅读更多...
kubeadm安装K8s高可用集群之集群初始化及master/node节点加入calico网络插件安装

kubeadm安装K8s高可用集群之集群初始化及master/node节点加入calico网络插件安装

系列文章目录 1.kubeadm安装K8s高可用集群之基础环境配置 2.kubeadm安装K8s集群之高可用组件keepalivednginx及kubeadm部署 3.kubeadm安装K8s高可用集群之集群初始化及master/node节点加入集群calico网络插件安装 kubeadm安装K8s高可用集群之集群初始化及master/node节点加入ca…
阅读更多...
【NLP】序列到序列（seq2seq）建模工具fairseq使用详解

【NLP】序列到序列（seq2seq）建模工具fairseq使用详解

文章目录 一、fairseq简介二、安装方式2.1 pip安装2.2 源码安装 三、fairseq命令工具3.1 fairseq-preprocess3.2 fairseq-train3.3 fairseq-generate3.4 fairseq-interactivate3.5 fairseq-score3.6 fairseq-eval-lm 4. 常见报错报错1 参考资料 一、fairseq简介 fairseq 是 Fa…
阅读更多...
28、论文阅读：基于像素分布重映射和多先验Retinex变分模型的水下图像增强

28、论文阅读：基于像素分布重映射和多先验Retinex变分模型的水下图像增强

A Pixel Distribution Remapping and Multi-Prior Retinex Variational Model for Underwater Image Enhancement 摘要介绍相关工作基于模型的水下图像增强方法&#xff1a;无模型水下图像增强方法&#xff1a;基于深度学习的水下图像增强方法&#xff1a; 论文方法概述像素分布…
阅读更多...
ArkTs组件的学习

ArkTs组件的学习

一. AlphabetIndexer 可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件 参数名类型必填说明arrayValueArray<string>是字母索引字符串数组&#xff0c;不可设置为空selectednumber是初始选中项索引值若超出索引值范围则取默认值0 class Lxr{tImg:Resource…
阅读更多...
Python读取Excel批量写入到PPT生成词卡

Python读取Excel批量写入到PPT生成词卡

一、问题的提出 有网友想把Excel表中的三列数据&#xff0c;分别是&#xff1a;单词、音标和释义分别写入到PPT当中&#xff0c;每一张PPT写一个单词的内容。这种批量操作是python的强项&#xff0c;尤其是在办公领域&#xff0c;它能较好地解放双手&#xff0c;读取Excel表后…
阅读更多...
百度面试手撕 go context channel部分学习

百度面试手撕 go context channel部分学习

题目 手撕 对无序的切片查询指定数 使用context进行子协程的销毁 并且进行超时处理。 全局变量定义 var (startLoc int64(0) // --- 未处理切片数据起始位置endLoc int64(0) // --- 切片数据右边界 避免越界offset int64(0) // --- 根据切片和协程数量 在主线程 动态设…
阅读更多...
Otsu 二值化算法：原理、实现与应用

Otsu 二值化算法：原理、实现与应用

摘要&#xff1a; 本文深入探讨了 Otsu 二值化算法&#xff0c;详细阐述其原理&#xff0c;包括类间方差的计算与阈值确定机制。分别给出了该算法在 C#、Python 和 C 中的实现代码示例&#xff0c;并对代码进行了详细注释与分析。此外&#xff0c;还探讨了 Otsu 二值化算法在图…
阅读更多...
uniApp使用腾讯地图提示未添加maps模块

uniApp使用腾讯地图提示未添加maps模块

uniApp使用腾讯地图&#xff0c;打包提示未添加maps模块解决方案 这是报错信息&#xff0c;在标准基座运行的时候是没问题的&#xff0c;但是打包后会提示未添加&#xff0c;可以通过在mainfest里面把地图插件上腾讯地图的key更换高德地图的key&#xff0c;定位服务可以继续用腾…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023