信小程序点击按钮绘制定制转发分享图
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判断是button或menu; - 加上
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 是一种服务器端脚本语言,主要用于开发动态 Web 应用程序。ASP 可以在服务器上执行代码,并将结果返回给客户端浏览器,实现动态生成 Web 页面的功能。ASP 代码通常包含在 <% %> 标记中,以下是一个简单的 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 服务开发辅助工具集: 提供了一个 Services tree 的显示窗口 双击 …...
2023年全国最新会计专业技术资格精选真题及答案1
百分百题库提供会计专业技术资格考试试题、会计考试预测题、会计专业技术资格考试真题、会计证考试题库等,提供在线做题刷题,在线模拟考试,助你考试轻松过关。 11.下列各项中,影响企业利润表“利润总额”项目的是(&…...
Linux 配置RAID组
目录 配置RAID(软件RAID) 创建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、多表关系 一对多(多对一) 案例: 部门 与 员工的关系 关系: 一个部门对应多个员工,一个员工对应一个部门 实现: 在从表的一方建立外键,指向主表一方的主键 多对多 案例: 学生 与 课程的关系 关系: 一个学生可以选修多门课程&am…...
BUUCTF Reverse xor
题目:BUUCTF Reverse xor 一些犯傻后学到了新东西的记录 查壳,没壳,IDA打开 main函数很好理解,输入一个长度为33的字符串,1-32位与前一位异或后与global相等,则判定flag正确 找global 在strings window直…...
vite和esbuild/roolup的优缺点
esbuild 优点 基于go语言,go是纯机器码不使用 AST,优化了构建流程多线程并行 缺点 esbuild 没有提供 AST 的操作能力。所以一些通过 AST 处理代码的 babel-plugin 没有很好的方法过渡到 esbuild 中(比如babel-plugin-import)。…...
32-Golang中的map
Golang中的map基本介绍基本语法map声明的举例map使用的方式map的增删改查操作map的增加和更新map的删除map的查找map的遍历map切片基本介绍map排序map的使用细节基本介绍 map是key-value数据结构,又称为字段或者关联数组。类似其它编程语言的集合,在编程…...
LeetCode-384-打乱数组
1、列表随机 为了能够初始化数组,我们使用nums保存当前的数组,利用orignal保存初始化数组。为了实现等可能随机打乱,考虑到随机数本质上是基于随机数种子的伪随机,我们采用如下的方式实现等可能随机:我们将所有元素压…...
九龙证券|重大利好!期货公司打新再“解绑”:可直接参与首发网下配售!
时隔近7年,期货公司及其财物办理子公司参加首发证券网下询价和配售事务再次“解绑”。 2月17日,为适应全面实行股票发行注册制变革需求,中国证券业协会(以下简称中证协)发布《初次公开发行证券网下出资者办理规矩》&am…...
信号完整性设计规则之串扰最小化
本文内容从《信号完整性与电源完整性分析》整理而来,加入了自己的理解,如有错误,欢迎批评指正。 1. 对于微带线和带状线,保持相邻信号路径的间距至少为线宽的2倍。 减小串扰的一种方式就是增大线间距,使线间距等于线…...
Windows Ubuntu双系统 设置时间同步方式
文章目录0 前言1 系统时间机制1.1 Windows时间机制1.2 Ubuntu时间机制2 设置Ubuntu的时间机制3 参考0 前言 在安装windows与ubuntu的双系统之后,会发现两个系统的时间不一致,如果使用了Ubuntu之后,再使用windows就会发现时间变早。原因是两个…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
电脑桌面太单调,用Python写一个桌面小宠物应用。
下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡,可以响应鼠标点击,并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...
C++ 类基础:封装、继承、多态与多线程模板实现
前言 C 是一门强大的面向对象编程语言,而类(Class)作为其核心特性之一,是理解和使用 C 的关键。本文将深入探讨 C 类的基本特性,包括封装、继承和多态,同时讨论类中的权限控制,并展示如何使用类…...
五、jmeter脚本参数化
目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...
npm安装electron下载太慢,导致报错
npm安装electron下载太慢,导致报错 背景 想学习electron框架做个桌面应用,卡在了安装依赖(无语了)。。。一开始以为node版本或者npm版本太低问题,调整版本后还是报错。偶尔执行install命令后,可以开始下载…...
以太网PHY布局布线指南
1. 简介 对于以太网布局布线遵循以下准则很重要,因为这将有助于减少信号发射,最大程度地减少噪声,确保器件作用,最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查 首先检查DRC规则是否设置正确,然…...
Yolo11改进策略:Block改进|FCM,特征互补映射模块|AAAI 2025|即插即用
1 论文信息 FBRT-YOLO(Faster and Better for Real-Time Aerial Image Detection)是由北京理工大学团队提出的专用于航拍图像实时目标检测的创新框架,发表于AAAI 2025。论文针对航拍场景中小目标检测的核心难题展开研究,重点解决…...
