微信小程序自动生成打卡海报

1 背景

最近在做一款背单词的小程序，用户在学习完成有对外展示的需求。计划小程序可以自动生成打卡海报，用户可以将海报保存，将保存的图片发布至朋友圈。除此之外，为推广小程序，还需要在海报中加入小程序的二维码。

2 源码下载

微信小程序源码下载：代码下载

3 成品展示

在首页点击生成海报；

小程序会自动生成海报；

用户可以点击“保存相册，分享到朋友圈”将海报图片保存至相册！注：由于是原型开发，后期可以不断调整使得海报更加美观。

4 部分代码展示以及原理解释

4.1 wxml

<!--index.wxml-->
<button bindtap="formSubmit">生成海报</button>

<view hidden="{
     {canvasHidden}}" class="mask">
    <view class="canvas-box">
        <canvas style="width: 800rpx;height: 1600rpx;" canvas-id="mycanvas" />
    </view>
</view>
<view class='imagePathBox' hidden="{
     {maskHidden == false}}" style="height: 100%;">
    <image src="{
     {imagePath}}" class='shengcheng'></image>
    <button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
</view>

imagePathBox框体用于展示海报以及保存按钮；mask框体用于生成海报图片组件；

4.2 js

代码注释讲解得比较详细，逻辑比较简单。就是利用canvas生成海报并进行保存，然后调出之保存的海报并进行展示。最后利用wx.saveImageToPhotosAlbum（）完成保存海报至相册的功能需求。

//index.js
Page({
    

  /** * 页面的初始数据 */
  data: {
    
    maskHidden: false,
    imagePath:"",
  },
  createNewImg: function () {
    
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 375, 667)
    var path = "../../images/city.png";
    context.drawImage(path, 56, 56, 262, 349);
    var path5 = "../../images/erweicode.jpg";//二维码
    var name = that.data.name;
    //绘制学习情况
    context.setFontSize(25);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("今日学习英语词汇", 80, 450);
    context.stroke();
    context.setFontSize(50);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText(0, 150, 510);
    context.stroke();
    //绘制左下角文字
    context.setFontSize(14);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("长按识别小程序", 70, 560);
    context.stroke();
    context.setFontSize(14);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("跟我一起来学习吧~~", 70, 580);
    context.stroke();
    //绘制右下角小程序二维码
    context.drawImage(path5, 230, 530,80,80);
    context.draw();
    //将生成好的图片保存到本地
    setTimeout(function () {
    
      wx.canvasToTempFilePath({
    
        canvasId: 'mycanvas',
        success: function (res) {
    
          var tempFilePath = res.tempFilePath;
          that.setData({
    
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function (res) {
    
          console.log(res);
        }
      });
    }, 200);
  },
  baocun: function () {
    
    var that = this
    wx.saveImageToPhotosAlbum({
    
      filePath: that.data.imagePath,
      success(res) {
    
        wx.showModal({
    
          content: '海报已保存到相册',
          showCancel: false,
          confirmText: '确定',
          confirmColor: '#333',
          success: function (res) {
    
            if (res.confirm) {
    
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
    
                maskHidden: false
              })
            }
          }, fail: function (res) {
    
            console.log(res)
          }
        })
      }
    })
  },
  formSubmit: function (e) {
    
    var that = this;
    this.setData({
    
      maskHidden: true
    });
    wx.showToast({
    
      title: '海报生成中...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
    
      wx.hideToast()
      that.createNewImg();
      that.setData({
    
        maskHidden: true
      });
    }, 1000)
  },
  /** * 生命周期函数--监听页面加载 */
  onLoad: function (options) {
    

  },

  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady: function () {
    

  },

  /** * 生命周期函数--监听页面显示 */
  onShow: function () {
    

  },

  /** * 生命周期函数--监听页面隐藏 */
  onHide: function () {
    

  },

  /** * 生命周期函数--监听页面卸载 */
  onUnload: function () {
    

  },

  /** * 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh: function () {
    

  },

  /** * 页面上拉触底事件的处理函数 */
  onReachBottom: function () {
    

  },

  /** * 用户点击右上角分享 */
  onShareAppMessage: function () {
    

  }
})

其余代码这里不就不展示了，主要是一些组件外观的调整，逻辑已经展示完了。如果大家想要上面截图的样子，请至下载区下载！