微信小程序分享生成的二维码页面以及扫描二维码进入页面

一、目的:

    生成包含二维码的海报,可扫码进入


微信小程序分享生成的二维码页面以及扫描二维码进入页面_第1张图片


二、核心步骤

    1、适配(根据比例算出宽高)

        wx.getSystemInfo({

              success: res => {

            // console.log(res,'44');

            this.setData({

              windowWidth: res.windowWidth,

              windowHeight: res.windowHeight,

            });

            this.setData({

              // 屏幕宽度 375px = 750rpx,1px=2rpx

              // 1px = (750 / 屏幕宽度)rpx;

              // 1rpx = (屏幕宽度 / 750)px;

              ratio: 750 / this.data.windowWidth

        });

      }

    });





   2、利用canves绘图

     1.先有一个

    2. let ctx = wx.createCanvasContext('myCanvas')

      ctx.setFillStyle('#a10000')

      ctx.fill()

     // 绘制矩形

      ctx.setFillStyle('#fff') 

      ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight-119)

     //  绘制图片

      let canvas = '/images/img_img_background.png';

      let imgCanvasWidth = 600 / this.data.ratio;

      ctx.drawImage(canvas, 0, 0, imgCanvasWidth, 240 / this.data.ratio)

    //  绘制图片

      let icon = '/images/icon_time_copy.png';

      ctx.drawImage(icon, 40 / this.data.ratio, 264 / this.data.ratio, 32 / this.data.ratio, 32 / this.data.ratio)

      // 时间 

      let feedAt = 'xxxx'

     // 设置字号

      ctx.setFontSize(12)   

     //设置填充图样和颜色

      ctx.setFillStyle('#B2B4C1')

     // 绘制填充文字( 文字, 参考x轴坐标,参考y轴坐标,限制文字的最大长度(可选) )

      ctx.fillText(feedAt, 82 / this.data.ratio, 288 / this.data.ratio)  

     // title

      let title = 'xxxx'

      ctx.setFontSize(17)

      ctx.setFillStyle('#333')

      // 内容

      let context = 'xxx'

    保存图片:

wx.saveImageToPhotosAlbum({

        url: that.data.prurl,

        filePath: that.data.prurl,

        success(res) {

          wx.showModal({

            content: '图片已保存到相册,赶紧晒一下吧~',

            showCancel: false,

            confirmText: '好的',

            confirmColor: '#333',

            success: function (res) {

              if (res.confirm) {

                console.log('用户点击确定');

                that.data.shareText = '已保存到了相册,快去分享吧'

              }

            }

          })

        }

      })

这样子就可以把canves保存成图片了


3.扫描二维码进入对应的分享页面(这里用的是方案A)


微信小程序分享生成的二维码页面以及扫描二维码进入页面_第2张图片



var qrcode = app.globalData.base_url + "v1/wechat/qrcode?autoColor=false&isHyaline=true&path=xxxxx?width=280&id=" + id + "";

注:这个path后面的其实就是你分享后打开进入的页面(onLoad)时候

你可能感兴趣的:(微信小程序分享生成的二维码页面以及扫描二维码进入页面)