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













