需求
1.生成微信小程序自定义参数二维码
2.将二维码拼接背景图生成活动海报保存至相册
效果图
文末已发布代码，有需要请自行获取，如若有问题欢迎交流
开发环境
服务端：php
客户端：uniapp
应用场景：微信小程序
问题
1.怎么生成微信小程序二维码？
2.怎么生成活动海报？
生成小程序二维码-服务端
第一步 获取微信小程序 access_token
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=?&secret=?
请求方式：POST
请求参数：
appid 微信小程序id
secret 微信小程序密钥
请求返回:
buffer 小程序二维码二维数组
微信官方文档.小程序-获取AccessToken
第二步 获取二维码 Buffer
https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
请求方式：POST
请求参数：
scene 二维码参数
page 二维码打开路径
请求返回:
buffer 小程序二维码二维数组
微信官方文档.小程序-获取二维码
第三步 将buffer转换为base64字节码
微信小程序无法直接将buffer保存到图片，所以最好将其转换为base64字节码，通过转换为base64字节码写入到画布，通过保存画布到相册，即可实现保存海报
客户端
创建活动海报
UI代码
<template>
<view class="container">
<view class="contents">
<canvas class="page-content" canvas-id="shareCanvas" style="width:100%;" :style="{ height: height + 'px' }"></canvas>
</view>
<view class="page-bottom flex text-center">
<button class="cu-btn block bg-orange" @tap="selectImage">选择图片</button>
<button class="cu-btn block bg-orange" @tap="saveImage">保存图库</button>
</view>
</view>
</template>
获取二维码
const url ="服务器接口地址";
//加载页面参数
let scene = 'id=' + this.id + '&token=' + this.token + '&type=1';
let params={
page: 'pages/index/index',
scene: scene
}
uni.request({
url: url,
data: params,
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
dataType: 'arraybuffer',//请求字节
success: (res) => {
//获取base64 字符串
var data=res.data;
//拼装base64图片
var img='data:image/png;base64,'+data;
//调起绘制器
this.initImage(img);
}
});
*注意事项：
1.由于从微信官方请求下来的图片字节码不带base64数据头，需要自行拼接，如：
var img='data:image/png;base64,'+data;
2.由于全部为字节码建议dataType设置为arraybuffer，这样可以避免请求乱码
绘制画布
uni.getSystemInfo({
success: function(e) {
console.log(e);
//获取屏幕宽高设置画布宽高
let width = e.windowWidth;
let height= e.screenHeight;
that.height=height;
let topheight = 320;//图片距离上边距离
const ctx = uni.createCanvasContext('shareCanvas');
// 底图
ctx.drawImage(res[0].path, 0, 0, width, height);
//绘制序列从上到下， 通过距离上边高度来排列显示
// 文字内容
ctx.setTextAlign('center'); // 文字居中
ctx.setFillStyle('#F0AD4E'); // 文字颜色：黑色
ctx.setFontSize(22); // 文字字号：22px
ctx.fillText('双十一活动', width / 2, topheight-30);
ctx.setFillStyle('#FFFFFF');
ctx.setFontSize(20);
ctx.fillText('扫码领取更多奖', width / 2, topheight);
// 小程序码
const qrImgSize = 140;
ctx.drawImage(res[1], (width - qrImgSize) / 2, topheight+15 , qrImgSize, qrImgSize);
ctx.stroke();
ctx.draw();
}
});
*注意事项：
1.画布组件显示内容为图层，所以为了铺垫元素，需要注意从上到下元素的间距。
保存到相册
const wxCanvasToTempFilePath = tools.promisify(uni.canvasToTempFilePath);
const wxSaveImageToPhotosAlbum = tools.promisify(uni.saveImageToPhotosAlbum);
wxCanvasToTempFilePath(
{
canvasId: 'shareCanvas'
},
this
).then(res => {
return wxSaveImageToPhotosAlbum({
filePath: res.tempFilePath
});
})
.then(res => {
wx.showToast({
title: '已保存到相册'
});
});
