微信小程序-活动抽奖

2020-07-07 本文已影响0人我是张大龙

最近老婆说希望在粉丝微信群里随机抽取奖品或抢购名额，目前在用的小程序是抽奖助手，我看了一下大概功能，基本上就是发布奖品描述、设置奖品图片、设置抽奖时间和类型，如果需要高级功能比如图文描述、去除广告等就得缴费了，所以决定自己撸一把算了。

简单罗列一下活动抽奖微信小程序以下几个功能及主要开发要点代码实现：

发布奖品信息，支持多个奖品发布、奖品图片裁剪及压缩

奖品图片裁剪支持对图片双手缩放、旋转、裁剪大小区域设置等，可以参考:image-cropper
奖品图片压缩支持对裁剪后的图片进行二次无损压缩，部分代码参考如下：

 async compressImg(photoSrc, maxWidth = 400, maxHeight=180) {
    let that=this;
    return new Promise((resolve, reject) => {
     wx.getImageInfo({
      src: photoSrc,
        success(res) {
          var originWidth, originHeight;
          originHeight = res.height;
          originWidth = res.width;
          console.log('图片的基本信息', res)
          // var maxWidth = 400,
          // maxHeight = 180;
          var targetWidth = originWidth,
          targetHeight = originHeight;
          if (originWidth > maxWidth || originHeight > maxHeight) {// 保证宽高在400以内
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 要求宽度*(原生图片比例)=新图片尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round (maxWidth * (originHeight / originWidth));
          } else {
              targetHeight = maxHeight;
              targetWidth = Math.round (maxHeight * (originWidth / originHeight));
          }
          }
          that.setData({
            cWidth: targetWidth,
            cHeight: targetHeight
          })
          //----------绘制图形并取出图片路径--------------

          var ctx = wx.createCanvasContext('firstCanvas')
          ctx.clearRect (0, 0, targetWidth, targetHeight);
          ctx.drawImage(res.path, 0, 0, targetWidth, targetHeight)
          ctx.draw(false, setTimeout(() => {
            wx.canvasToTempFilePath({
              canvasId: 'firstCanvas',
              destWidth: targetWidth,
              destHeight: targetHeight,
              success: function (res) {
                // console.log(res.tempFilePath)//最终图片路径
                resolve(res.tempFilePath)
              },
              fail: function (res) {
                console.log(res.errMsg)
              }
            })
          }, 1000))
        },
        fail: function (res) {
          console.log(res.errMsg)
        },
      })
    })
  }

发布活动图文描述，支持文字、图片、视频等
如果想直接在微信小程序上编辑图文信息，大家第一想到的是富文本编辑器editor,目前还不支持视频上传，所以需自定义封装一个富文本编辑器及利用组件wxParse进行解析展示

//1、首先利用自定义组件编辑文字、图片、视频
//2、利用组件[wxParse]加载图文描述

设置活动开奖日期，支持在设定开奖日期后随机从参与抽奖人员中选取中奖人员

    //随机获取表中的记录
    select * from table order by rand()

生成带小程序二维码及奖品简述的分享图片，方便微信分享

//1、首先获取对应小程序路径下的小程序二维码
//2、然后使用固定背景图片或自动讲小程序二维码图片指定画在某个位置

微信服务通知，即在设定开奖日期后，使用通过微信订阅消息通知参与抽奖微信用户

//1、用户参与抽奖时允许wx.requestSubscribeMessage(Object object)
//2、后台调用微信小程序服务代码 https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/subscribe-message/subscribeMessage.send.html

参考界面效果如下：

小萱花抽奖.jpg

微信小程序-活动抽奖

猜你喜欢

热点阅读