【esp32-uniapp】uniapp小程序篇02——引入组件库
一、引入组件库(可自行选择其他组件库)
接下来介绍colorUI、uview plus的安装,其他的安装可自行查找教程
1.colorUI
weilanwl/coloruicss: 鲜亮的高饱和色彩,专注视觉的小程序组件库
下载之后解压,将\coloruicss-master\Colorui-UniApp下的colorui复制到项目的根目录、
在App.vue引入
@import "colorui/main.css";
@import "colorui/icon.css";
随便用一个,显示成功。
2.uview plus
因为我创的项目是vue3的,所以安装的是uview plus(不兼容vue2)。如果是vue2的项目,对应的是uview.
官方安装教程:安装 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架
接下来是Hbuider X方式的安装步骤
(1)下载插件
点击下面的连接去下载插件
零云®uview-plus3.0重磅发布,全面的Vue3鸿蒙移动组件库。 - DCloud 插件市场
点击完之后,需要扫码看广告,跟着看一下就好。
看完之后会有一个弹窗询问是否要打开Hbuider,选择 打开。
然后选择你要导入的项目。
完成之后会发现目录多了一个这个文件夹
(2)引入uview-plus主JS库
在项目根目录中的main.js
中,引入并使用uview-plus的JS库。
代码:
import uviewPlus from '@/uni_modules/uview-plus'
app.use(uviewPlus)
(3)引入uview-plus的全局SCSS主题文件
在项目根目录的uni.scss
中引入此文件。
注意!
请注意uni-app官方规范中uni.scss是一个特殊文件,万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中,否则会造成打包后包超大。
/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';
(4) 引入uview-plus基础样式
在App.vue
中首行的位置引入,注意给style标签加入lang="scss"属性。
<style lang="scss">/* 注意要写在第一行,注意不能引入至uni.scss,同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-plus/index.scss";
</style>
(5)安装依赖库
npm i dayjs
npm i clipboard
(6)配置easycom组件模式
温馨提示
- uni-app为了调试性能的原因,修改
easycom
规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。- 请确保您的
pages.json
中只有一个easycom
字段,否则请自行合并多个引入规则。
"easycom": {"autoscan": true,// 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175"custom": {"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"}},
二、测试
在index.vue页面随便引用一些组件-->运行
<template><view style="padding: 40px;"><up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button></view></template><script setup>import { ref } from 'vue';const disabled = ref(true);
</script><style></style>
显示成功。配置结束
相关文章:
【esp32-uniapp】uniapp小程序篇02——引入组件库
一、引入组件库(可自行选择其他组件库) 接下来介绍colorUI、uview plus的安装,其他的安装可自行查找教程 1.colorUI weilanwl/coloruicss: 鲜亮的高饱和色彩,专注视觉的小程序组件库 下载之后解压,将\coloruicss-ma…...
基于单片机的智能小区门禁系统设计(论文+源码)
1总体架构 智能小区门禁系统以STM32单片机和WiFi技术为核心,STM32单片机作为主控单元,通过WiFi模块实现与手机APP的连接,构建整个门禁系统。系统硬件包括RFID模块、指纹识别模块、显示屏、按键以及继电器。通过RFID绑定IC卡、APP面部识别、指…...
tkinter绘制组件(44)——浮出ui控件
tkinter绘制组件(44)——浮出ui控件 引言布局函数结构ui框架对齐方向绑定已有控件出现和隐藏逻辑出现和隐藏动画完整代码函数 效果测试代码最终效果 github项目pip下载 引言 TinUI的浮出ui控件(flyout)其实是一个之间创建在UI框架…...
CDSN 2024博客之星总评选-主题文章创作,我的AI之路-起手篇
CDSN 2024博客之星总评选-主题文章创作,我的AI之路-起手篇 一. 回顾自己的机器学习之路二. 2024年的大模型学习三. 对自己的期望 一. 回顾自己的机器学习之路 自2019年起,我开始涉足机器学习领域,最初接触的是通过模型实现自动化的任务&…...
LLM基础知识
代替你的不是ai,而是会使用ai的人。而在这之上还有会打造ai的人。 1、大语言模型的大体现在哪里 LLM(Large Language Model 大语言模型)的大不仅仅是指训练数据巨大,更指参数数量巨大。 参数即模型内部的变量,…...
Linux 网络:交换芯片 EDSA 以太网帧简介
文章目录 1. 前言2. EDSA 协议以太网帧的发送和接收2.1 什么是 EDSA ?2.2 EDSA 以太网帧的发送2.3 EDSA 以太网帧的接收 3. 验证 1. 前言 限于作者能力水平,本文可能存在谬误,因此而给读者带来的损失,作者不做任何承诺。 2. EDS…...
【Git版本控制器--3】Git的远程操作
目录 理解分布式版本控制系统 创建远程仓库 仓库被创建后的配置信息 克隆远程仓库 https克隆仓库 ssh克隆仓库 向远程仓库推送 拉取远程仓库 忽略特殊文件 为什么要忽略特殊文件? 如何配置忽略特殊文件? 配置命令别名 标签管理 理…...
深入理解GPT底层原理--从n-gram到RNN到LSTM/GRU到Transformer/GPT的进化
从简单的RNN到复杂的LSTM/GRU,再到引入注意力机制,研究者们一直在努力解决序列建模的核心问题。每一步的进展都为下一步的突破奠定了基础,最终孕育出了革命性的Transformer架构和GPT大模型。 1. 从n-gram到循环神经网络(RNN)的诞生 1.1 N-gram 模型 在深度学习兴起之前,处理…...
【2024年华为OD机试】 (E卷,200分) - 最优资源分配芯片资源占用(JavaScriptJava PythonC/C++)
一、问题描述 题目解析 题目描述 某块业务芯片的最小容量单位为 1.25G,总容量为 M * 1.25G。芯片资源编号为 1, 2, …, M。该芯片支持 3 种不同的配置,分别为 A、B、C: 配置 A:占用容量为 1.25G(1 个单位ÿ…...
Spring Boot(6)解决ruoyi框架连续快速发送post请求时,弹出“数据正在处理,请勿重复提交”提醒的问题
一、整个前言 在基于 Ruoyi 框架进行系统开发的过程中,我们常常会遇到各种有趣且具有挑战性的问题。今天,我们就来深入探讨一个在实际开发中较为常见的问题:当连续快速发送 Post 请求时,前端会弹出 “数据正在处理,请…...
【开源免费】基于Vue和SpringBoot的常规应急物资管理系统(附论文)
本文项目编号 T 159 ,文末自助获取源码 \color{red}{T159,文末自助获取源码} T159,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...
差分进化算法 (Differential Evolution) 算法详解及案例分析
差分进化算法 (Differential Evolution) 算法详解及案例分析 目录 差分进化算法 (Differential Evolution) 算法详解及案例分析1. 引言2. 差分进化算法 (DE) 算法原理2.1 基本概念2.2 算法步骤3. 差分进化算法的优势与局限性3.1 优势3.2 局限性4. 案例分析4.1 案例1: 单目标优化…...
优选算法——哈希表
目录 1. 哈希表简介 2. 两数之和 3. 判定是否为字符重排 4. 存在重复元素 5. 字母异位词分组 1. 哈希表简介 2. 两数之和 题目链接:1. 两数之和 - 力扣(LeetCode) 题目展示: 题目分析: 大家来看上面的图&…...
【前端SEO】使用Vue.js + Nuxt 框架构建服务端渲染 (SSR) 应用满足SEO需求
Nuxt.js 是一个基于 Vue.js 的通用应用框架,它简化了使用 Vue 构建服务端渲染 (SSR) 应用的流程。除了 SSR 之外,Nuxt.js 还支持静态站点生成(Static Site Generation, SSG),渐进式网络应用(Progressive We…...
AI学习指南Ollama篇-Ollama简介
一、定义 大语言模型(LLM)是一种基于深度学习的自然语言处理模型,能够生成文本、回答问题、翻译语言、撰写代码等。这些模型通过海量的文本数据进行训练,学习语言的模式和结构,从而能够生成自然流畅的文本内容。随着技术的不断进步,大语言模型在各个领域都展现出了巨大的…...
Python从0到100(八十五):神经网络与迁移学习在猫狗分类中的应用
在人工智能的浩瀚宇宙中,深度学习犹如一颗璀璨的星辰,引领着机器学习和计算机视觉领域的前沿探索。而神经网络,作为深度学习的核心架构,更是以其强大的数据建模能力,成为解决复杂问题的重要工具。今天,我们…...
《最优化理论基础》8课时层次化教案
《最优化理论基础》8课时层次化教案 课程总目标 掌握最优化核心理论(最优性条件、凸分析、对偶理论);能独立实现经典优化算法(梯度法、牛顿法、约束优化建模);理解优化理论与机器学习模型的关联ÿ…...
从源码深入理解One-API框架:适配器模式实现LLM接口对接
1. 概述 one-api 是一个开源的 API 框架,基于go语言开发,旨在提供统一的接口调用封装,支持多种 AI 服务平台的集成。通过 Gin 和 GORM 等框架,框架简化了多种 API 服务的调用流程。通过适配器模式实现了与多种 大模型API 服务的集…...
2025年国产化推进.NET跨平台应用框架推荐
2025年国产化推进.NET跨平台应用框架推荐 1. .NET MAUI NET MAUI是一个开源、免费(MIT License)的跨平台框架(支持Android、iOS、macOS 和 Windows多平台运行),是 Xamarin.Forms 的进化版,从移动场景扩展到…...
Tensor 基本操作4 理解 indexing,加减乘除和 broadcasting 运算 | PyTorch 深度学习实战
前一篇文章,Tensor 基本操作3 理解 shape, stride, storage, view,is_contiguous 和 reshape 操作 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started Tensor 基本使用 索引 indexing示例代码 加减…...
图扑 2024 全年精彩回顾 | 稳步向前
2024 年即将过去,回顾这一年,图扑软件在多个领域取得了显著成就,我们斩获多项行业奖项,稳步提升了市场地位,并在产品创新上推出了一系列新功能,提升了用户体验。与此同时,通过与合作伙伴紧密协作…...
[Python学习日记-79] socket 开发中的粘包现象(解决模拟 SSH 远程执行命令代码中的粘包问题)
[Python学习日记-79] socket 开发中的粘包现象(解决模拟 SSH 远程执行命令代码中的粘包问题) 简介 粘包问题底层原理分析 粘包问题的解决 简介 在Python学习日记-78我们留下了两个问题,一个是服务器端 send() 中使用加号的问题,…...
【数据结构】深入解析:构建父子节点树形数据结构并返回前端
树形数据结构列表 一、前言二、测试数据生成三、树形代码3.1、获取根节点3.2、遍历根节点,递归获取所有子节点3.3、排序3.4、完整代码 一、前言 返回前端VO对象中,有列情况列表展示需要带树形结构,例如基于RBAC权限模型中的菜单返回…...
【统计的思想】假设检验(二)
假设检验是根据人为设定的显著水平,对被测对象的总体质量特性进行统计推断的方法。 如果我们通过假设检验否定了零假设,只是说明在设定的显著水平下,零假设成立的概率比较小,并不是说零假设就肯定不成立。如果零假设事实上是成立…...
IT服务规划设计
1. IT服务设计的作用 1) 设计满足需求的IT服务。 2) 设计SAL,测量方法和指标。 3) 设计服务过程及控制方法。...
高效查找:二分查找算法解析
1.二分查找简介 二分查找算法(Binary Search)是一种高效的查找算法,适用于有序数组或序列。它的基本思想是通过逐步缩小查找范围,将查找区间一分为二,直到找到目标值或确定目标值不存在。 算法原理:在数组…...
电脑办公技巧之如何在 Word 文档中添加文字或图片水印
Microsoft Word是全球最广泛使用的文字处理软件之一,它为用户提供了丰富的编辑功能来美化和保护文档。其中,“水印”是一种特别有用的功能,它可以用于标识文档状态(如“草稿”或“机密”)、公司标志或是版权信息等。本…...
我的求职之路合集
我把我秋招和春招的一些笔面试经验在这里发一下,网友们也可以参考一下。 我的求职之路:(1)如何谈自己的缺点 我的求职之路:(2)找工作时看重的点 我的求职之路:(3&…...
FPGA自分频产生的时钟如何使用?
对于频率比较小的时钟,使用clocking wizard IP往往不能产生,此时就需要我们使用代码进行自分频,自分频产生的时钟首先应该经过BUFG处理,然后还需要进行时钟约束,处理之后才能使用。...
【2025最新计算机毕业设计】基于SpringBoot+Vue爬虫技术的咖啡与茶饮料文化平台(高质量源码,可定制,提供文档,免费部署到本地)
作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...
jmeter中对接口进行循环请求后获取相应数据
1、工作中遇到一个场景就是对某个单一接口进行循环请求,并需要获取每次请求后返回的相应数据; 2、首先就在jmeter对接口相关组件进行配置,需要组件有:循环控制器、CSV数据文件设置、计数器、访问接口、HTTP信息头管理器、正则表达…...
RocketMQ 怎么保证消息的可靠性?
目录 1. 消息发送可靠性 1.1 同步发送 1.2 异步发送 1.3 发送重试 1.4 事务消息 2. 消息存储可靠性 2.1 CommitLog 持久化 2.2 刷盘机制 2.3 主从复制 2.4 消息索引 3. 消息消费可靠性 3.1 消费确认机制 3.2 消费重试机制 3.3 消费位点管理 3.4 集群消费与广播消…...
基于 Node.js 的天气查询系统实现(附源码)
项目概述 这是一个基于 Node.js 的全栈应用,前端使用原生 JavaScript 和 CSS,后端使用 Express 框架,通过调用第三方天气 API 实现天气数据的获取和展示。 主要功能 默认显示多个主要城市的天气信息 支持城市天气搜索 响应式布局设计 深色主题界面 优雅的加载动画 技术栈 …...
C++函数初识
文章目录 一、形参带默认值的函数二、inline内联函数三、函数重载 一、形参带默认值的函数 给默认值的时候,从右向左给;调用效率的问题;定义处可以给形参默认值,声明也可以给形参默认值;形参给默认值的时候࿰…...
代码随想录day3
203:移除链表元素:注意虚拟头节点的使用 ListNode* removeElements(ListNode* head, int val) {ListNode* result new ListNode();result->next head;ListNode* current result;while(current ! nullptr && current->next ! nullptr){if(current-…...
论文+AI赋能教育:探索变革路径与创新实践。包括word和pdf格式。
下载地址链接: https://download.csdn.net/download/wanggang130532/90292129https://download.csdn.net/download/wanggang130532/90292129...
ray.rllib 入门实践-5: 训练算法
前面的博客介绍了ray.rllib中算法的配置和构建,也包含了算法训练的代码。 但是rllib中实现算法训练的方式不止一种,本博客对此进行介绍。很多教程使用 PPOTrainer 进行训练,但是 PPOTrainer 在最近的 ray 版本中已经取消了。 方式1࿱…...
uniapp 在线更新应用
在线更新应用及进度条显示 1.比较现安装手机中的apk 与线上apk的版本 getVersion(){var newVersionuni.getStorageSync("newVersion").split(".")var versionplus.runtime.version.split(".") // 获取手机安装的版本var versionNum""…...
中间件安全
一.中间件概述 1.中间件定义 介绍:中间件(Middleware)作为一种软件组件,在不同系统、应用程序或服务间扮演着数据与消息传递的关键角色。它常处于应用程序和操作系统之间,就像一座桥梁,负责不同应用程序间…...
从根源分析,调试,定位和解决MacOS ld: unsupported tapi file type ‘!tapi-tbd‘ in YAML file
你要是遇到同样错误,找一圈都没有解决,建议认真读一下本文,这个应该是最终极的解决办法,从原理上剖析了产生的原因,同时给出来了调试和定位的办法。 maccos使用brew安装了一个gcc14, 结果编译一个最简单的程序都报错&a…...
Linux的权限和一些shell原理
目录 shell的原理 Linux权限 sudo命令提权 权限 文件的属性 ⽂件类型: 基本权限: chmod改权限 umask chown 该拥有者 chgrp 改所属组 最后: 目录权限 粘滞位 shell的原理 我们广义上的Linux系统 Linux内核Linux外壳 Linux严格…...
构建企业级React应用的进阶实践
构建企业级React应用的进阶实践 在当今前端开发领域,React凭借其组件化架构和声明式编程范式,已成为构建复杂用户界面的首选方案。本文将深入探讨React的高级应用场景,通过一系列精心设计的代码示例,展示如何打造高性能、可维护的…...
2024年度总结:技术探索与个人成长的交织
文章目录 前言年度创作回顾:技术深耕与分享数据库技术:MySQL 与 MyBatisJava 及相关技术栈计算机网络:构建网络知识体系思维方式的转变:构建技术知识体系的桥梁 项目实践:人工智能与智慧医疗的碰撞生活与博客的融合与平…...
mysql-06.JDBC
目录 什么是JDBC: 为啥存在JDBC: JDBC工作原理: JDBC的优势: 下载mysql驱动包: 用java程序操作数据库 1.创建dataSource: 2.与服务端建立连接 3.构造sql语句 4.执行sql 5.关闭连接,释放资源 参考代码: 插…...
arm-linux平台、rk3288 SDL移植
一、所需环境资源 1、arm-linux交叉编译器,这里使用的是gcc-linaro-6.3.1 2、linux交叉编译环境,这里使用的是Ubuntu 20.04 3、sdl2源码 https://github.com/libsdl-org/SDL/archive/refs/tags/release-2.30.11.tar.gz 二、代码编译 1、解压sdl2源码…...
CentOS 上安装 Go (Golang)
1. 检查系统环境 确保系统为 CentOS 7 或 CentOS 8,或者其他兼容的 Linux 发行版。 cat /etc/os-release2. 安装依赖 安装一些必要的工具: sudo yum update -y sudo yum install -y wget tar3. 下载 Go 从 Go 官方下载页面获取适用于 Linux 的最新版…...
小哆啦解题记:整数转罗马数字
小哆啦解题记:整数转罗马数字 小哆啦开始力扣每日一题的第十四天 https://leetcode.cn/problems/integer-to-roman/submissions/595220508/ 第一章:神秘的任务 一天,哆啦A梦接到了一项任务——将一个整数转换为罗马数字。他心想:…...
碰撞体问题
用点检测2d物体是否有物体 功能要求是点击空白处取消选中,点击棋子选中所以我做了一个射线检测。但是脑子的惯性让我用的是3D的射线检测。但我们这是一个2D游戏啊。 Vector3 mousePos pos;mousePos.z 10f; // 假设你需要转换到距离相机10单位的世界位置Vector3 …...
HTML<label>标签
例子 三个带标签的单选按钮: <form action"/action_page.php"> <input type"radio" id"html" name"fav_language" value"HTML"> <label for"html">HTML</label><br&…...
「 机器人 」利用数据驱动模型替代仿真器:加速策略训练并降低硬件依赖
前言 在强化学习(Reinforcement Learning, RL)中,策略训练需要大量的交互数据(状态、动作、奖励、下一状态),而这些数据通常来自仿真器或真实硬件。传统高保真仿真器虽然能在一定程度上模拟飞行器的动力学,但往往计算量大、开发成本高,且仍可能与真实环境存在差距。为此…...