最近涉及到微信小程序分享到朋友圈，不知道微信为什么不直接接口分享，咱也不敢佛，咱也不敢问，只能百度问度娘，看官方文档，网上的一些分享五花八门，每一个重点的，所以整理了一下到底怎样生成二维码分享图片才是正确的，做了如下总结
说实话踩了很多坑，最大的坑就是把获取微信小程序二维码的事情在前端做了，人家明确说了不要在前端做，可是没好好看官方文档。
1，获取带参数二维码
2.将二维码传到前端
3 将二维码及其他信息画到canvas上
4 保存到相册
5 开开心心分享朋友圈
一步一步来
1，获取带参二维码
微信提供了三个接口
链接如下：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
一定要好好看文档，这个接口是后台调用的，后台，后台，后台，重要的事情说三遍
上服务器代码（注意：access_token是有过期时间的。获取时要注意哦）
func getWXcode(id int64, accessToken string) []byte {
path := "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + accessToken
client := &http.Client{}
params := `{"scene":"calendarId=` + strconv.FormatInt(id, 10) + `", "page": "pages/ClassSchedule"}`
reqBody := bytes.NewBuffer([]byte(params))
request, _ := http.NewRequest("POST", path, reqBody)
request.Header.Set("Content-type", "application/json")
response, _ := client.Do(request)
if response.StatusCode == {
body, err := ioutil.ReadAll(response.Body)
if err != nil {
log.Logger.Debug("fail to get QRCode", zap.Error(err))
}
return body
}
return nil
}
注意返回的是图片的字节，利用gin框架返回图片
2.将二维码传到前端
func (api *ScheduleAPI) WxCode(c *gin.Context) {
id, err := api.ValidateInt64Id(c)
if err != nil {
api.BadRequest(c)
}
accessToken, err := RequestToken(AppId, AppSecret)
if err != nil {
api.BadRequest(c)
return
}
c.Writer.Header().Set("Content-Type", "image/png")
_, err = c.Writer.Write(getWXcode(id, accessToken))
if err != nil {
log.Logger.Debug("fail to write QRCode", zap.Error(err))
}
}
后台基本就是这个样子的了，接下来就是前端如何处理，前端获取图片后会保存到临时目录，这个看文档应该就清楚了
3 将二维码及其他信息画到canvas上
shareImage () {
console.log('that.access_token', this.access_token)
this.sharePop = false
var that = this
wx.showLoading({
title: '图片生成中...'
})
wx.downloadFile({
url:
'https://后台获取图片你地址/' + this.calendarId + '/code',
success: function (res) {
wx.downloadFile({
url: that.user.avatarId,
success: function (res3) {
const ctx = wx.createCanvasContext('shareCanvas')
ctx.setFontSize(50)
ctx.drawImage(res3.tempFilePath, 250, 20, 200, 200)
ctx.fillText(that.user.nickname, 250, 300, 100)
ctx.fillText('分享', 400, 300, 100)
ctx.fillText(that.calendar.name, 250, 400, 500)
ctx.drawImage(res.tempFilePath, 150, 450, 500, 600)
ctx.fillText('长按识别小程序，查看课程详细', 150, 1150, 500)
ctx.stroke()
ctx.draw()
// loading
setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 800,
height: 1200,
destWidth: 480,
destHeight: 550,
canvasId: 'shareCanvas',
fileType: 'jpg',
success: function (res2) {
that.imageurl = res2.tempFilePath
wx.hideLoading()
that.canvasDialog = true
},
fail: function (err) {
console.log('errr111', err)
console.log('生成失败......')
wx.hideLoading()
}
})
}, 2000)
},
fail: function (err) {
console.log('1111', err)
}
})
},
fail: function (err) {
console.log(err)
}
})
},
仔细瞧你会发现有两个wx.downloadFile解释一下，一个是我们生成的二维码，一个是用户信息的头像，这个canvas 画完之后就是要显示一下了，就是个图片显示一下好了
4 保存到相册
div.shareimage
canvas(canvas-id="shareCanvas",style="width:800px;height:1200px;")
van-dialog.dialogPop(use-slot='', :show='canvasDialog', show-cancel-button='', @cancel='onClose("canvasDialog")' @confirm='saveImage' cancel-button-text="取消" confirm-button-text="保存到相册" )
.df-col-ac.py-20p
image(:src="data:imageurl" style="width: 200px; height: 300px")
van-toast#van-toast
本人用的pug格式的html，看不明白的下次讲讲开发效率的问题
保存代码如下：
saveImage () {
// debugger
var that = this
that.canvasDialog = false
wx.saveImageToPhotosAlbum({
filePath: that.imageurl,
success (res) {
wx.showModal({
content: '图片已保存到相册',
showCancel: false,
confirmText: '好的',
success: function (res) {
if (res.confirm) {
console.log('用户确定了')
}
}
})
}
})
},
最后一步就去分享吧
获取sence的传递的值
onLoad (options) {
if (options.scene) {
let scene2 = decodeURIComponent(options.scene)
//按照传递的值进行拆分。例如
var str = scene2.split('=')
shopId = str[1]
}
}
总结：
canvas是真的不好画，调不对格式呀，欢迎讨论，谢谢
转载请表明出处。