失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 微信小程序插件 painter 生成海报 二维码

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

时间:2018-09-24 09:51:36

相关推荐

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

GitHub 地址:/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})}})

3、注意

1、使用网络图片的时候需要在小程序后台配置 request、uploadFile、downloadFile 合法域名,否则线上版本不显示;

2、图片模糊:在 painter 标签上添加 widthPixels=“1000” 将值调整到满意为止 默认是375;

3、我将从接口获取的图片资源放在本地,然后根据弹窗显示的参数来触发绘制海报的方法,这样每次打开弹窗海报就会出现闪动;解决方法是将接口返回数据直接以参数形势传递给 painter ,然后用 observer 来监听变化触发绘制海报方法;

最后、这个插件使用起来还是比较简单的,直接根据 GitHub 里面的介绍使用就可以了

1、二维码中间无法添加 logo,想要生成能添加 logo 的二维码可以使用 weapp-qrcode;

2、如果觉得写配置太麻烦,可以借助可视化平台布局然后生成对应的 JSON:https://lingxiaoyi.github.io/painter-custom-poster/;

如果觉得《微信小程序插件 painter 生成海报 二维码》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。