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

三个木马人2023-07-28 16:11

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/；