小程序生成二维码分享朋友圈的功能

一、如何生成小程序分享页面的二维码？

通过后台接口可以获取小程序任意页面的二维码，具体可以参考https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html

可以选择你所需要的小程序码，给到后台相应的参数生成即可。

这里说一下B接口的参数scene，关于scene参数，小程序的解释如下：

注意：通过该接口生成的小程序码，永久有效，数量暂无限制。用户扫描该码进入小程序后，开发者需在对应页面获取的码中 scene 字段的值，再做处理逻辑。使用如下代码可以获取到二维码中的 scene 字段的值。调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟，开发工具模拟时的 scene 的参数值需要进行 urlencode

其实我理解的这个scene参数就是你要分享的那个页面的id，所以在你要分享的那个页面（也就是page参数）得做个逻辑判断，是否为二维码扫进去的。

 

可以使用这个编译工具帮助你测试，注意这个pages里面的页面必须是已经发布的小程序存在的页面。

onLoad: function (options) {
    var that = this;
    if (options.id ) {
      that.setData({ id: options.id });
    } else {
      that.setData({ id: decodeURIComponent(options.scene) });
    }

二、如何制作画布及分享朋友圈？

小程序没有自带分享朋友圈的功能，因此需要自己把下载的二维码及你要分享的内容利用canvas绘制上去，画布转成图片后保存到相册，分享图片后通过长按二维码进入到相对应的页面。

wxml里面画布布局，就随便简单写了个分享按钮。注意canvas布局的时候要定位到看不到的地方。

<button class='share_quan' bindtap='share_quan'>分享朋友圈</button>
<!-- 画布 -->
<canvas  canvas-id="shareImg" style="width:600px;height:800px;"></canvas>
<view hidden='{{hidden}}'>    
<image src='{{imgurl}}'></image>
<button  bindtap='save'>保存图片到相册</button>
</view>

1、下载图片，必须要通过wx.downloadFile（）先把图片下载到本地，不然后面画不上去

Page({
  data: {
    hidden: true,
    code: "",
    title: "",
    imgs:"",
    imgUrl:""
  },

//我这里的imgurl是已经请求出来的图片路径。这里需要注意的是，img的域名如果是http的可能要改为https的，不然后面图片不会出来。
        wx.setStorage({ //数据存储下来，当时做这个需求时并没有存储，直接下载的图片去绘制的，但是电脑上可以出来，手机不能。所以就多了这一步，有点坑
          key: "key",
          data: that.data.imgUrl,
          success:function(res){
            // 下载图片
            wx.downloadFile({
              url: that.data.imgUrl,
              success: function (res) {
                console.log('我是下载的图片：' + res.tempFilePath);
                that.setData({
                  imgs: res.tempFilePath  
                })
              }
            })
          }
        })

2、下载二维码

 // 下载二维码
        wx.downloadFile({
          url: '二维码接口scene=id&page=pages/index/index',//下载的二维码的地址和参数
          success: function (res) {
            that.setData({
              code: res.tempFilePath  
            })
          },
          fail: function (res) {
          }
        })

3、有了图片和二维码之后，就是绘制画布了

 // canvas绘制文字和图片
      const ctx = wx.createCanvasContext('shareImg');
      ctx.drawImage(that.data.code, 210, 525, 115, 145); //绘制二维码
      ctx.drawImage(that.data.imgs, 90, 50, 380, 350);  //绘制图片
      ctx.setTextAlign('center')                        
      ctx.setFillStyle('black')                      
      ctx.setFontSize(28)                              
      ctx.fillText("我是文字部分....", 600 / 2, 450,600)
      ctx.setFillStyle('gray') 
      ctx.fillText("长按二维码....", 600/2, 740)
      ctx.stroke()
      ctx.draw()

4、画布生成图片

share_quan: function () { //点击分享朋友圈，画布生成图片
    var that = this;
    wx.showLoading({
      title: '图片正在生成中...'
    })
    setTimeout(function () {  //这里要加定时器，转成图片需要一定的时间，不然是不出来图片的哦
      // canvas画布转成图片
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 600,
        height: 800,
        destWidth: 480,
        destHeight: 550,
        canvasId: 'shareImg',
        fileType: 'jpg' ,  //这里为图片格式，最好改为jpg，如果png的话，图片存到手机可能有黑色背景部分
        success: function (res) {
          that.setData({
            imgurl: res.tempFilePath,
            hidden: false    
          })
          wx.hideLoading()
        },
        fail: function () {
          console.log("保存失败......")
        }
      })
    }, 2000)
  },

5、点击保存到相册

  save: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imgurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册',
          showCancel: false,
          confirmText: '好的',
          success: function (res) {
            if (res.confirm) {
              console.log('用户确定了');
              that.setData({
                hidden: true
              })
            }
          }
        })
      },
  },

这上面的画布大小自己和那些文字以及图片的位置根据需求定，生成的图片大小也一样