当前位置: 首页 > news >正文

鸿蒙OSUniApp制作一个小巧的图片浏览器#三方框架 #Uniapp

利用UniApp制作一个小巧的图片浏览器

最近接了个需求,要求做一个轻量级的图片浏览工具,考虑到多端适配的问题,果断选择了UniApp作为开发框架。本文记录了我从0到1的开发过程,希望能给有类似需求的小伙伴一些参考。

前言

移动互联网时代,图片已成为人们日常生活中不可或缺的内容形式。无论是社交媒体还是工作沟通,我们每天都会接触大量图片。因此,一个好用的图片浏览器对用户体验至关重要。

UniApp作为一个使用Vue.js开发所有前端应用的框架,可以实现一套代码、多端运行(iOS、Android、H5、小程序等),是开发跨平台应用的理想选择。今天我就分享一下如何使用UniApp开发一个小巧但功能完善的图片浏览器。

开发环境准备

首先,我们需要搭建UniApp的开发环境:

  1. 安装HBuilderX(官方IDE)
  2. 创建UniApp项目
  3. 配置基础项目结构
# 如果使用CLI方式创建项目
npx @vue/cli create -p dcloudio/uni-preset-vue my-image-browser

项目结构设计

为了保持代码的可维护性,我将项目结构设计如下:

├── components            # 组件目录
│   ├── image-previewer   # 图片预览组件
│   └── image-grid        # 图片网格组件
├── pages                 # 页面
│   ├── index             # 首页
│   └── detail            # 图片详情页
├── static                # 静态资源
├── utils                 # 工具函数
└── App.vue、main.js等    # 项目入口文件

核心功能实现

1. 图片网格列表

首先实现首页的图片网格列表,这是用户进入应用的第一个界面:

<template><view class="container"><view class="header"><text class="title">图片浏览器</text></view><view class="image-grid"><view class="image-item" v-for="(item, index) in imageList" :key="index"@tap="previewImage(index)"><image :src="item.thumb || item.url" mode="aspectFill"lazy-load></image></view></view><view class="loading" v-if="loading"><text>加载中...</text></view></view>
</template><script>
export default {data() {return {imageList: [],page: 1,loading: false}},onLoad() {this.loadImages()},// 下拉刷新onPullDownRefresh() {this.page = 1this.imageList = []this.loadImages(() => {uni.stopPullDownRefresh()})},// 上拉加载更多onReachBottom() {this.loadImages()},methods: {// 加载图片数据loadImages(callback) {if (this.loading) returnthis.loading = true// 这里可以替换为实际的API请求setTimeout(() => {// 模拟API返回数据const newImages = Array(10).fill(0).map((_, i) => ({id: this.imageList.length + i + 1,url: `https://picsum.photos/id/${this.page * 10 + i}/500/500`,thumb: `https://picsum.photos/id/${this.page * 10 + i}/200/200`}))this.imageList = [...this.imageList, ...newImages]this.page++this.loading = falsecallback && callback()}, 1000)},// 预览图片previewImage(index) {const urls = this.imageList.map(item => item.url)uni.previewImage({urls,current: urls[index]})}}
}
</script><style>
.container {padding: 20rpx;
}.header {height: 80rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx;
}.title {font-size: 36rpx;font-weight: bold;
}.image-grid {display: flex;flex-wrap: wrap;
}.image-item {width: 33.33%;padding: 5rpx;box-sizing: border-box;
}.image-item image {width: 100%;height: 220rpx;border-radius: 8rpx;
}.loading {text-align: center;margin: 30rpx 0;color: #999;
}
</style>

这段代码实现了图片瀑布流展示、下拉刷新和上拉加载更多功能。我使用了懒加载技术来优化性能,同时使用缩略图先加载,提升用户体验。

2. 自定义图片预览组件

虽然UniApp内置了图片预览功能,但为了实现更丰富的交互和动画效果,我决定自己封装一个图片预览组件:

