微信小程序分享朋友圈生成海报

微信小程序实现分享到朋友圈

分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存，然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。（老规矩，我的博客复制粘贴就好使）

如果想要海报上的二维码扫码完直接跳到指定的页面, 那么就需要生成一个带参数的二维码, 你需要看我的另一篇博客：微信小程序生成带参数的二维码以及小程序码

先看一下效果图：

一、先把代码写上去

index.wxml代码：

<view class="container">
  <image src="{{shareImage}}" class="share-image"></image>
  <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
  <button bind:tap="eventDraw">绘制</button>
  <button bind:tap="eventSave">保存到本地</button>
</view>

index.wxss代码：

.share-image {
  width: 600rpx;
  height: 810rpx;
  margin: 0 75rpx;
  padding: 1px;
  margin-top: 40px;
}
button {
  margin-top: 100rpx;
}

index.js代码：

Page({
    data: {
        painting: {},
        shareImage: '',
    },
    onLoad() {
        this.eventDraw()
    },
    eventDraw() {
        var that = this;
        wx.showLoading({
            title: '绘制分享图片中',
            mask: true
        })
        this.setData({
            painting: {
                width: 375,
                height: 568,
                clear: true,
                views: [
                  //这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克
                  {
                    type: 'image',
                    url: 'https://tjhaizhixian.com/weixin/item/bai.jpg',
                    width: 375,
                    height: 568
                  },
                  //边框,直接拿了一张图,当做边框
                  {
                    type: 'image',
                    url: 'https://tjhaizhixian.com/weixin/item/biankuang.png',
                    width: 375,
                    height: 568
                  },
                  //商品图
                  {
                    type: 'image',
                    url: 'https://tjhan.com/seafood/public78fffad452d2e158636b.jpg',
                    width: 328,
                    height: 328,
                    top:20,
                    left:22,
                  },
                  //商品名称
                  {
                    type: 'text',
                    content: '产品名称产品11111',
                    fontSize: 20,
                    lineHeight: 21,
                    color: '#000000',
                    textAlign: 'left',
                    top: 360,
                    left: 36,
                    width: 290,
                    MaxLineNumber: 2,
                    breakWord: true,
                    bolder: true
                  },
                  //线条,同样也是用的图
                  {
                    type: 'image',
                    url: 'https://tjhaizhixian.com/weixin/item/xiantiao.png',
                    width: 325,
                    height: 5,
                    top: 443,
                    left:22
                  },
                  //商品价格
                  {
                      type: 'text',
                      content: '￥198.00',
                      fontSize: 20,
                      color: '#E62004',
                      textAlign: 'left',
                      top: 414,
                      left: 36,
                      bolder: true
                  },
                  //名称
                  {
                    type: 'text',
                    content: '名称名称',
                    fontSize: 15,
                    lineHeight: 21,
                    color: '#7E7E8B',
                    textAlign: 'left',
                    top: 414,
                    left: 267,
                    width: 70,
                    MaxLineNumber: 1,
                    breakWord: true,
                  },
                  // 文字, 打不出这个文字带阴影的效果, 所以也用的图
                  {
                    type: 'image',
                    url: 'https://tjhaizhixian.com/weixin/item/wenzi.png',
                    width: 145,
                    height: 75,
                    top: 460,
                    left: 36,
                  },
                  //二维码
                  {
                    type: 'image',
                    url: 'https://tjhaizhixian.com/Public/Home/images/banner/min_code.jpg',
                    top: 455,
                    left: 260,
                    width: 85,
                    height: 85
                  },
                ]
            }
        })
    },
    eventSave() {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.shareImage,
            success(res) {
                wx.showToast({
                    title: '保存图片成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        })
    },
    eventGetImage(event) {
        console.log(event)
        wx.hideLoading()
        const {
            tempFilePath,
            errMsg
        } = event.detail
        if (errMsg === 'canvasdrawer:ok') {
            this.setData({
                shareImage: tempFilePath
            })
        }
    }
})

index.json里面的代码：

{
  "navigationBarTitleText": "生成海报",
  "usingComponents": {
    //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer" 
  }
}

组件下载地址:

链接：https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 
提取码：8hrj

二、对象结构

1.数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。
2.当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称，还是比较好理解的。

image（图片）
|属性|含义|默认值|可选值|
|—|—|—|—|
|url|绘制的图片地址，可以是本地图片，如：/images/1.jpeg|||
|top|左上角距离画板顶部的距离|||
|left|左上角距离画板左侧的距离|||
|width|要画多宽|0||
|height|要画多高|0||
text（文本）
|属性|含义|默认值|可选值|
|—|—|—|—|
|content|绘制文本|默认为空||
|color|颜色|black||
|fontSize|字体大小|16||
|textAlign|文字对齐方式|left|center、left、right|
|lineHeight|行高，只有在多行文本中才有用|20||
|top|文本左上角距离画板顶部的距离|0||
|left|文本左上角距离画板左侧的距离|0||
|breakWord|是否需要换行|false|true、false|
|MaxLineNumber|最大行数，只有设置 breakWord: true ，当前属性才有效，超出行数内容的显示为…|2||
|width|和 MaxLineNumber 属性配套使用，width 就是达到换行的宽度|0||
|bolder|是否加粗|false|true、false|
|textDecoration|显示中划线、下划线效果|none|underline（下划线）、line-through（中划线）|
rect (矩形，线条)
|属性|含义|默认值|可选值|
|—|—|—|—|
|background|背景颜色|black||
|top|左上角距离画板顶部的距离|||
|left|左上角距离画板左侧的距离|||
|width|要画多宽|0||
|height|要画多高|0||