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

nuxt3网站文章分享微信 ,QQ功能

news 来源：原创 2025/7/30 17:38:27

1.安装
npm install qrcode --save-dev
2.组件使用

  <div class="share"><div style="line-height: 69px; color: #fff;width: 100px;"><p style="text-align: center;">分享:</p></div><div @click="shareToMicroblog()" class="BJ_WB"><a class="weibo" /><a>微博</a></div><!-- <div @click="shareToQQ()" class="BJ_QQ"><a class="qq"></a><a>QQ好友</a></div> --><divclass="BJ_WX"@mouseover="showQR = true"@mouseleave="showQR = false"><div class="weixinall"><a class="weixin" /><a>微信</a></div><divclass="weixincode":class="{ 'qrcode-visible': showQR }"style="position: absolute;top: -220px;opacity: 0;transition: opacity 0.3s ease;width: 200px;height: 200px;background-color: #fff;"><canvasid="QRCode_header"style="width: 165px; height: 165px; margin: auto"/><pstyle="color: #818181;font-size: 12px;line-height: 16px;margin-left: 15px;">打开微信扫一扫<br />将您喜欢的内容分享微信朋友圈</p></div></div><div class="BJ" @click="shareToQQRom()"><a class="qqkj"></a><a>QQ</a></div></div>

<script setup lang="ts">
import QRCode from "qrcode";
const route = useRoute();
const id = ref(route.params.id);
const showQR = ref(false);
const shareUrl = `https://XXXXXXX.COM/XXXXXXXXXX/${id.value}`;
//分享到QQ
// const shareToQQ= function() {
//   window.open(
//       `https://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&title=${sysInfo}&source=${shareUrl}&desc=${sysInfo}&pics=`)
// }
//分享到微信
onMounted(() => {const QR_OPTIONS = {errorCorrectionLevel: "H",width: 165,height: 165,margin: 3,color: {dark: "#000",light: "#fff",},};QRCode.toCanvas(document.querySelector("#QRCode_header"),shareUrl,QR_OPTIONS,(error: any) => {if (error) console.error("二维码生成失败:", error);});
});//分享到微博
const shareToMicroblog = function () {window.open(`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${details.value.productBackground}`);
};//分享到qq空间
const shareToQQRom = function () {const pics = encodeURIComponent(details.value.productBackgroundImage);const desc = encodeURIComponent(details.value.productBackground);window.open(`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&title=${details.value.productBackground}&summary=${details.value.productBackground}&desc=${desc}&pics=${pics}`);
};
</script>

