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

信小程序点击按钮绘制定制转发分享图

1. 说明

先上代码片断分享链接:
https://developers.weixin.qq.com/s/vl3ws9mA72GG

  • 使用 painter 画图
  • 按钮传递定制化信息

效果如下:

2. 关键代码说明

文件列表如下:

{"usingComponents": {"painter": "/components/painter/painter"}
}
  • painter 为组件,在页面 json 文件中引入;
  • 组件使用 palette 传入画图参数,参数中使用 json 格式,内容基本是把 css 转换下写法,可以此在线绘制生成你需要的 json 内容: https://painterjs.github.io/
  • button 通过 data-xxx 传值,js 中通过 e.target.dataset.xxx 获取数据;
  • bindtap 绑定个空的函数,防止默认事件,比如跳转等;
  • 可拿到生成的图片地址,图片地址格式类似为 http://tmp/xxxxxxxxxxxxxxx,经实践用户转发发送其它人是可以看得到的,这省去了上传后台的麻烦;
  • painter 组件自动监听 palette 数据,一旦有新数据传入,它即自动开始绘制,时间较快;
  • 函数中通过 e.from 判断是 buttonmenu
  • 加上 showLoading 提示体验好点,后面记得 hideLoading 取消提示;
  • 当前官方版本支持 3 秒的 promise 异步时间,因此绘制图片时间不超过 3 秒才行,现在手机性能较好,我这里 1 秒的定时器来等待图片生成再去拿图片;
  • 为了避免相同图片重复生成,可以增加一定的缓存,我这里使用页面级别的缓存;
  • 最后注意返回这个 promise,因为转发图主要是 imageUrl 来设置;

3. 总结

小程序开发还是有坑和体验不好的地方,但相比前端来讲又稍微简单了点,不过小程序体积大了以后,一个页面上千行代码也是经常的事,所以提前使用上 typescript scss ,多使用 class 封装等对于后续维护有更好的体验。

参考资料:
[1] https://github.com/Kujiale-Mobile/Painter
[2] https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

相关文章:

信小程序点击按钮绘制定制转发分享图

1. 说明 先上代码片断分享链接: https://developers.weixin.qq.com/s/vl3ws9mA72GG 使用 painter 画图 按钮传递定制化信息 效果如下: 2. 关键代码说明 文件列表如下: {"usingComponents": {"painter": "/com…...

Python自动化测试-使用Pandas来高效处理测试数据

Python自动化测试-使用Pandas来高效处理测试数据 目录:导读 一、思考 二、使用pandas来操作Excel文件 三、使用pandas来操作csv文件 四、总结 一、思考 1.Pandas是什么? 功能极其强大的数据分析库可以高效地操作各种数据集 csv格式的文件Excel文件H…...

语音增强学习路线图Roadmap

语音增强算是比较难的研究领域,从入门到精通有很多台阶,本文介绍一些有价值的书籍,值得反复阅读。主要分为基础类和进阶类书籍,大多都是理论和实践相结合的书籍,编程实践是抓手,让知识和基础理论变扎实。基础书籍《信号…...

nginx配置ssl实现https访问

文章目录一、介绍二、创建证书1、OpenSSL创建自签名密钥和证书三、nginx配置四、开放端口一、介绍 nginx配置ssl证书,实现https访问,可以使用自签名SSL证书或者购买机构颁发的证书两种方式参考链接 https://blog.csdn.net/weixin_39198406/article/deta…...

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。JavaScript 语句JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。下面的 JavaScript 语句向 id"demo" 的 HTML 元素输出文本 "Hello Dolly" :…...

将古老的ASP项目转换为PHP初探

ASP 是一种服务器端脚本语言&#xff0c;主要用于开发动态 Web 应用程序。ASP 可以在服务器上执行代码&#xff0c;并将结果返回给客户端浏览器&#xff0c;实现动态生成 Web 页面的功能。ASP 代码通常包含在 <% %> 标记中&#xff0c;以下是一个简单的 ASP 程序示例&…...

数据结构复习(七)模板类封装实现不带头结点的单链表

一、代码 二、总结 一、代码 #include<iostream> using namespace std;template<class T> struct ListNode {T _data;ListNode* next;ListNode(const T& data T()){_data data;next nullptr;}~ListNode(){next nullptr;} };template<class T> class…...

IDEA插件 RestfulTool插件——Restful服务开发辅助工具集

IDEA插件 RestfulTool插件——Restful服务开发辅助工具集 目录IDEA插件 RestfulTool插件——Restful服务开发辅助工具集1.插件介绍2.安装方式3.使用方法1.插件介绍 RestfulTool插件。一套 Restful 服务开发辅助工具集&#xff1a; 提供了一个 Services tree 的显示窗口 双击 …...

