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

微信小程序插件 painter 生成海报、二维码

GitHub 地址:https://github.com/Kujiale-Mobile/Painter

一、引入

将 components/painter 整个文件放到自己项目的 components 中;以组件的形式在页面的 json 文件中引入;

二、使用
<view class="container"><image style="width: 300px; height: 300px;" src="{{path}}"></image><painter palette="{{detail}}" bind:imgOK="onImgOK" style="position:fixed; top:-999px;"></painter>
</view>
Page({data:{detail:null,path:null},onShow() {this.handleCode();},handleCode(){let detail = {width:"300px",height:"300px",background:"#f8f8f8",views:[{type:"qrcode",content:"xxs",css:{width:"80px",height:"80px",right:"10px",bottom:"10px",rotate:'0',borderRadius:"0px"}},{id:"img",type:"image",url:"../../assets/logo.png",css:{width:"40px",height:"40px",right:'30px',bottom:"30px",background:"#fff"}},{type:"text",text:"扫描二维码参加活动",css:{left:"10px",bottom:"10px",fontSize:"30rpx",color:"red"}}]}this.setData({detail})},onImgOK(e){this.setData({path:e.detail.path})}
})
最后、这个插件使用起来还是比较简单的,直接根据 GitHub 里面的介绍使用就可以了

1、二维码中间无法添加 logo,想要生成能添加 logo 的二维码可以使用 weapp-qrcode;
2、如果觉得写配置太麻烦,可以借助可视化平台布局然后生成对应的 JSON:https://lingxiaoyi.github.io/painter-custom-poster/;

http://www.lryc.cn/news/98163.html

相关文章:

  • Python版day60
  • windows C++多线程同步<3>-互斥量
  • (学习笔记-系统结构)Linux内核与windows内核
  • find_in_set在oracle下的解决方案
  • 智能垃圾桶
  • 面试题-TS(十):如何处理可选属性和默认参数?
  • Istio Pilot源码学习(一):Pilot-Discovery启动流程、ConfigController配置规则发现
  • 数据结构:顺序表(C实现)
  • 素描基础知识
  • 【Chat GPT】用 ChatGPT 运行 Python
  • cartographer发布畸变矫正后的scan数据
  • Idea中git push to origin/master was rejected错误解决方案
  • docker版jxTMS使用指南:自定义频率型动态管控
  • 【Docker】初识Docker以及Docker安装与阿里云镜像配置
  • C语言:动态内存管理
  • 如何往MySQL中插入100万条数据?
  • IntelliJ IDEA 2023.2 最新变化
  • 1300*B. T-primes
  • 重新C++系列之运算符重载
  • kotlin异常处理try-catch-finally
  • Pytorch在cuda、AMD DirectML和AMD CPU下性能比较
  • 哈工大计算机网络课程局域网详解之:交换机概念
  • Jenkins Pipeline的hasProperty函数
  • 芯片制造详解.净洁室的秘密.学习笔记(三)
  • 可解释的 AI:在transformer中可视化注意力
  • k8s Webhook 使用java springboot实现webhook 学习总结
  • JS逆向之猿人学爬虫第20题-wasm
  • 【双指针优化DP】The 2022 Hangzhou Normal U Summer Trials H
  • [论文笔记] LLM数据集——金融数据集
  • 在亚马逊平台,如何有效举报违规行为?