关于微信小程序生成海报一个简单的办法

news/2024/10/31 5:27:17/

废话不多说，直接入题，先上GITHUB地址，这个组件很好用，有图形生成工具，你不用再自己写代码一个个元素对齐了，是不是很爽。

GITHUB：https://github.com/Kujiale-Mobile/Painter

生成painter代码：React App 这个很好用吧，自己把设计变成海报，然后复制出代码

充分利用painter的优势。小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter

这个也简单，先下载源代码，然后小程序根目录里建一个components文件夹，把程序代码贴进去，当然你可以用GIT命令，省去手动下载的麻烦。

git clone https://github.com/Kujiale-Mobile/Painter.git

新建一个生成海报的小程序页面，引入这个组件

"usingComponents":{"painter":"/components/painter/painter"
}

生成海报代码：

<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>

数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。

bind:imgOK="onImgOK"
bind:imgErr="onImgErr"onImgOK(e) {其中 e.detail.path 为生成的图片路径
},

第一步生成的海报代码可以放进页面，然后修改图片地址为动态的即可。


palette() {return (
{"width": "654px","height": "1000px","background": "#FEF8F3","views": [{"type": "qrcode","content": "哈哈哈","css": {"color": "#000000","background": "#ffffff","width": "200px","height": "200px","top": "779px","left": "29px","rotate": "0","borderRadius": "10px"}},{"type": "text","text": "扫码关注","css": {"color": "#ff0000","background": "rgba(0,0,0,0)","width": "200px","height": "43.89999999999999px","top": "2px","left": "1113px","rotate": "0","borderRadius": "","borderWidth": "1px","borderColor": "#000000","shadow": "10 10 5 #888888","padding": "0px","fontSize": "30px","fontWeight": "normal","maxLines": "2","lineHeight": "43.290000000000006px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},{"type": "text","text": "扫码关注","css": {"color": "#ff0000","background": "rgba(0,0,0,0)","width": "200px","height": "43.89999999999999px","top": "2px","left": "1113px","rotate": "0","borderRadius": "","borderWidth": "1px","borderColor": "#000000","shadow": "10 10 5 #888888","padding": "0px","fontSize": "30px","fontWeight": "normal","maxLines": "2","lineHeight": "43.290000000000006px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},{"type": "text","text": "扫码关注","css": {"color": "#C87756","background": "rgba(0,0,0,0)","width": "30px","height": "175.10999999999996px","top": "787.94px","left": "254px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "30px","fontWeight": "normal","maxLines": "5","lineHeight": "43.290000000000006px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},{"type": "text","text": "1. 忌食辛辣刺激食物\n2. 忌运动量过大\n3. 戒烟戒酒，忌暴饮暴食","css": {"color": "#C87756","background": "rgba(0,0,0,0)","width": "250px","height": "93.88px","top": "611px","left": "40px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "20px","fontWeight": "normal","maxLines": "6","lineHeight": "31.080000000000002px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},{"type": "text","text": "养生小贴士","css": {"color": "#C87756","background": "rgba(0,0,0,0)","width": "200px","height": "42.89999999999999px","top": "537px","left": "42px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#C87756","shadow": "","padding": "0px","fontSize": "30px","fontWeight": "bold","maxLines": "2","lineHeight": "43.290000000000006px","textStyle": "fill","textDecoration": "none","fontFamily": "webfontzk","textAlign": "left"}},{"type": "text","text": "分","css": {"color": "#C87756","background": "rgba(0,0,0,0)","width": "130px","height": "185.89999999999998px","top": "708px","left": "484px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "130px","fontWeight": "normal","maxLines": "2","lineHeight": "187.59000000000003px","textStyle": "fill","textDecoration": "none","fontFamily": "webfontzkxw","textAlign": "left"}},{"type": "text","text": "秋","css": {"color": "#C87756","background": "rgba(0,0,0,0)","width": "130px","height": "185.89999999999998px","top": "580px","left": "463.5px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "130px","fontWeight": "normal","maxLines": "2","lineHeight": "187.59000000000003px","textStyle": "fill","textDecoration": "none","fontFamily": "webfontzkxw","textAlign": "left"}},{"type": "image","url": "https://static.fotor.com.cn/assets/res/pic/454d3884-b1d1-4059-a08b-18427f93c8eb.jpg?x-oss-process=image/resize,lfit,h_1200,w_1200/format,src","css": {"width": "568.01px","height": "475.27px","top": "0px","left": "39.19px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","mode": "scaleToFill"}},{"type": "text","text": "请朋友们注意防寒保暖，小心着凉","css": {"color": "#fff","background": "rgba(0,0,0,0)","width": "22px","height": "372.9000000000001px","top": "61px","left": "71px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "22px","fontWeight": "normal","maxLines": "22","lineHeight": "24.42px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}}]
});}

关于如何生成小程序码，请看小程序文档，写的很清楚了，先获取TOKEN然后调用接口即可生成，把图片保存服务器生成小程序码的URL

文档地址：获取不限制的小程序码 | 微信开放文档

另外，生成的海报如果保存一键转发，小程序文档也有相应的接口，直接可以使用，不过请注意你开发工具的版本要高于2.16.0

地址也发下吧：wx.showShareImageMenu(Object object) | 微信开放文档

 

至此，完成了小程序生成海报分享功能。 


http://www.ppmy.cn/news/483428.html

相关文章

TC8：SOMEIPSRV_OPTIONS_12-15

TC8：SOMEIPSRV_OPTIONS_12-15

SOMEIPSRV_OPTIONS_12: Reserved field of the IPv4 Multicast Option 目的 IPv4 Multicast Option的Reserved字段应静态设置为0x00 这里指的是第二个Reserved字段 测试步骤 DUT CONFIGURE：启动具有下列信息的服务Service ID：SERVICE-ID-1Instance数量：1Tester：客户端-1发…
阅读更多...
Jconsole 开启远程连接遇到的一些坑

Jconsole 开启远程连接遇到的一些坑

最近在学习 JVM&#xff0c;其中涉及到性能、内存等指标分析需要使用工具分享&#xff0c;Java 提供了几个可视化工具来监控和管理 Java 应用&#xff0c;比如 Jconsole、JVisual、JMC&#xff0c;他们以图形化的界面实时的监控程序各种性能指标以及内存、CPU 的使用情况。 Jco…
阅读更多...
Prometheus配置通过file_sd_configs中每个目标的module标签信息重置每个目标的metrics_path

Prometheus配置通过file_sd_configs中每个目标的module标签信息重置每个目标的metrics_path

配置方式如下: scrape_configs: - job_name: file_sd file_sd_configs:- files: - targets.jsonrelabel_configs:- source_labels: [__address__]regex: (http://)([^:])target_label: __address__ replacement: http://${2}- source_labels: [__port__] regex: (\d)target_la…
阅读更多...
Davinci安装失败

Davinci安装失败

Davinci安装失败 在安装Davinci的时候&#xff0c;遇到报错Failed to install DaVinci Resolve Panels. Continues with others components? 更新最新显卡驱动没有解决问题&#xff0c;后来想到可能是我把TMP&#xff0c;TEMP文件夹放到ramdisk&#xff0c;导致空间不够。在把…
阅读更多...
基于FPGA的AD/DA实验

基于FPGA的AD/DA实验

掌握并行DAC、ADC的接口时序 DDS信号的产生 参考《基于FPGA的DDS实现》用DDS合成信号&#xff0c;经过DAC输出用ADC采集信号 高速AD/DA转化器 AD9762是无符号的DAC器件 有符号补码需要先把高位取反再送给DAC* AD9200是无符号的ADC 最大电压对应MAX值 0电压对应0值 注意ADC芯…
阅读更多...
电子设计大赛-AD与DA电路设计

电子设计大赛-AD与DA电路设计

全套资料免费下载&#xff1a; 关注v-x-公-众-号&#xff1a;【嵌入式基地】 后-台-回-复&#xff1a;【电赛】 即可获资料 回复【编程】即可获取 包括有&#xff1a;C、C、C#、JAVA、Python、JavaScript、PHP、数据库、微信小程序、人工智能、嵌入式、Linux、Unix、QT、物联网…
阅读更多...
Davinci BI报表工具~

Davinci BI报表工具~

前文&#xff1a; 外部数据用SparingCloud做数据接口&#xff0c;对内部当然时用BI工具平台提供查询&#xff0c;释放开发&#xff0c;让运营想怎么查就怎么查&#xff0c;缩短开发流程。 一、安装 1.1 环境 1.1.1 JDK1.8 略 1.1.2 phantomjs #解压bzip2工具 yum -y insta…
阅读更多...
【正点原子FPGA连载】第三十五章高速AD/DA实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1

【正点原子FPGA连载】第三十五章高速AD/DA实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1

1&#xff09;实验平台&#xff1a;正点原子新起点V2开发板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609758951113 2&#xff09;全套实验源码手册视频下载地址&#xff1a;http://www.openedv.com/thread-300792-1-1.html 3&#xff09;对…
阅读更多...
最新文章

Copyright @ 2022~2023