背景:

微信生态下,很好搞裂变,去拉更多的新用户。那利用小程序的属性能足够做到什么样的裂变场景呢?

方案:

小程序直接分享到群聊,其他用户打开,达到裂变新用户的目的。
小程序生成二维码图片,用户主动分享到朋友圈,用户长按识别二维码,达到裂变的目的。

技术方案

一比较好解决
二需要我们利用canvas来将页面的小程序码跟背景图绘制到一起,我们主要探讨下二

需要解决的问题都有哪些?

如何获取某一页面的小程序码?
如何绘制小程序码?
如何保存小程序码?

实践的方式如下

第一个问题:官方提供的生成无限小程序码的接口
第二个问题:
// 核心代码 // 获取当前路径 let that = this if (!ctx) { wx.showLoading({ title: '绘制中...', }) var mpCodeP = new Promise(function (resolve) { wx.getImageInfo({ src: that.data.image, success: function (res) { resolve(res.path) } }) }) var bgP = new Promise(function (resolve) { wx.getImageInfo({ src: 'https://wx-static.yangcong345.com/v_1_8_0_assistVip_scan_moments.png', success: function (res) { resolve(res.path) } }) }) Promise.all([mpCodeP, bgP]).then(function (result) { ctx = wx.createCanvasContext('shareCanvas', that) // 小程序码 const qrImgSize = 170 ctx.drawImage(result[0], (that.data.toastImage_fg_height / 2 - qrImgSize) / 2 - 60, (that.data.toastImage_fg_width / 2 - qrImgSize) / 2 + 60, qrImgSize, qrImgSize) ctx.drawImage(result[1], 0, 0, 280, 375) ctx.stroke() ctx.draw() // 把canvas绘制的图片 wx.canvasToTempFilePath({ canvasId: 'shareCanvas', success: function (res) { canvasToTempFilePath = res.tempFilePath wx.showToast({ title: '绘制成功', }) }, fail: function () { wx.showToast({ title: '绘制失败', }) }, complete: function () { that.setData({ isShow: !that.data.isShow }) wx.hideLoading() wx.hideToast() } }, that) }) }
第三个问题:
// 核心代码 // 把图片存到本地 saveImageToAlbum: function (tempFilePath_image) { var that = this wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 用户已经同意小程序使用相册 that.saveImageToUserPhotosAlbum(tempFilePath_image) }, fail() { wx.openSetting({ success: (res) => { } }) } }) } else { // 用户已经同意小程序使用相册 that.saveImageToUserPhotosAlbum(tempFilePath_image) } } }) }, // 把图片存储到用户手机相册里 saveImageToUserPhotosAlbum: function (tempFilePath_image) { wx.saveImageToPhotosAlbum({ filePath: tempFilePath_image, success: function (res) { wx.showToast({ title: '保存图片成功', image: "https://wx-static.yangcong345.com/v_1_8_0_receiveVip_complete.png" }) }, fail: function (err) { wx.showToast({ title: '保存图片失败', image: "https://wx-static.yangcong345.com/v_1_8_0_receiveVip_close.png" }) } }) },
至此所有问题,基本都已解决。