微信小程序> 微信小程序之生成专属推广海报

微信小程序之生成专属推广海报

浏览量:508 时间: 来源:Huang_John

现在老板一般都需要线上推广功能,通过给用户好处来刺激用户裂变分销,这就需要我们给用户生成专属的推广海报
因为小程序的用户uid是唯一的并且是不变的,所以我们后台大哥就以用户的uid作为生成专属二维码的图片名称,这里我们用canvas来绘制海报,废话不多说,上前端代码:
wxml:

view class='box'    canvas canvas-id='post' style='width:750rpx;height:1334rpx;'/canvas    view style='width:100%;text-align:center;color:#cc181d;font-size:24rpx;margin-top:15rpx;'这是您的专属二维码,将图片保存至手机后发朋友圈推广/view    button class='btn' bindtap='save'保存图片/button/view

js:

data: {    src1: 'https://www.qiaolibeilang.com/qrcode/',    src3: '.png',  },  onLoad: function (options) {    var that = this    var winWidth = wx.getSystemInfoSync().windowWidth;// 获取当前设备的可视宽度    var winHeight = wx.getSystemInfoSync().windowHeight;// 获取当前设备的可视高度    that.setData({      winWidth: winWidth,      winHeight: winHeight    })    let promise1 = new Promise(function (resolve, reject) {      wx.getImageInfo({        src: 'https://www.qiaolibeilang.com//public/uploads/images/20180809/free.png',        success: function (res) {          resolve(res);        }      })    });    let promise2 = new Promise(function (resolve, reject) {      var uid = wx.getStorageSync('uid')      console.log(uid)      wx.getImageInfo({        src: that.data.src1 + uid + that.data.src3,        success: function (res) {          resolve(res);        }      })    });    Promise.all([      promise1, promise2    ]).then(res = {      var that = this      var winWidth = wx.getSystemInfoSync().windowWidth;// 获取当前设备的可视宽度      var winHeight = wx.getSystemInfoSync().windowHeight;// 获取当前设备的可视高度      that.setData({        winWidth: winWidth,        winHeight: winHeight      })      console.log(winWidth)      console.log(winHeight)      const ctx = wx.createCanvasContext('post')      ctx.setFillStyle('red')      ctx.drawImage(res[0].path, 0, 0, that.data.winWidth, that.data.winWidth * 1.778)      ctx.drawImage(res[1].path, that.data.winWidth - 160, that.data.winWidth * 1.778 - 105, 80, 80)      console.log(res)      ctx.draw(true)    })  },  save: function (e) {    var that = this    wx.canvasToTempFilePath({      x: 0,      y: 0,      canvasId: 'post',      success: function (res) {        // 获得图片临时路径        console.log(res.tempFilePath)        wx.saveImageToPhotosAlbum({          filePath: res.tempFilePath,          success(res) {            console.log(res);            wx.showToast({              title: '保存成功',            });          },          fail(res) {            console.log("保存图片:fail");            console.log(res);          }        })      }    })  },

wxss代码就不写了,每个人风格都不一样,我的最终效果是就是这样,二维码是每个人单独的,剩下的就让后台去处理后续的业务逻辑就好了
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