微信小程序插件 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/

相关推荐
丁总学Java33 分钟前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
丁总学Java18 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
mosen86819 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650220 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong1 天前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
2 天前
微信小程序运营日记(第四天)
微信小程序·小程序
qq22951165022 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app