<template><viewclass="image-previewer"v-if="visible"@touchstart="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd"><view class="previewer-header"><text class="counter">{{ current + 1 }}/{{ images.length }}</text><view class="close" @tap="close">×</view></view><swiperclass="swiper":current="current"@change="handleChange":circular="true"><swiper-item v-for="(item, index) in images" :key="index"><movable-area class="movable-area"><movable-viewclass="movable-view":scale="item.scale":scale-min="1":scale-max="4":scale-value="item.scale"direction="all"@scale="handleScale($event, index)"@change="handleMoveChange"><image:src="item.url"mode="widthFix"@load="imageLoaded(index)"></image></movable-view></movable-area></swiper-item></swiper><view class="previewer-footer"><view class="save-btn" @tap="saveImage">保存图片</view></view></view>
</template><script>
export default {name: 'ImagePreviewer',props: {urls: {type: Array,default: () => []},current: {type: Number,default: 0},visible: {type: Boolean,default: false}},data() {return {images: [],startY: 0,moveY: 0,moving: false}},watch: {urls: {handler(val) {this.images = val.map(url => ({url,scale: 1,loaded: false}))},immediate: true}},methods: {handleChange(e) {this.$emit('update:current', e.detail.current)},imageLoaded(index) {this.$set(this.images[index], 'loaded', true)},handleScale(e, index) {this.$set(this.images[index], 'scale', e.detail.scale)},handleMoveChange() {// 处理图片拖动事件},handleTouchStart(e) {this.startY = e.touches[0].clientY},handleTouchMove(e) {if (this.images[this.current].scale > 1) returnthis.moveY = e.touches[0].clientY - this.startYif (this.moveY > 0) {this.moving = true}},handleTouchEnd() {if (this.moving && this.moveY > 100) {this.close()}this.moving = falsethis.moveY = 0},close() {this.$emit('close')},saveImage() {const url = this.images[this.current].url// 先下载图片到本地uni.downloadFile({url,success: (res) => {// 保存图片到相册uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: () => {uni.showToast({title: '保存成功',icon: 'success'})},fail: () => {uni.showToast({title: '保存失败',icon: 'none'})}})}})}}
}
</script><style>
.image-previewer {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #000;z-index: 999;display: flex;flex-direction: column;
}.previewer-header {height: 88rpx;display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx;
}.counter {color: #fff;font-size: 28rpx;
}.close {color: #fff;font-size: 60rpx;line-height: 1;
}.swiper {flex: 1;width: 100%;
}.movable-area {width: 100%;height: 100%;
}.movable-view {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;
}.movable-view image {width: 100%;
}.previewer-footer {height: 100rpx;display: flex;align-items: center;justify-content: center;
}.save-btn {color: #fff;font-size: 28rpx;padding: 10rpx 30rpx;border-radius: 30rpx;background-color: rgba(255, 255, 255, 0.2);
}
</style>

这个组件实现了以下功能:

  • 图片切换(使用swiper组件)
  • 图片缩放(movable-view的scale属性)
  • 向下滑动关闭预览
  • 保存图片到本地相册

3. 添加图片相册功能

为了增强应用的实用性,我们来添加一个相册分类功能:

<template><view class="album"><view class="tabs"><view class="tab-item" v-for="(item, index) in albums" :key="index":class="{ active: currentAlbum === index }"@tap="switchAlbum(index)"><text>{{ item.name }}</text></view></view><view class="content"><view class="album-info"><text class="album-name">{{ albums[currentAlbum].name }}</text><text class="album-count">{{ imageList.length }}张照片</text></view><view class="image-grid"><view class="image-item" v-for="(item, index) in imageList" :key="index"@tap="previewImage(index)"><image :src="item.thumb || item.url" mode="aspectFill"lazy-load></image></view></view></view></view>
</template><script>
export default {data() {return {albums: [{ id: 1, name: '风景' },{ id: 2, name: '人物' },{ id: 3, name: '动物' },{ id: 4, name: '植物' }],currentAlbum: 0,imageList: []}},onLoad() {this.loadAlbumImages()},methods: {switchAlbum(index) {if (this.currentAlbum === index) returnthis.currentAlbum = indexthis.loadAlbumImages()},loadAlbumImages() {const albumId = this.albums[this.currentAlbum].id// 模拟加载不同相册的图片uni.showLoading({ title: '加载中' })setTimeout(() => {// 模拟API返回数据this.imageList = Array(15).fill(0).map((_, i) => ({id: i + 1,url: `https://picsum.photos/seed/${albumId * 100 + i}/500/500`,thumb: `https://picsum.photos/seed/${albumId * 100 + i}/200/200`}))uni.hideLoading()}, 800)},previewImage(index) {const urls = this.imageList.map(item => item.url)uni.previewImage({urls,current: urls[index]})}}
}
</script><style>
.album {display: flex;flex-direction: column;height: 100vh;
}.tabs {display: flex;height: 80rpx;border-bottom: 1rpx solid #eee;
}.tab-item {flex: 1;display: flex;align-items: center;justify-content: center;position: relative;
}.tab-item.active {color: #007AFF;
}.tab-item.active::after {content: '';position: absolute;bottom: 0;left: 25%;width: 50%;height: 4rpx;background-color: #007AFF;
}.content {flex: 1;padding: 20rpx;
}.album-info {margin-bottom: 20rpx;
}.album-name {font-size: 36rpx;font-weight: bold;
}.album-count {font-size: 24rpx;color: #999;margin-left: 20rpx;
}.image-grid {display: flex;flex-wrap: wrap;
}.image-item {width: 33.33%;padding: 5rpx;box-sizing: border-box;
}.image-item image {width: 100%;height: 220rpx;border-radius: 8rpx;
}
</style>

性能优化

开发过程中,我注意到一些性能问题,特别是图片加载较慢的情况,因此做了以下优化:

  1. 懒加载:使用lazy-load属性延迟加载图片
  2. 缩略图预加载:先加载小图,再加载大图
  3. 图片压缩:在上传和展示时进行适当压缩
// 图片压缩工具函数
export function compressImage(src, quality = 80) {return new Promise((resolve, reject) => {uni.compressImage({src,quality,success: res => {resolve(res.tempFilePath)},fail: err => {reject(err)}})})
}
  1. 虚拟列表:当图片数量很多时,考虑使用虚拟列表技术

踩坑记录

开发过程中遇到了一些坑,在此记录,希望能帮助到大家:

  1. 兼容性问题:H5和App表现一致,但在小程序中movable-view的缩放效果不太理想,需要针对不同平台做兼容处理
  2. 图片预览:小程序的图片预览API不支持长按保存,需要自己实现
  3. 内存问题:加载大量高清图片容易导致内存占用过高,需要做好图片资源管理

总结

通过这个项目,我实现了一个简单但功能完善的图片浏览器。UniApp的跨平台能力确实令人印象深刻,一套代码能够同时运行在多个平台上,大大提高了开发效率。

当然,这个应用还有很多可以改进的地方,比如添加图片滤镜、优化动画效果、增加云存储功能等。希望这篇文章对你有所帮助,有任何问题欢迎在评论区留言讨论!

参考资料

  1. UniApp官方文档
  2. Vue.js指南

相关文章:

鸿蒙OSUniApp制作一个小巧的图片浏览器#三方框架 #Uniapp

利用UniApp制作一个小巧的图片浏览器 最近接了个需求&#xff0c;要求做一个轻量级的图片浏览工具&#xff0c;考虑到多端适配的问题&#xff0c;果断选择了UniApp作为开发框架。本文记录了我从0到1的开发过程&#xff0c;希望能给有类似需求的小伙伴一些参考。 前言 移动互联…...

Java并发编程面试题:并发工具类(10题)

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…...

【Oracle专栏】扩容导致数据文件 dbf 丢失,实操

Oracle相关文档,希望互相学习,共同进步 风123456789~-CSDN博客 1.背景 同事检查扩容情况,发现客户扩容后数据盘后,盘中原有文件丢失,再检查发现数据库没有启动。通过检查发现数据盘中丢失的是oracle的 dbf 表空间文件。数据库无法启动。 检查情况:1)没有rman备份 …...

【Linux】Linux 的管道与重定向的理解

目录 一、了解Linux目录配置标准FHS 二、Linux数据重定向的理解与操作 2.1基本背景 2.2重定向的理解 2.3Linux管道命令的理解与操作 三、Linux 环境变量与PATH 3.1环境变量PATH 一、了解Linux目录配置标准FHS FHS本质&#xff1a;是一套规定Linux目录结构&#xff0c;软…...

【交互 / 差分约束】

题目 代码 #include <bits/stdc.h> using namespace std; using ll long long;const int N 10510; const int M 200 * 500 10; int h[N], ne[M], e[M], w[M], idx; ll d[N]; int n, m; bool st[N]; int cnt[N];void add(int a, int b, int c) {w[idx] c, e[idx] b…...

1. Go 语言环境安装

&#x1f451; 博主简介&#xff1a;高级开发工程师 &#x1f463; 出没地点&#xff1a;北京 &#x1f48a; 人生目标&#xff1a;自由 ——————————————————————————————————————————— 版权声明&#xff1a;本文为原创文章&#xf…...

灰度图像和RGB图像在数据大小和编码处理方式差别

技术背景 好多开发者对灰度图像和RGB图像有些认知差异&#xff0c;今天我们大概介绍下二者差别。灰度图像&#xff08;Grayscale Image&#xff09;和RGB图像在编码处理时&#xff0c;数据大小和处理方式的差别主要体现在以下几个方面&#xff1a; 1. 通道数差异 图像类型通道…...

Lord Of The Root: 1.0.1通关

Lord Of The Root: 1.0.1 来自 <Lord Of The Root: 1.0.1 ~ VulnHub> 1&#xff0c;将两台虚拟机网络连接都改为NAT模式 2&#xff0c;攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182&#xff0c;靶场IP192.168.23.247 3&…...

虚拟机安装CentOS7网络问题

虚拟机安装CentOS7网络问题 1. 存在的问题1.1 CentOS7详细信息 2. 解决问题3.Windows下配置桥接模式 1. 存在的问题 虽然已经成功在虚拟机上安装了CentOS7&#xff0c;但是依旧不能上网。 1.1 CentOS7详细信息 [fanzhencentos01 ~]$ hostnamectlStatic hostname: centos01Ic…...

AI-02a5a6.神经网络-与学习相关的技巧-批量归一化

批量归一化 Batch Normalization 设置合适的权重初始值&#xff0c;则各层的激活值分布会有适当的广度&#xff0c;从而可以顺利的进行学习。那么&#xff0c;更进一步&#xff0c;强制性的调整激活值的分布&#xff0c;是的各层拥有适当的广度呢&#xff1f;批量归一化&#…...

matlab实现蚁群算法解决公交车路径规划问题

使用蚁群算法解决公交车路径规划问题的MATLAB代码实现&#xff0c;包含详细注释和仿真流程。该算法以站点间行驶时间或距离为优化目标&#xff0c;寻找最优公交路线。 1. 问题建模与参数设置 1.1 输入数据 站点坐标&#xff1a;假设有20个公交站点&#xff0c;随机生成位置。…...

Agent Builder API - Agent Smith 扩展的后端服务(开源代码)

​一、软件介绍 文末提供程序和源码下载 Agent Builder API - Agent Smith 扩展的后端服务&#xff08;开源代码&#xff09;手动设置&#xff1a;在本地计算机中克隆此存储库并启动 python FAST API 服务器。&#xff08;可选&#xff09;安装并设置 Mongo DB。Dev Container…...

C++类和对象之相关特性

C 一.类型转换隐式类型转换 二.static成员一、static成员变量二、static成员函数三、static成员的存储位置四、总结 三.友元一、友元函数二、友元类三、友元成员函数四、总结 四.内部类五.匿名对象六.new 一.类型转换 在C中&#xff0c;类类型转换是指将一个类的对象转换为另一…...

容器编排的革命:Kubernetes如何引领IT的云原生时代

文章目录 Kubernetes的本质&#xff1a;容器世界的智能指挥家Kubernetes的核心功能包括&#xff1a; Kubernetes的演进&#xff1a;从谷歌的实验到全球标准核心技术&#xff1a;Kubernetes的基石与生态1. Pod与容器&#xff1a;最小调度单位2. Deployment&#xff1a;无状态应用…...

2025视频协作工具全景解析:技术跃迁与场景重构

一、技术演进:从功能工具到智能生态 2025年视频协作软件的核心竞争力已从基础功能升级为技术生态的构建。以分秒帧为例,其音视频生产协作系统,可帮助创作者在云端构建工作流,让跨地域、跨终端、跨团队的协作组可以在统一的安全平台上管理所有媒体资源、任务、反馈信息,从而更高…...

保持视频二维码不变,更新视频的内容

视频替换功能允许用户在保持视频二维码、观看地址和调用代码不变的情况下更新视频内容&#xff0c;从而节省重新印刷物料的成本。这一功能适用于多种场景&#xff0c;如营销宣传、产品操作手册、设备说明书等&#xff0c;当视频内容需要修改或更新时&#xff0c;用户只需上传新…...

Linux常用命令40——alias设置命令别名

在使用Linux或macOS日常开发中&#xff0c;熟悉一些基本的命令有助于提高工作效率&#xff0c;alias命令来自英文单词alias&#xff0c;中文译为“别名”&#xff0c;其功能是设置命令别名信息。我们可以使用alias将一些较长的命令进行简写&#xff0c;往往几十个字符的命令会变…...

Java大师成长计划之第22天:Spring Cloud微服务架构

&#x1f4e2; 友情提示&#xff1a; 本文由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;平台gpt-4o-mini模型辅助创作完成&#xff0c;旨在提供灵感参考与技术分享&#xff0c;文中关键数据、代码与结论建议通过官方渠道验证。 随着企业应用的不断扩展&#xff0c…...

为什么go语言中返回的指针类型,不需要用*取值(解引用),就可以直接赋值呢?

Go 中返回的是指针&#xff0c;但你却能直接用“.”访问字段&#xff0c;看起来像是“没有解引用”&#xff0c;其实是 Go 帮你自动处理了“指针解引用”的语法糖。 在 Go 中&#xff0c;如果你有一个结构体指针&#xff08;例如 *FileMeta&#xff09;&#xff0c;你可以直接…...

Java生成可控的Word表格功能开发

在日常办公自动化与系统集成场景中,生成结构化的Word文档已成为一种刚性需求,尤其是带有格式规范、内容动态填充的Word表格(Table)。本文将围绕如何利用Java开发一个可控的Word表格生成功能模块展开,涵盖技术选型、代码实现、边界控制与常见问题处理等方面,帮助开发者快速…...

OpenCV CUDA 模块中用于在 GPU 上计算矩阵中每个元素的绝对值或复数的模函数abs()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 void cv::cuda::abs(InputArray src, OutputArray dst, Stream &stream Stream::Null()) 是 OpenCV 的 CUDA 模块中的一个函数&#xff0c;…...

hadoop知识点

&#xff08;一&#xff09;复制和移动 1.复制文件 格式&#xff1a;cp源文件 目标文件 示例&#xff1a;把filel.txt复制一份得到file2.txt 2.复制目录 格式&#xff1a;cp-r源文件夹 目标文件夹 示例&#xff1a;把目标dir1复制一份得到dir2 3.重命名和移动 格式&#xff1a;…...

最短路与拓扑(2)

1、信使 #include<bits/stdc.h> using namespace std; const int N105; int n,m; int g[N][N]; int dist[N]; bool st[N]; const int INF0x3f3f3f3f;int dij(){memset(dist,0x3f,sizeof dist);dist[1]0;for(int i1;i<n;i){int t0;for(int j1;j<n;j){if(!st[j]&…...

LLaMA-Factory 微调 Qwen2-7B-Instruct

一、系统环境 使用的 autoDL 算力平台 1、下载基座模型 pip install -U huggingface_hub export HF_ENDPOINThttps://hf-mirror.com # &#xff08;可选&#xff09;配置 hf 国内镜像站huggingface-cli download --resume-download shenzhi-wang/Llama3-8B-Chinese-Chat -…...

濒危仙草的重生叙事:九仙尊米斛花节如何以雅集重构中医药文化IP

五月的霍山深处,层峦叠翠之间,中华仙草霍山米斛迎来一年一度的花期。九仙尊以“斛韵雅集,春野茶会”为主题,举办为期半月的米斛花文化节,融合中医药文化、东方美学与自然体验,打造一场跨越古今的沉浸式文化盛宴。活动涵盖古琴雅集、书法创作、茶道冥想、诗歌吟诵、民族歌舞等多…...

Pomelo知识框架

一、Pomelo 基础概念 Pomelo 简介 定位&#xff1a;分布式游戏服务器框架&#xff08;网易开源&#xff09;。 特点&#xff1a;高并发、可扩展、多进程架构、支持多种通信协议&#xff08;WebSocket、TCP等&#xff09;。 适用场景&#xff1a;MMO RPG、实时对战、社交游戏等…...

歌词滚动效果

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><!-- 设置标签页图标 --><link rel"shortcut icon&…...

python如何合并excel单元格

在Python中合并Excel单元格&#xff0c;常用openpyxl库实现。以下是详细步骤和示例代码&#xff1a; 方法一&#xff1a;使用 openpyxl 库 步骤说明&#xff1a; 安装库&#xff1a; pip install openpyxl导入库并加载文件&#xff1a; from openpyxl import load_workbook# …...

嵌入式学习笔记 D20 :单向链表的基本操作

单向链表的创建单向链表的插入单向链表的删除及清空单向链表的修改单向链表的查找单向链表的逆序 一、单向链表的创建 LinkList *CreateLinkList() {LinkList *ll malloc(sizeof(LinkList));if (NULL ll) {fprintf(stderr, "CreateLink malloc");return NULL;}ll…...

瀑布模型VS敏捷模型VS喷泉模型

​目录 ​​1. 瀑布模型(Waterfall Model)​​ ​​2. 敏捷模型(Agile Model)​​ ​​3. 喷泉模型(Fountain Model)​​...

Android usb网络共享详解

Android usb网络共享详解 文章目录 Android usb网络共享详解一、前言二、USB网络共享使用的前提1、Android设备支持adb 并且打开usb开关2、原生Settings能看到USB网络共享开关3、代码中检测USB网络共享是否支持 三、Settings 中USB网络共享代码的部分代码1、Settings\res\xml\t…...

在线黑白图像转换:简单却强大的视觉表达工具

为什么选择黑白图像&#xff1f; 在这个色彩缤纷的数字世界中&#xff0c;黑白摄影却始终保持着其独特的魅力。黑白图像消除了色彩的干扰&#xff0c;让我们更专注于构图、纹理和形式的表达。这种经典的转换技术能够创造出富有情感和强烈对比的视觉作品&#xff0c;呈现出彩色…...

python 异步执行测试

1. 并行执行机制 子进程级并行&#xff1a;通过 asyncio.create_subprocess_exec 启动的每个外部命令&#xff08;如 python run_spider.py&#xff09;会创建一个独立的系统进程&#xff0c;由操作系统直接调度&#xff0c;实现真正的并行执行。 协程级并发&#xff1a;主程序…...

《Python星球日记》 第69天:生成式模型(GPT 系列)

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、GPT简介&#xff1a;从架构到原理1. GPT的架构与工作原理2. Decoder-only结…...

STM32 之网口资源

1 网口资源介绍 STM32F407 是 STMicroelectronics 推出的高性能 ARM Cortex-M4 微控制器&#xff0c;具备多种外设接口&#xff0c;其中包括一个 Ethernet MAC 控制器&#xff08;带 IEEE 1588 支持&#xff09;。这意味着你可以使用 STM32F407 实现网络通信功能&#xff08;通…...

一分钟在Cherry Studio和VSCode集成火山引擎veimagex-mcp

MCP的出现打通了AI模型和外部数据库、网页API等资源&#xff0c;成倍提升工作效率。近期火山引擎团队推出了 MCP Server SDK&#xff1a; veimagex-mcp。本文介绍如何在Cherry Studio 和VSCode平台集成 veimagex-mcp。 什么是MCP MCP&#xff08;Model Context Protocol&…...

业务中台-典型技术栈选型(微服务、容器编排、分布式数据库、消息队列、服务监控、低代码等)

在企业数字化中台建设中&#xff0c;业务中台是核心支撑平台&#xff0c;旨在通过技术手段将企业核心业务能力抽象、标准化和复用&#xff0c;以快速响应前端业务需求。其核心技术流涉及从业务抽象到服务化、治理和持续优化的全流程。以下是业务中台建设中的核心技术体系及关键…...

图像颜色理论与数据挖掘应用的全景解析

文章目录 一、图像颜色系统的理论基础1.1 图像数字化的本质逻辑1.2 颜色空间的数学框架1.3 量化过程的技术原理 二、主要颜色空间的深度解析2.1 RGB颜色空间的加法原理2.2 HSV颜色空间的感知模型2.3 CMYK颜色空间的减色原理 三、图像几何属性与高级特征3.1 分辨率与像素密度的关…...

从规则驱动到深度学习:自然语言生成的进化之路

自然语言生成技术正经历着人类文明史上最剧烈的认知革命。这项起源于图灵测试的技术&#xff0c;已经从简单的符号操作演变为具备语义理解能力的智能系统。当我们回溯其发展历程&#xff0c;看到的不仅是算法模型的迭代更新&#xff0c;更是一部人类认知自我突破的史诗。这场革…...

影刀RPA网页自动化总结

1. 影刀RPA网页自动化概述 1.1 定义与核心功能 影刀RPA网页自动化是一种通过软件机器人模拟人类操作网页行为的技术&#xff0c;旨在提高网页操作效率、减少人工干预。其核心功能包括&#xff1a; 网页数据抓取&#xff1a;能够高效抓取网页上的数据&#xff0c;如电商数据、…...

[:, :, 1]和[:, :, 0] 的区别; `prompt_vector` 和 `embedding_matrix`的作用

prompt_vector = torch.sum(prompt_embedding * attention_weights.unsqueeze(-1), dim=1) # [1, hidden_dim] prompt_vector = torch.sum(prompt_embedding * attention_weights.unsqueeze(-1), dim=1) 主要作用是通过将 prompt_embedding 与 attention_weights 相乘后再按指…...

LeetCode 题解 41. 缺失的第一个正数

41. 缺失的第一个正数 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 解释&#xff1a;范围 [1,…...

3337. 字符串转换后的长度 II

3337. 字符串转换后的长度 II # 定义了一个大质数 MOD&#xff0c;用于取模运算&#xff0c;防止数值溢出。 MOD 1_000_000_007# 矩阵乘法 mul def mul(a:List[List[int]], b:List[List[int]]) -> List[List[int]]:# 输入两个矩阵 a 和 b&#xff0c;返回它们的矩阵乘积 a…...

基于 TensorFlow 框架的联邦学习可穿戴设备健康数据个性化健康管理平台研究

基于 TensorFlow 框架的联邦学习可穿戴设备健康数据个性化健康管理平台研究 摘要: 随着可穿戴设备的普及,人们对于自身健康管理的需求日益增长。然而,可穿戴设备所收集的健康数据往往分散在不同用户的设备中,且涉及用户隐私敏感信息。本研究旨在构建一个基于 TensorFlow 框…...

查看字节真实二进制形式示例解析1

查看字节的真实二进制形式&#xff1f; 若需要显式查看二进制0/1&#xff0c;可以通过以下方法转换&#xff1a; 方法1&#xff1a;逐字节转换为二进制字符串 def bytes_to_binary(data: bytes) -> str:return .join([bin(byte)[2:].zfill(8) for byte in data])# 示例 …...

hadoop中spark基本介绍

Spark是一个基于内存计算的快速、通用、可扩展的大数据处理引擎&#xff0c;可与Hadoop集成并在其生态系统中发挥重要作用。以下是其基本介绍&#xff1a; 特点 - 快速&#xff1a;基于内存计算&#xff0c;能将中间结果缓存在内存中&#xff0c;避免频繁读写磁盘&#xff0c;大…...

Apollo学习——键盘控制速度

# keyboard_control.py import time import keyboard # 键盘输入模块 pip install keyboard from getkey import getkey, keys from cyber.python.cyber_py3 import cyber_time from cyber.python.cyber_py3 import cyber from modules.common_msgs.control_msgs import contro…...

无人机数据处理与特征提取技术分析!

一、运行逻辑 1. 数据采集与预处理 多传感器融合&#xff1a;集成摄像头、LiDAR、IMU、GPS等传感器&#xff0c;通过硬件时间戳或PPS信号实现数据同步&#xff0c;确保时空一致性。 边缘预处理&#xff1a;在无人机端进行数据压缩&#xff08;如JPEG、H.265&#xff09;…...

Java内存马的检测与发现

【网络安全】Java内存马的检测与发现 一、Java内存马的现象二、检测思路三、重点关注类四、检测方法1. 检查方法&#xff08;FindShell&#xff09;2. 检查方法&#xff08;sa-jdi&#xff09;3. 检查方法&#xff08;arthas-boot&#xff09;4. 检查方法&#xff08;cop.jar&a…...

基于策略的强化学习方法之策略梯度(Policy Gradient)详解

在前文中&#xff0c;我们已经深入探讨了Q-Learning、SARSA、DQN这三种基于值函数的强化学习方法。这些方法通过学习状态值函数或动作值函数来做出决策&#xff0c;从而实现智能体与环境的交互。 策略梯度是一种强化学习算法&#xff0c;它直接对策略进行建模和优化&#xff0c…...