微信小程序生成海报方案

前段时间因为业务需求，需要在微信小程序里分享海报，于是在网上找到了这个方案。此处主要是搬运了网上的内容，加上我自己融合的组件的下载内容。具体如下：

第一步：下载组件

下载组件：Painter 一款轻量级的小程序海报生成组件

下载地址（github地址）：Kujiale-Mobile/Painter: 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片 (github.com) 

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

Painter组件地址：  https://github.com/Kujiale-Mobile/PainterCore

组件包含内容：

 

 第二步：把该组件下载下来，并放入你自己的微信小程序里。（建议你先了解过微信小程序第三方组件后再阅读本方案：自定义组件 | 微信开放文档 (qq.com)）

 

第三步：在自定义组件中引入并使用该 Painter组件：

详细使用步骤如下：

1、首先我们新增一个自定义组件 share-box ，在该组件的json中引入painter组件：

{
  "component": true,
  "usingComponents": {
    "painter": "/painter/painter"
  }
}

2、然后在 share-box 组件的WXML 中写入：

// 将该组件定位在屏幕之外，用户查看不到。
<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />

3、接下来是share-box自定义组件里的js代码，这个代码主要是描述你需要绘制的海报的配置内容：

Component({
  properties: {
    // 是否开始绘图
    isCanDraw: {
      type: Boolean,
      value: false,
      observer(newVal) {
        newVal && this.handleStartDrawImg()
      }
    },
    // 用户头像昵称信息
    userInfo: {
      type: Object,
      value: {
        avatarUrl: '',
        nickName: ''
      }
    }
  },
  data: {
    imgDraw: {}, // 绘制图片的大对象
    sharePath: '' // 生成的分享图
  },
  methods: {
    handleStartDrawImg() {
      wx.showLoading({
        title: '生成中'
      })
      this.setData({
        imgDraw: {
          width: '750rpx',
          height: '1334rpx',
          background: 'https://qiniu-image.qtshe.com/20190506share-bg.png',
          views: [
            {
              type: 'image',
              url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg',
              css: {
                top: '32rpx',
                left: '30rpx',
                right: '32rpx',
                width: '688rpx',
                height: '420rpx',
                borderRadius: '16rpx'
              },
            },
            {
              type: 'image',
              url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png',
              css: {
                top: '404rpx',
                left: '328rpx',
                width: '96rpx',
                height: '96rpx',
                borderWidth: '6rpx',
                borderColor: '#FFF',
                borderRadius: '96rpx'
              }
            },
            {
              type: 'text',
              text: this.data.userInfo.nickName || '青团子',
              css: {
                top: '532rpx',
                fontSize: '28rpx',
                left: '375rpx',
                align: 'center',
                color: '#3c3c3c'
              }
            },
            {
              type: 'text',
              text: `邀请您参与助力活动`,
              css: {
                top: '576rpx',
                left: '375rpx',
                align: 'center',
                fontSize: '28rpx',
                color: '#3c3c3c'
              }
            },
            {
              type: 'text',
              text: `宇宙最萌蓝牙耳机测评员`,
              css: {
                top: '644rpx',
                left: '375rpx',
                maxLines: 1,
                align: 'center',
                fontWeight: 'bold',
                fontSize: '44rpx',
                color: '#3c3c3c'
              }
            },
            {
              type: 'image',
              url: 'https://qiniu-image.qtshe.com/20190605index.jpg',
              css: {
                top: '834rpx',
                left: '470rpx',
                width: '200rpx',
                height: '200rpx'
              }
            }
          ]
        }
      })
    },
    onImgErr(e) {
      wx.hideLoading()
      wx.showToast({
        title: '生成分享图失败，请刷新页面重试'
      })
      //通知外部绘制完成，重置isCanDraw为false
      this.triggerEvent('initData') 
    },
    onImgOK(e) {
      wx.hideLoading()
      // 展示分享图
      wx.showShareImageMenu({
        path:  e.detail.path,
        fail: err => {
          console.log(err)
        }
      })
      //通知外部绘制完成，重置isCanDraw为false
      this.triggerEvent('initData') 
    }
  }
})

4、在share-box自定义组件的wxss里写入：

.share-wrap {
  width: 100%;
  visibility: hidden;
}

.share-wrap.active {
  visibility: visible;
}

.share-back {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 888;
  opacity: 0;
  transition: all .3s;
}

.share-back.active {
  opacity: 1;
  transition: all .3s;
}

.share-container {
  width: 100%;
  background: #FFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  border-radius: 16rpx 16rpx 0 0;
  transform: translateY(100%);
  transition: all .3s;
}

.share-container.active {
  transform: translateY(0%);
  transition: all .3s;
}

.close {
  width: 30rpx;
  height: 30rpx;
  overflow: hidden;
  position: absolute;
  right: 64rpx;
  top: 64rpx;
}

.close::after {
  transform: rotate(-45deg);
}

.close::before {
  transform: rotate(45deg);
}

.close::before,
.close::after {
  content: '';
  position: absolute;
  height: 3rpx;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -2rpx;
  background: #9C9C9C;
}

.share-image {
  width: 420rpx;
  margin: 66rpx auto 0;
  display: block;
  border-radius: 16rpx;
  box-shadow: 0px 4rpx 8px 0px rgba(0, 0, 0, 0.1);
}

.share-tips {
  width: 100%;
  text-align: center;
  color: #3C3C3C;
  font-size: 28rpx;
  margin: 32rpx 0;
}

.save-btn {
  width: 336rpx;
  height: 96rpx;
  margin: 0 auto 94rpx;
  background: url('https://qiniu-image.qtshe.com/20190506save-btn.png') center center;
  background-size: 100% 100%;
}

5、接下来就是使用这个自定义组件share-box：

在我们要生成海报的页面引入我们的自定义组件share-box，如下：

(1)在页面的json文件中引入自定义组件share-box：

{
  "usingComponents": {
    "share-box": "./components/shareBox/index"
  }
}

（2）在页面WXML中引入自定义组件share-box：

 <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="onClose" />

（3）在页面js中引入：

const app = getApp()

Page({
  data: {
    isCanDraw: false
  },
  // 组件内部关掉或者绘制完成需重置状态
  handleClose() {
    this.setData({
      isCanDraw: !this.data.isCanDraw
    })
  },
  getUserInfo(e) {
    wx.getUserProfile({
      desc: "获取您的头像昵称信息",
      success: res => {
        const { userInfo = {} } = res
        this.setData({
          userInfo,
          isCanDraw: true // 开始绘制海报图
        })
      },
      fail: err => {
        console.log(err)
      }
    })
  }
})

（4）最后就绘制完成：

 

 

以上内容是由我结合原作者分享的内容编写的，欢迎大家前往原作者的文章查看详细用法：

 原文地址： https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013

 原文作者提示：

tips：
文字居中实现可以看下代码片段
文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号
代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5

附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。
最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

另外：这里提供一个生成share-box自定义组件里的js代码，这个代码主要是描述你需要绘制的海报的配置内容的工具：

工具地址：https://lingxiaoyi.github.io/painter-custom-poster/

由于使用该工具生成的json代码，所以这个我用到另外一个工具来将json转换为js对象：（要注意的是，这个海报的配置内容工具生成的json中首尾含有我们可能用不到的几行代码，大家自行删除后再用如下json转js工具转换成js后粘贴到对应的share-box自定义组件里的js代码里即可）

工具地址：https://uutool.cn/json2obj/

 

注意：原作者提供了代码片段，大家可以访问查看代码片段，这里我也把原作者的小程序代码片段地址贴出来：https://developers.weixin.qq.com/s/J38pKsmK7Qw5