E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序生成二维码分享朋友圈的功能
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