评论

如何实现快速生成朋友圈海报分享图

如何快速实现朋友圈海报分享图~

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片,然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种(坑)彩dan了吧~

这里首先推荐一个开源的组件:painter(通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能)

咱们不多说,直接上手就是干。

首先我们新增一个自定义组件,在该组件的json中引入painter

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

然后组件的WXML (代码片段在最后)

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

重点来了 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') 
    }
  }
})

那么我们该如何引用呢?

首先json里引用我们封装好的组件share-box
{
  "usingComponents": {
    "share-box": "/components/shareBox/index"
  }
}
以下示例为获取用户头像昵称后再生成图。
<button class="intro" bindtap="getUserInfo">点我生成分享图</button>
<share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}"  bind:initData="handleClose" />
调用的地方:
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)
      }
    })
  }
})

最后绘制分享图的自定义组件就完成啦~效果图如下:

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即可。
最后一次编辑于  01-20  
点赞 103
收藏
评论

103 个评论

  • 想
    2021-04-08

    请问怎么根据 背景大小 来文字居中

    2021-04-08
    赞同
    回复 1
    • Stern
      Stern
      2021-04-09
      文字css设置:
      left: 为你背景的宽度;,
      align: center




      这样就好了
      2021-04-09
      回复
  • 晓
    2021-03-13
    大佬,海报上的小程序码可以用wxacode.getUnlimited生成的直接放上去吗
    


    2021-03-13
    赞同
    回复 12
    • Stern
      Stern
      2021-03-15
      可以
      2021-03-15
      回复
    • Stern
      Stern
      2021-03-15
      需要配置下 downLoadFile合法域名哈。
      2021-03-15
      回复
    • 晓
      2021-03-16回复Stern
      2021-03-16
      回复
    • 晓
      2021-03-16回复Stern
      感谢大佬的回复,请问把生成的二维码放这里,可以用image类型展示吗,我放的不是小程序码的路径,是直接放wxacode.getUnlimited函数返回的值
      2021-03-16
      回复
    • Stern
      Stern
      2021-03-17
      需要转格式,这个接口返回的是2进制的文件流
      2021-03-17
      回复
    查看更多(7)
  • Zan^Z
    Zan^Z
    2021-03-02

    问下为什么在真机上浏览的时候一定要配置图片的域名啊? 因为我的情况是图片不同的路径比较多,这样写起来就有点麻烦,而且后期微信小程序的头像的路径在变化的情况下,还要再去改那个域名嘛

    2021-03-02
    赞同
    回复 4
    • Stern
      Stern
      2021-03-02
      因为 生成海报需要将网络图片转换为本地图片,才能绘制到canvas里。
      2021-03-02
      回复
    • Zan^Z
      Zan^Z
      2021-03-03回复Stern
      那为什么一定要配置图片的域名,真机上才可以显示呢
      2021-03-03
      回复
    • Stern
      Stern
      2021-03-03回复Zan^Z
      因为下载网络图片,官方规定了必须配置域名。不配置会提示下载失败。
      2021-03-03
      回复
    • Zan^Z
      Zan^Z
      2021-03-03回复Stern
      噢噢噢 明白了 谢谢啦
      2021-03-03
      回复
  • 唐屁屁
    唐屁屁
    2021-02-25

    大佬 生成的图片预览失败是怎么回事 wx.previewImage


    2021-02-25
    赞同
    回复 1
    • Stern
      Stern
      2021-02-25
      图片你放到image里看下正常不。
      2021-02-25
      回复
  • 晨曦
    晨曦
    2021-02-21

    我先问下这个代码片段里rect是不是不能设置渐变色呀


    2021-02-21
    赞同
    回复 1
    • Stern
      Stern
      2021-02-22
      支持
      2021-02-22
      回复
  • 俊熙🤠
    俊熙🤠
    2021-02-03

    大佬,你们没遇到保存到手机图片特别模糊吗,请问怎么解决

    2021-02-03
    赞同
    回复 1
    • Stern
      Stern
      2021-02-03
      加个 painter上属性 scaleRatio="3"
      2021-02-03
      1
      回复
  • scm
    scm
    2021-02-03

    大佬,请教一下,在第二次生成海报时会先闪一下第一次的海报图,然后才正常显示,这个问题该怎么解决呢?

    2021-02-03
    赞同
    回复 3
    • Stern
      Stern
      2021-02-03
      用了新版的了么?
      2021-02-03
      回复
    • scm
      scm
      2021-04-01回复Stern
      用了新版的并没有解决,求助
      2021-04-01
      回复
    • Stern
      Stern
      2021-04-01回复scm
      生成海报关闭的时候 有清空本地连接么
      2021-04-01
      回复
  • Yww
    Yww
    2021-01-14

    大佬,我想问一下 ,你这个组件是不是没办法生成带logo的二维码?

    2021-01-14
    赞同
    回复 1
    • Stern
      Stern
      2021-01-14
      内置的qrcode.js不支持
      2021-01-14
      回复
  • 刘聪
    刘聪
    2021-01-06

    微信头像不显示是怎么回事呢?打开控制台就显示,合法域名已经配置了

    2021-01-06
    赞同
    回复 6
    • 刘聪
      刘聪
      2021-01-06
      真机测试报错,文件损坏或者找不到文件
      2021-01-06
      回复
    • Stern
      Stern
      2021-01-06回复刘聪
      看下文章最后说的啥
      2021-01-06
      回复
    • 刘聪
      刘聪
      2021-01-06回复Stern
      早上就配置了合法域名,中午测试还是没有显示,快下班了才显示
      2021-01-06
      回复
    • Stern
      Stern
      2021-01-06回复刘聪
      需要删除本地的 开发版、体验版、以及正式版才会立即生效。
      2021-01-06
      回复
    • 刘聪
      刘聪
      2021-01-08回复Stern
      哦哦,学到了,谢谢
      2021-01-08
      回复
    查看更多(1)
  • 树
    2021-01-03

    大佬,请问怎么设置垂直居中?

    2021-01-03
    赞同
    回复 3
    • Stern
      Stern
      2021-01-04
      暂时设置不了文字垂直居中
      2021-01-04
      回复
    • 树
      2021-01-04回复Stern
      好的,谢谢
      2021-01-04
      回复
    • 想
      2021-04-08回复Stern
      怎么设置水平居中
      2021-04-08
      回复

正在加载...

登录 后发表内容