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

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

浏览量:495 时间: 来源:TinaAsura

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

通过后台接口可以获取小程序任意页面的二维码,具体可以参考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              })            }          }        })      },  },
这上面的画布大小自己和那些文字以及图片的位置根据需求定,生成的图片大小也一样



微信小程序

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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