<style scoped lang="scss">
.share {display: flex;flex-wrap: nowrap;width: 100%;justify-content: center;.weibo {display: block;width: 24px;height: 21px;background-image: url("/assets/img/wb.png") !important;background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}.BJ_WB {background-color: #e6162d;width: 110px;height: 40px;margin-top: 15px;margin-right: 15px;display: flex;border-radius: 8px;justify-content: center;align-items: center;color: #fff;cursor: pointer;&:hover {background-color: #f75567;transform: translateY(-2px);}}.BJ_QQ {background-color: #2384cc;width: 110px;height: 40px;margin-top: 15px;margin-right: 15px;display: flex;border-radius: 8px;justify-content: center;align-items: center;color: #fff;cursor: pointer;&:hover {background-color: #5faae2;transform: translateY(-2px);}}.BJ_WX {background-color: #3cb034;width: 110px;height: 40px;margin-top: 15px;border-radius: 8px;/* position: relative; */display: flex;justify-content: center;align-items: center;transition: transform 0.2s;color: #fff;cursor: pointer;&:hover {background-color: #7dd377;transform: translateY(-2px);}}.BJ {background-color: rgb(255, 206, 0);width: 110px;height: 40px;display: flex;border-radius: 8px;justify-content: center;align-items: center;color: #fff;margin: 15px;cursor: pointer;&:hover {background-color: #ffde52;transform: translateY(-2px);}}.qq {display: block;width: 28px;height: 28px;background-image: url("/assets/img/qq.png");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}.qqkj {display: block;width: 28px;height: 28px;background-image: url("/assets/img/qqkj.png");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}.weixinall {position: relative;display: flex;justify-content: center;.weixin {display: block;width: 28px;height: 28px;background-image: url("/assets/img/wx.png");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}.weixincode {position: absolute;left: -60px;z-index: 1000 !important;}}
}.qrcode-visible {opacity: 1 !important;pointer-events: auto;
}
</style>

效果
在这里插入图片描述

nuxt3网站文章分享微信 ,QQ功能

1.安装 npm install qrcode --save-dev 2.组件使用 <div class"share"><div style"line-height: 69px; color: #fff;width: 100px;"><p style"text-align: center;">分享:</p></div><div click"shareToMi…...

编程日记 2025/7/30 17:38:27

深入理解Spring框架：核心概念与组成剖析

引言在Java企业级开发领域，Spring框架无疑是当之无愧的王者。自2003年首次发布以来，Spring凭借其强大的功能、高度的灵活性和卓越的扩展性，已成为构建大型企业应用程序的首选框架。本文将深入探讨Spring框架的核心概念与多样组成部分&#…...

编程日记 2025/7/30 17:27:52

安装Tweaks 参考Ubuntu 22.04 桌面美化成Mac风格这篇更好点 sudo apt install gnome-tweaks gnome-shell-extensions -y安装macos主题 git clone https://github.com/vinceliuice/WhiteSur-gtk-theme.git # 进到文件目录 ./install.sh -t all -N glassy sudo ./tweaks.sh -g…...

编程日记 2025/7/9 4:30:23

MySQL: 创建两个关联的表，用联表sql创建一个新表

MySQL: 创建两个关联的表建表思路 USERS 表：包含用户的基本信息，像 ID、NAME、EMAIL 等。v_card 表：存有虚拟卡的相关信息，如 type 和 amount。关联字段：USERS 表的 V_CARD 字段和 v_card 表的 v_card 字段用于建立…...

编程日记 2025/7/26 12:15:52

JavaScript 中for...in和for...of循环的原理区别，在遍历对象和数组时分别如何使用

大白话JavaScript 中for…in和for…of循环的原理区别，在遍历对象和数组时分别如何使用嘿，朋友！咱来唠唠 JavaScript 里 for...in 和 for...of 这两种循环的事儿。它们就像是两个不同的小帮手，能帮你在对象和数组里溜达溜达&…...

编程日记 2025/7/27 22:03:48

图解AUTOSAR_SWS_WatchdogInterface

AUTOSAR Watchdog Interface (WdgIf) 详解 AUTOSAR经典平台看门狗接口模块技术详解目录 1. 概述 1.1 WdgIf模块的作用1.2 WdgIf在AUTOSAR中的位置2. 架构设计 2.1 WdgIf架构概览2.2 接口设计2.3 序列设计3. 配置详解 3.1 配置参数3.2 配置结构3.3 配置类型4. 总结 4.1 主要特点…...

编程日记 2025/7/24 7:55:32

快速搭建yolo测试环境，超简明的神经网络训练说明书

1 快速搭建yolo测试环境相对于更早的版本，v5是比较舒服的，直接把仓库拉下来就行，不用单独搞测试脚本和权重文件 $ git clone https://github.com/ultralytics/yolov5.git然后就是切到目录下安装依赖的第三方库： $ cd yolov5 $…...

编程日记 2025/7/29 10:49:51

如何在IDEA中借助深度思考模型 QwQ 提高编码效率？

通义灵码上新模型选择功能，不仅引入了 DeepSeek 满血版 V3 和 R1 这两大 “新星”，Qwen2.5-Max 和 QWQ 也强势登场，正式加入通义灵码的 “豪华阵容”。开发者只需在通义灵码智能问答窗口的输入框中，单击模型选择的下拉菜单&#x…...

编程日记 2025/7/29 1:18:15

探索 Ollama：开源大语言模型平台的无限可能

在人工智能的快速发展进程中，大语言模型扮演着至关重要的角色。Ollama 作为一个开源的大语言模型平台，正逐渐崭露头角，为广大开发者和爱好者带来了全新的体验。它允许用户在本地环境中轻松地运行、创建和共享大型语言模型，极大地降…...

编程日记 2025/7/30 17:35:39

clickhouse多条件查询

安装包 infi.clickhouse-orm 2.1.3建表 create table test.test (name String,age UInt32,birthday Date32,sex UInt8 ) engineMergeTree() order by (name,sex)insert into test.testvalues (aa,34,1991-01-19,1), (cc,30,1994-01-19,0), (haha,31,1994-02-19,0);多条件查询…...

编程日记 2025/7/21 12:01:26

信息的度量

系列文章目录文章目录系列文章目录一、离散消息的信息量1.自信息的引入2.自信息定义二、离散信源的平均信息量---信息熵1.信息熵定义一、离散消息的信息量 1.自信息的引入通信的本质是传递信息，为了定量表征信息的度量，引入自信息量的概念。事件包…...

编程日记 2025/7/27 13:51:39

ffmpeg+QOpenGLWidget显示视频

一个基于 ‌FFmpeg 4.x‌ 和 QOpenGLWidget的简单视频播放器代码示例，实现视频解码和渲染到 Qt 窗口的功能。 1）ffmpeg库界面，视频解码支持软解和硬解方式。硬解后，硬件解码完成需要将数据从GPU复制到CPU。优先采用av_hwf…...

编程日记 2025/7/30 17:38:25

从零开始实现 C++ TinyWebServer 项目总览

文章目录引言Web Server 概念如何实现高性能 WebServer？基础网络通信I/O 多路复用技术并发处理事件处理模式其他优化策略（未实现） 主要功能模块BufferLogSqlConnectPoolHttpRequestHttpResponseHttpConnectHeapTimerWebServer 引言 TinyWeb…...

编程日记 2025/7/25 1:13:33

opencv无法读取的图像，利用pil和numpy进行修复

代码总结这段代码的功能是遍历指定文件夹下的所有图像文件，并修复可能存在的格式问题，然后覆盖原图像。代码解析设置输入文件夹路径（input_folder）。遍历文件夹中的所有文件，筛选出 .jpg、.jpeg、.png、.webp 格式…...

编程日记 2025/7/29 10:20:26

Redis分布式寻址算法

分布式寻址算法是分布式系统中用于确定数据应该存储在哪个节点的算法。这些算法对于实现高效的数据存取、负载均衡和系统扩展性至关重要。以下是几种常见的分布式寻址算法的解释： 1. Hash 算法原理：通过哈希函数将数据的键（Key&#xff09…...

编程日记 2025/7/30 17:33:44

CUDA 学习(1)——GPU 架构

典型 CPU 架构与 GPU 架构对比： 上图中绿色部分是计算单元，GPU 有更多的计算核心，计算能力更强。黄色部分是控制单元，CPU 中有大量的控制单元，现代 CPU 的晶体管越来越复杂，除了计算，还要实现乱…...

编程日记 2025/7/29 22:39:18

5个视角、5等级及10档次：《数字化转型领域参考架构》国家标准正式出台

近日，国家标准GB/T 45341-2025《数字化转型管理参考架构》正式出台。这是我国研制的首个数字化转型领域基础架构类国家标准，对数字化转型领域标准化建设具有重大意义。关注WeChat Subscription Account【智慧城市指北】，回复关键字“20250…...

编程日记 2025/7/24 13:58:09

2.4 隐函数及由参数方程确定的函数求导

1.隐函数求导 1.1 例题 2. 参数方程确定的函数求导...

编程日记 2025/7/30 17:37:02

PROE 与 STL 格式转换：开启 3D 打印及多元应用的大门

在 3D 设计与制造的复杂生态中，将 PROE 格式转换为 STL 格式绝非无端之举，而是有着深厚且多元的现实需求作为支撑。一、文件格式介绍 （一）PROE 格式 PROE 作为一款参数化设计软件，采用基于特征的参数化建模技术…...

编程日记 2025/7/30 17:33:41

【Bug记录】node-sass安装失败解决方案

【Bug记录】node-sass 安装失败解决办法前言很多小伙伴在安装 node-sass 的时候都失败了，主要的原因是 node 版本和项目依赖的 node-sass 版本不匹配。解决方案解决方案：把项目中的 node-sass 替换为 sass，其实 node-sass 已被官方弃…...

编程日记 2025/7/23 9:08:20

三、Python高级特性

Python中的高级数据结构：队列、栈、双端队列、堆与优先队列在Python编程中，高级数据结构为我们提供了强大而灵活的工具来处理各种复杂的数据存储和操作需求。本文将详细介绍队列、栈、双端队列、堆与优先队列这几种常见的高级数据结构及其在Python中的…...

编程日记 2025/7/27 22:34:05

使用 OpenCV 拼接进行图像处理对比：以形态学操作为例

图像处理在计算机视觉中起着至关重要的作用，而 OpenCV 作为一个强大的图像处理库，提供了丰富的函数来实现各类图像处理任务。形态学操作（Morphological Operations）是其中常用的技术，尤其适用于二值图像的处理。常见的…...

编程日记 2025/7/24 16:27:52

OPENCV数字识别（非手写数字/采用模板匹配）

这篇文章的重点在于模板匹配的使用。模板匹配是计算机视觉中的一项基本技术，它通过比对输入图像与模板图像的相似度，来进行目标识别。对于数字识别，特别是标准数字的识别，模板匹配非常有效。请看效果： 文章结构 …...

编程日记 2025/7/28 13:01:52

【STM32】知识点介绍一：硬件知识

文章目录一、电源引脚简介二、电平信号三、电路分析一、电源引脚简介 VCC、GND、VDD和VSS是电子电路中常见的术语，代表着不同的电源引脚或电压。 VCC（Voltage at the Common Collector）：VCC是指集电极（Collector&am…...

编程日记 2025/7/30 13:48:04

基于SpringBoot的电影售票系统

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：…...

编程日记 2025/7/30 16:44:15

记录我的ICME2025论文之旅：困顿与收获

人生第一次中B会，还是在课业繁重的大三上（有点说法~） “在最黑暗的时刻，总有一束光为你指引前行。” ——记录这段难忘的历程今年的ICME投稿量创下新高，录取率却跌至20多%，并且首次加入了rebuttal&#xf…...

编程日记 2025/7/23 20:53:34

FreeRTOS学习（九）：中断管理

FreeRTOS学习（九）：中断管理文章目录 FreeRTOS学习（九）：中断管理前言一、中断优先级分组设置特点中断优先级分组设置二、FreeRTOS中断优先级配置PendSV和SysTick中断优先级配置三、中断相关寄存器PRIMASK…...

编程日记 2025/7/24 7:37:20

07-项目中应提前准备下一阶段计划

在项目当前版本的功能开发任务都完成之后，人就空出来了，通常这个时候，项目负责人还有很多繁琐的工作要做，比如项目内部验收、提交测试申请和版本发布等等。为了给项目成员找事情做，就匆匆忙忙安排下个版本的任务&#…...

编程日记 2025/7/30 1:22:36

【C语言】多进程/多线程

【C语言】多进程/多线程参考链接多进程/多线程服务器1. 多进程服务器2. 多线程服务器结语参考链接参考链接 c 中文网菜鸟 c 多进程/多线程服务器多进程和多线程是常用的并发编程技术。它们都允许程序同时执行多个任务，提高了系统的资源利用率和程序的运行效率…...

编程日记 2025/7/30 9:44:14

GaussDB数据库表设计与性能优化实践

GaussDB分布式数据库表设计与性能优化实践引言在金融、电信、物联网等大数据场景下，GaussDB作为华为推出的高性能分布式数据库，凭借其创新的架构设计和智能优化能力，已成为企业核心业务系统的重要选择。本文深入探讨GaussDB分布式架构下的…...

编程日记 2025/7/30 1:14:11

全星FMEA软件系统——助力汽车部件行业高效管控质量风险

全星FMEA软件系统——助力汽车部件行业高效管控质量风险在汽车部件行业，产品质量与可靠性直接影响整车安全性与市场竞争力。如何高效管理失效风险、优化控制计划并确保流程合规性，成为企业核心挑战。全星FMEA软件系统应运而生，专为汽车部…...

编程日记 2025/7/23 6:30:23

文件I/O--C++的文件操作

一、打开文件，从文件中读取、写入文件从文件中读取数据： #include<fstream> //fstream File stream:文件流 #include<iostream> //fstream包含了 iostream，所以这句可以省略，现在不能了 using namespace std;i…...

编程日记 2025/7/29 8:41:37

Docker-Compose部署 EasySearch 异常问题排查

近期将原本运行在 macOS 上的 EasySearch、Console 和 Coco-server 等服务迁移至群晖 NAS 平台。在迁移过程中遇到了EasySearch容器无法正常启动或运行中意外终止的问题。本文记录了这些问题的具体表现及解决方案，旨在为后续类似部署提供参考。基础部署配置以下…...

编程日记 2025/7/24 17:30:20

秒杀业务优化之从分布式锁到基于消息队列的异步秒杀

一、业务场景介绍优惠券、门票等限时抢购常常出现在各类应用中，这样的业务一般为了引流宣传而降低利润，所以一旦出现问题将造成较大损失，那么在业务中就要求我们对这类型商品严格限时、限量、每位用户限一次、准确无误的创建订单&#xff0c…...

编程日记 2025/7/30 17:35:38

【CGE】社会核算矩阵构建（一）：SAM基本结构

【CGE】社会核算矩阵构建（一）：SAM基本结构社会核算矩阵构建（一）：SAM基本结构一、SAM的概念和基本特点二、SAM的基本结构1.开放经济体的SAM表结构2.SAM表各账户的主要核算内容（1）社会…...

编程日记 2025/7/26 16:53:50

蓝桥杯算法实战分享：算法进阶之路与实战技巧

引言蓝桥杯作为国内极具影响力的程序设计竞赛，为众多编程爱好者和专业人才提供了展示自我的舞台。参与蓝桥杯不仅能检验自身编程水平，还能拓宽技术视野，为未来职业发展积累宝贵经验。本文将结合历年真题与参赛经验，全面分享蓝桥…...

编程日记 2025/7/29 13:38:49

自定义minshell

我们在前面已经了解了进程的概念，以及如何进行进程控制。接下来我们就使用这些知识，来自己实现一个shell即命令行解释器！！！ 一.打印命令行提示符我们在使用Linux操作系统时，一登陆就会启动bash进程——命…...

编程日记 2025/7/29 11:23:11

坦克大战（c++）

今天我给大家分享一个c游戏。废话不多说，作品展示： #include <stdio.h> #include <windows.h> #include <time.h> //里规格：长39*278 （真坐标）(假坐标宽为39) 高39 //外规格：长…...

编程日记 2025/7/25 1:15:42

《可爱风格 2048 游戏项目：HTML 实现全解析》

一、引言在如今的数字化时代，小游戏以其简单易上手、趣味性强的特点深受大家喜爱。2048 游戏作为一款经典的数字合并游戏，拥有庞大的玩家群体。本文将详细介绍一个用单文件 HTML 实现的可爱风格 2048 游戏项目，它不仅具备传统 2048 游戏的基…...

编程日记 2025/7/30 14:56:06

C++ 利用类模板实现一个数组类封装

案例描述： 实现一个通用的数组类，要求如下： 可以对内置数据类型以及自定义数据类型的数据进行存储将数组中的数据存储到堆区构造函数中可以传入数组的容量提供对应的拷贝构造函数以及operator防止浅拷贝问题提供尾插法和尾删法对数组…...

编程日记 2025/7/25 5:23:14

【AndroidRTC-11】如何理解webrtc的Source、TrackSink

Android-RTC系列软重启，改变以往细读源代码的方式改为带上实际问题分析代码。增加实用性，方便形成肌肉记忆。同时不分种类、不分难易程度，在线征集问题切入点。问题1：如何理解VideoSource、VideoTrack&VideoSink三者的关系…...

编程日记 2025/7/29 11:32:01

数据类设计_图片类设计之9_图标类设计_C++实战_(前端架构）

前言学的东西多了,要想办法用出来.C和C是偏向底层的语言,直接与数据打交道.尝试做一些和数据方面相关的内容引入前面写了矩阵图形类对象和像素图形类对象,本贴通过一个快捷方式图标类的设计,来继续数据类型设计的一些讨论. 快捷方式图标是这个样子: 属性分析首先,快捷方式…...

编程日记 2025/7/24 16:52:04

fuse性能关键参数entry_timeout

entry_timeout 是 FUSE（Filesystem in Userspace）中的一个选项，用于控制目录项缓存的有效期。具体来说，它决定了文件系统在多长时间内缓存目录项（如文件名到 inode 的映射），从而影响文件系统的性…...

编程日记 2025/7/29 1:11:12

3. 轴指令（omron 机器自动化控制器）——＞MC_ResetFollowingError

机器自动化控制器——第三章轴指令 13 MC_ResetFollowingError变量▶输入变量▶输出变量▶输入输出变量功能说明▶指令详情▶时序图▶重启动运动指令▶多重启运动指令▶异常 MC_ResetFollowingError 对指令当前位置和反馈当前位置的偏差进行复位。指令名称FB/FUN图形表现S…...

编程日记 2025/7/25 20:25:23

Spring Boot项目快速创建-开发流程（笔记）

主要流程： 前端发送网络请求->controller->调用service->操纵mapper->操作数据库->对entity数据对象赋值->返回前端前期准备： maven、mysql下载好跟学视频，感谢老师： https://www.bilibili.com/video/BV1gm4…...

编程日记 2025/7/29 14:02:04

[操作系统] 进程间通信：进程池的实现

引言在学习操作系统时，进程间通信（IPC）和多进程管理是核心内容之一。进程池是一种常见的模式，通过预先创建一组工作进程来处理任务，避免频繁创建和销毁进程带来的开销。本文将详细剖析一个用 C 实现的进程池代码&…...

编程日记 2025/7/25 5:21:00

信号相关的程序

1、不断打印*换行之后响应信号，然后循环 #include <stdio.h> #include <string.h> #include <signal.h> #include <stdlib.h> #include <unistd.h> static void alrm_handler(int signo) {write(1,"!",1); }int main( in…...

编程日记 2025/7/29 2:58:28

【计算机网络】-计算机网络期末复习题复习资料

一、计算机网络体系结构（800字） 1. OSI参考模型七层结构：物理层→数据链路层→网络层→传输层→会话层→表示层→应用层各层核心功能： 物理层：比特流传输（如RJ45、光纤接口） 数据链路层&…...

编程日记 2025/7/30 7:49:09

Linux 基础入门操作第十二章 TINY Web 服务器

1 服务器基础架构 1.1 背景知识 Web 服务器使用 HTTP 协议与客户端（即浏览器）通信，而 HTTP 协议又基于 TCP/IP 协议。因此我们要做的工作就是利用 Linux 系统提供的 TCP 通信接口来实现 HTTP 协议。而 Linux 为我们提供了哪些网络编程接口…...

编程日记 2025/7/27 13:48:31

L2-052 吉利矩阵

L2-052 吉利矩阵 - 团体程序设计天梯赛-练习集这道题打表打表部分被注释了 n4 [0,0,282, 2008, 10147, 40176, 132724, 381424, 981541, 2309384] n3 [0,0,21, 55, 120, 231, 406, 666, 1035, 1540] n2 [0,0,3, 4, 5, 6, 7, 8, 9, 10] l,n map(int,input().split()) if…...

编程日记 2025/7/28 20:48:44

相关文章：