2023年全国最新会计专业技术资格精选真题及答案1

百分百题库提供会计专业技术资格考试试题、会计考试预测题、会计专业技术资格考试真题、会计证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 11.下列各项中&#xff0c;影响企业利润表“利润总额”项目的是&#xff08;&…...

Linux 配置RAID组

目录 配置RAID&#xff08;软件RAID&#xff09; 创建RAID组 RAID中出现坏盘如何操作 RAID 添加热备盘 删除RAID组 RAID所解决的问题 提升硬盘的I/O吞吐率 提高硬盘的读写能力 提高硬盘的安全性 进行备份 减少硬盘成本 RAID级别 存储RAID——RAID级别_静下心来敲木鱼的博…...

【2021/推荐/社交网络】Socially-Aware Self-Supervised Tri-Training for Recommendation

部分公式、图表和排版等显示可能异常,可在个人公众号(码农的科研笔记)进行全文免费阅读。 【2021/推荐/社交网络】Socially-Aware Self-Supervised Tri-Training for Recommendation 原文:https://dl.acm.org/doi/10.1145/3447548.3467340 源码:[伯乐 SEPT]、https://git…...

Django搭建个人博客Blog-Day06

展示所有文章Django提供的分页功能说明import os os.environ.setdefault(DJANGO_SETTINGS_MODULE, blog.settings.dev) import django django.setup() # 这个时候才有django的环境 所以导入django中的模块必须写在这句话的后面才有效 from articles.models import Articles #…...

DQL 多表查询

1、多表关系 一对多&#xff08;多对一&#xff09; 案例: 部门 与 员工的关系 关系: 一个部门对应多个员工&#xff0c;一个员工对应一个部门 实现: 在从表的一方建立外键&#xff0c;指向主表一方的主键 多对多 案例: 学生 与 课程的关系 关系: 一个学生可以选修多门课程&am…...

BUUCTF Reverse xor

题目&#xff1a;BUUCTF Reverse xor 一些犯傻后学到了新东西的记录 查壳&#xff0c;没壳&#xff0c;IDA打开 main函数很好理解&#xff0c;输入一个长度为33的字符串&#xff0c;1-32位与前一位异或后与global相等&#xff0c;则判定flag正确 找global 在strings window直…...

vite和esbuild/roolup的优缺点

esbuild 优点 基于go语言&#xff0c;go是纯机器码不使用 AST&#xff0c;优化了构建流程多线程并行 缺点 esbuild 没有提供 AST 的操作能力。所以一些通过 AST 处理代码的 babel-plugin 没有很好的方法过渡到 esbuild 中&#xff08;比如babel-plugin-import&#xff09;。…...

32-Golang中的map

Golang中的map基本介绍基本语法map声明的举例map使用的方式map的增删改查操作map的增加和更新map的删除map的查找map的遍历map切片基本介绍map排序map的使用细节基本介绍 map是key-value数据结构&#xff0c;又称为字段或者关联数组。类似其它编程语言的集合&#xff0c;在编程…...

LeetCode-384-打乱数组

1、列表随机 为了能够初始化数组&#xff0c;我们使用nums保存当前的数组&#xff0c;利用orignal保存初始化数组。为了实现等可能随机打乱&#xff0c;考虑到随机数本质上是基于随机数种子的伪随机&#xff0c;我们采用如下的方式实现等可能随机&#xff1a;我们将所有元素压…...

九龙证券|重大利好!期货公司打新再“解绑”:可直接参与首发网下配售!

时隔近7年&#xff0c;期货公司及其财物办理子公司参加首发证券网下询价和配售事务再次“解绑”。 2月17日&#xff0c;为适应全面实行股票发行注册制变革需求&#xff0c;中国证券业协会&#xff08;以下简称中证协&#xff09;发布《初次公开发行证券网下出资者办理规矩》&am…...

信号完整性设计规则之串扰最小化

本文内容从《信号完整性与电源完整性分析》整理而来&#xff0c;加入了自己的理解&#xff0c;如有错误&#xff0c;欢迎批评指正。 1. 对于微带线和带状线&#xff0c;保持相邻信号路径的间距至少为线宽的2倍。 减小串扰的一种方式就是增大线间距&#xff0c;使线间距等于线…...

Windows Ubuntu双系统 设置时间同步方式

文章目录0 前言1 系统时间机制1.1 Windows时间机制1.2 Ubuntu时间机制2 设置Ubuntu的时间机制3 参考0 前言 在安装windows与ubuntu的双系统之后&#xff0c;会发现两个系统的时间不一致&#xff0c;如果使用了Ubuntu之后&#xff0c;再使用windows就会发现时间变早。原因是两个…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...