微信小程序_把chatgpt聊天数据复制到剪切板

news/2024/3/28 20:11:53/文章来源:https://blog.csdn.net/qq_38870145/article/details/129891852

文章目录

    • ⭐ 前言
    • ⭐ 开始
      • 网格背景样式配置
      • 对话框样式配置
      • 复制到剪切板
    • ⭐ 结束

⭐ 前言

大家好,我是yma16,不止前端,本文将介绍微信小程序中 chatgpt聊天页面设计和复制聊天数据。
往期微信小程序文章
小程序自定义微信昵称和头像
小程序制作markdown博客
小程序结合chatgpt制作聊天页面
小程序组件传值

效果
在这里插入图片描述
复制数据到粘贴板
在这里插入图片描述

⭐ 开始

网格背景样式配置

banckground 使用 linear-gradient 渐变 属性得到一个 _| 透明右下的形状,重复repeat即可得到一个背景网格

.container-future {position: relative;width: 100vw;height: 100vh;background: linear-gradient(to right, rgba(1, 41, 116, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(1, 41, 116, 0.1) 1px, transparent 1px);background-repeat: repeat;background-size: 10px 10px;overflow: hidden;box-sizing: border-box;
}

对话框样式配置

形状= 小三角形+圆角矩形
在这里插入图片描述

左 小三角形 border-left

.questioned-box-poly{position: relative;top:15px;width: 0;height: 0;border-radius: 5px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 12px solid  rgb(0, 114, 221);
}


右 小三角形 border-right

.form-response-box-poly{position: relative;top:15px;width: 0;height: 0;border-radius: 5px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 12px solid  rgb(0, 114, 221);
}

在这里插入图片描述
圆角矩形 border-radius

.form-response-box{position: relative;max-width: calc(100vw - 90px);word-break:keep-all;height: auto;overflow-x: auto;background-color:  rgb(0, 114, 221);border-radius: 10px;left: -5px;padding:0 10px;box-sizing: content-box;z-index: 999;
}

复制到剪切板

复制 wx.setClipboardData
取值 wx.getClipboardData

    copyBtn(e) {const response = e.target.dataset.responsewx.setClipboardData({data: response})console.log(wx.getClipboardData({success: (option) => {console.log(option)},}))}

复制成功!
在这里插入图片描述

⭐ 结束

欢迎大家访问我的小程序可以调用chagpt,可能有点慢。
文中如有不足欢迎指出!
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【关于ChatGPT的30个问题】26、ChatGPT的开发团队是谁?/ By 禅与计算机程序设计艺术

26、ChatGPT的开发团队是谁? 目录 26、ChatGPT的开发团队是谁? ChatGPT的开发团队 1. 简介 2. 团队成员

ChatGPT+剪映·副业赚钱技巧实战教程·《制作阿凡达解说视频》- 第4篇

历史文章(文章累计450) 我也来玩一玩OpenAI ChatGPT,人工智能时代终究会来临 - 第459篇 SpringBoot使用ChatGPT Api开发一个聊天机器人 - 第460篇 66个ChatGPT副业赚钱技巧 - 第3篇 悟纤:师傅,你分享了66个赚钱之道…

【软件工具】Pycharm社区版安装ChatGPT!

文章目录0.前言1. 简介2. 安装2.1 Pycharm下载安装2.2 ChatGPT安装2.3 一些问答3 一些问题结束语0.前言 不需要科学上网也能用ChatGPT啦!!! 1. 简介 ChatGPT是一种语言模型,它由OpenAI训练, 可以用于多种任务&#…

开源模型:小羊驼(Vicuna-13B),可达chatGPT九成效果。

参考链接:https://mp.weixin.qq.com/s/OK5NLLVSBLb-4QsnqGp45g 文章目录简要介绍模型介绍数据来源模型评估方法模型局限性模型总体评价简要介绍 以 Meta 开源 LLaMA(直译为「大羊驼」)系列模型为起点,研究人员逐渐研发出基于LLaM…

ChatGPT账号被封号了?不要急,这里有方法~

账号被封 上周关于ChatGPT最劲爆的新闻莫过于意大利那边传出“封杀”ChatGPT。紧接着4月2日,当国人还在周末休假的时候,openai又传出停止注册,并且开始大面积封号,并且禁止亚洲账号登录。 ChatGPT突然的封控行动,业内人…

IntelliJ IDEA 的chatGPT插件 Bito -ChatGPT to write code, explain code,create tests

1、chatGPT爆火 最近你是否听说过“ChatGPT”这个词?它指的是一种基于深度学习技术的人工智能语言生成模型。自从2018年由OpenAI发布以来,ChatGPT就备受关注,甚至在2022年成为了全球最强AI模型之一。 2、chatGPT介绍 ChatGPT(G…

最新加装ChatGPT的New Bing申请流程(含出错解决办法)

两天获得New Bing测试资格流程记录前言一、Microsoft Edge Dev浏览器下载二、Microsoft账号注册与登陆三、浏览器插件下载与添加四、加入候补名单五、写封信给Bing团队前言 2023.03.08,下午收到了Microsoft Bing公司的邮件,提示测试资格申请成功&#x…

微软工程师带你解密大模型 ChatGPT

ChatGPT 是如何做到打破聊天机器人“人工智障”的刻板印象?在众多实测体验中,它已具备轻松通过图灵测试的能力(即让人误以为是与真人对话),且其回答的详实程度、说服力与连续逻辑推理能力远超当前主流会话机器人。传统认知里&…

推荐国内免费使用chatGPT的工具

接下来推荐几个免费且集成chatGPT的软件吧 一、Cursor Cursor (https://www.cursor.so/)是 GPT-4 驱动的一款强大代码编辑器,可以辅助程序员进行日常的编码,简直是程序员的福音。 直接选择自己电脑合适的版本,博主这…

火遍全网的chatGPT

最近网上非常火爆的CHATGPT,它是OpenAI开发的一款开源的自然语言处理 (NLP) 模型,用于实现对话生成和语言模型预测。CHATGPT 模型基于 GPT-3 (Generative Pretrained Transformer 3) 模型构建,拥有语言理解和文本生成能力。CHATGPT 模型可以用…

ChatGPT生成单元测试实践(Golang)

前言 目前gpt本质上是续写,所以在待测函数定义清晰的情况下,单元测试可以适当依赖它进行生成。 收益是什么: 辅助生成测试用例&测试代码,降低单元测试编写的心智成本辅助code review,帮助发现代码显式/潜在问题…

AIGC:ChatGPT(一个里程碑式的对话聊天机器人)的简介(意义/功能/核心技术等)、使用方法(七类任务)、案例应用(提问基础性/事实性/逻辑性/创造性/开放性的问题以及编程相关)之详细攻略

AIGC:ChatGPT(一个里程碑式的对话聊天机器人)的简介(意义/功能/核心技术等)、使用方法(七类任务)、案例应用(提问基础性/事实性/逻辑性/创造性/开放性的问题以及编程相关)之详细攻略 导读:回拨到2020年5月,OpenAI提出了更强大的GPT-3模型&…

中科大chatgpt学术优化环境配置及部署

中科大chatgpt学术优化,环境配置及部署 github项目地址:https://github.com/binary-husky/chatgpt_academi 1、下载项目 1)通过 git 命令,将项目克隆到本地,并进行项目文件夹 git clone https://github.com/binary-husky/chat…

不会写代码,也能部署一个独立ChatGPT?

本教程使用GPT-3模型接口模拟ChatGPT项目,虽然与真正的ChatGPT存在差异,但是演示了ChatGPT的工作原理。 (ChatGPT服务是基于GPT-3模型,经过大量的微调训练而来的,本教程暂时不包含训练内容,之后我们会讲如…

ChatGPT 的 10 种集成模式:从开源 AI 体验平台 ClickPrompt 中受到的启发

和国内外的很多公司一样,在 Open AI 公司开放了 ChatGPT API 接口之后,我们也在探索如何去结合到业务中。而在探索的过程中,我们发现了一个问题,大部分的业务人员并不了解 AI 的能力,所以我们开源构建了 ClickPrompt&a…

ChatGPT有多强?真的能替代程序员?一起来看看!

最近网络上很多文章都在说ChatGPT,神乎其神,我也试着玩了一下,这里分享下过程。 从结果来说,它离替代程序员还有很长的一段路要做。因为程序的工作虽然是由各个小模块组成,但是一个系统性的大逻辑,可能是现…

【分享】21个ChatGPT镜像站

分享21个能在国内无需科学上网使用ChatGPT的网站 ChatGPT镜像站(更新GPT4镜像站) AI EDU https://theb.ai/ https://poe.com/ https://dev.yqcloud.top/ https://chat.uue.me/ GeekChat https://qachat.vercel.app ChatGPT3.5国产镜像-博弈Ai Ch…

chatgpt免费获取KEY-chatgpt免费版生成文本

chatgpt有免费版本吗?OpenAI提供了两种版本的GPT模型,即GPT-2和GPT-3。其中GPT-2的某些层次在2019年对外开放,并提供了一些API,可以供用户免费试用,并在规定范围内广泛应用。但例如访问GPT API,调用更高等级…

chatGPT 中科院学术优化 超详细安装教程

1.下载 项目地址:https://github.com/binary-husky/chatgpt_academic 第一种:可以直接下载zip安装包,然后直接解压。 第二种:采用git来下载 git clone https://github.com/binary-husky/chatgpt_academic.git cd chatgpt_acad…

如何在新必应(New Bing)使用Chatgpt功能

1.效果展示 chatgpt回答的还是很全面的。 2.准备工作 2.1准备1个邮箱用来接收候选人名单通过的消息,我用的微软的outlook免费邮箱,可以直接点击这里注册 2.2下载最新的Microsoft Edge浏览器(),然后下载这个modheader…