微信小程序_把chatgpt聊天数据复制到剪切板
文章目录
- ⭐ 前言
- ⭐ 开始
- 网格背景样式配置
- 对话框样式配置
- 复制到剪切板
- ⭐ 结束
⭐ 前言
大家好,我是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,可能有点慢。
文中如有不足欢迎指出!
微信小程序_把chatgpt聊天数据复制到剪切板相关推荐
- 微信小程序_调用openAi搭建虚拟伙伴聊天
微信小程序_调用openAi搭建虚拟伙伴聊天 背景 效果 关于账号注册 接口实现 8行python搞定 小程序实现 页面结构 数据逻辑 结束 背景 从2022年的年底,网上都是chagpt的传说,个人 ...
- 微信小程序_小程序开发框架
微信小程序_小程序开发框架 微信小程序框架 微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下 微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
- 许嵩音乐智能问答系统微信小程序之客服聊天室
许嵩音乐智能问答系统微信小程序之客服聊天室 项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值 连接知识图谱 你还在为因为性格腼 ...
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
- 微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
- 微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替 完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面 主页面login.js代码 // pages/login/logi ...
- 关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题 集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...
最新文章
- 前端性能调优之Yahoo--23条
- java hibernate sqlserver自增_怎样在hibernate中实现oracle的主键自增策略?
- 应用跳转到AppStore指定关键字搜索界面
- Linux nohup和的功效
- 转: telnet命令学习
- 6种java垃圾回收算法_被说烂了的Java垃圾回收算法,我带来了最“清新脱俗”的详细图解...
- java 等待提示 事件_Java,Jsp点击事件后,出现等沙漏,处理等待状态时,有提示在动,适合任何事件使用...
- linux--kubectl命令和docker命令
- Xcode XIB中突然变卡顿的原因
- 本人博客已经转到简书,不再更新51cto,谢谢大家。
- win10配置python_win10中的Python安装与环境配置
- android怎么设置iphone字体,冲浪阅读:安卓、苹果手机字体怎么改
- 笨方法学Python
- CCNA 测试题及答案 第一章
- IDEA2019安装教程
- 微信、支付宝、百度(drawImage及canvasGetImageData、支付宝(getImageData))踩坑,uni-app 获取图片底色像素值
- [NSSCTF][羊城杯2020]WEB复现
- 【零售知识】供应商结算
- 《黑客秘笈——渗透测试实用指南》读书笔记(1)
- JavaScript原生自动触发事件
热门文章
- 金融危机对于中国来说是好是坏?
- 云函数uni-id微信授权登录小记
- OSChina 周五乱弹 —— 你不会知道老板在女装大佬面前多主动
- c语言 读取 256级 灰度 bmp,256级灰度BMP文件读写源代码c语言图像处理.doc
- Linux操作系统基
- cs439辅导 进程和线程以及死锁
- Go编程 技巧 for range 和channl(除了select的另外一种)
- mysql alter user 修改密码
- JAVA计算机毕业设计早教课程管理系统Mybatis+源码+数据库+lw文档+系统+调试部署
- [MIP技术分享] 织梦/DEDECMS改造MIP教程以及下载2