小程序如何分享到朋友圈
2019-01-08 本文已影响2人
Luciena
背景：
微信生态下，很好搞裂变，去拉更多的新用户。那利用小程序的属性能足够做到什么样的裂变场景呢？
方案：
-
小程序直接分享到群聊，其他用户打开，达到裂变新用户的目的。
-
小程序生成二维码图片，用户主动分享到朋友圈，用户长按识别二维码，达到裂变的目的。
技术方案
一比较好解决
二需要我们利用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"
})
}
})
},
至此所有问题，基本都已解决。
