背景：
微信生態(tài)下，很好搞裂變，去拉更多的新用戶。那利用小程序的屬性能足夠做到什么樣的裂變場景呢？
方案：
小程序直接分享到群聊，其他用戶打開，達(dá)到裂變新用戶的目的。
小程序生成二維碼圖片，用戶主動(dòng)分享到朋友圈，用戶長按識(shí)別二維碼，達(dá)到裂變的目的。
技術(shù)方案
一比較好解決
二需要我們利用canvas來將頁面的小程序碼跟背景圖繪制到一起,我們主要探討下二
需要解決的問題都有哪些？
如何獲取某一頁面的小程序碼？
如何繪制小程序碼？
如何保存小程序碼？
實(shí)踐的方式如下
第一個(gè)問題： 官方提供的生成無限小程序碼的接口
第二個(gè)問題：
// 核心代碼
// 獲取當(dāng)前路徑
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)
})
}
第三個(gè)問題：
// 核心代碼
// 把圖片存到本地
saveImageToAlbum: function (tempFilePath_image) {
var that = this
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
// 用戶已經(jīng)同意小程序使用相冊(cè)
that.saveImageToUserPhotosAlbum(tempFilePath_image)
},
fail() {
wx.openSetting({
success: (res) => { }
})
}
})
} else {
// 用戶已經(jīng)同意小程序使用相冊(cè)
that.saveImageToUserPhotosAlbum(tempFilePath_image)
}
}
})
},
// 把圖片存儲(chǔ)到用戶手機(jī)相冊(cè)里
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"
})
}
})
},
至此所有問題，基本都已解決。
