微信小程序生成详情页面二维码
在获取二维码之前我们首先要获取到access_token。
1.获取access_token
官方接口:https://api.weixin.qq.com/cgi-bin/token?appid= ‘’&secret=’’ ;
appid和secret就是小程序的appid和密钥，可以在微信公众号平台上面查看自己的小程序信息。
2.生成详情页面的二维码，可以传递参数的那种
在这里我使用的官方接口：
https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=" + access_token
还需要传递两个参数二维码生成的页面，和二维码的宽度
注意这两个参数的传递格式是json格式的：
data:{
"path":"pages/index/index?query=' ' ",
"width":120
}
这两个接口在前端也可以直接使用生成二维码，但是发布在线上的小程序就不能生成二维码了，因为接口请求的不能是https://api.weixin.qq.com
这里我们需要在后端处理生成二维码接口，具体后端代码如下图所示：
@SuppressWarnings("resource")
@ApiOperation(value = "生成二维码", notes = "发送到前端")
@ApiImplicitParam(name = "id", value = "id", paramType = "query", required = true, dataType = "Long")
@RequestMapping("/getCode")
private void getCode(@RequestParam Long id, HttpServletResponse response) throws IOException {
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
String grant_type = "client_credential";
String appid = " "; //你的appid
String secret = " "; //你的密钥
String param = "grant_type=" + grant_type + "&appid=" + appid + "&secret=" + secret;
String ft = HttpRequest.sendGet("https://api.weixin.qq.com/cgi-bin/token", param);
// 解析相应内容（转换成json对象）
JSONObject json = JSON.parseObject(ft);
// 拿到accesstoken
String access_token = (String) json.get("access_token");
String path = "pages/index/index?id=" + id;
int width = 110;
String params = "{\"path\":\"" + path + "\",\"width\":" + width + "}";
params = JSON.parseObject(params).toJSONString();
BufferedImage image = HttpRequest
.postWechatImage("https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=" + access_token, params);
ImageIO.write(image, "JPEG", response.getOutputStream());
}
这里此接口返回给前端的直接就是二维码的图片。
postWechatImage方法的实现如下:
/**
* 请求微信二维码图片 返回BufferedImage
*
* @param url 发送请求的 URL
* @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。
* @return BufferedImage
*/
public static BufferedImage postWechatImage(String url, String param) {
PrintWriter out = null;
InputStream inputStream = null;
BufferedImage image = null;
try {
URL realUrl = new URL(url);
// 打开和URL之间的连接
URLConnection conn = realUrl.openConnection();
// 设置通用的请求属性
conn.setRequestProperty("accept", "*/*");
conn.setRequestProperty("connection", "Keep-Alive");
conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
// 发送POST请求必须设置如下两行
conn.setDoOutput(true);
conn.setDoInput(true);
// 获取URLConnection对象对应的输出流
out = new PrintWriter(conn.getOutputStream());
// 发送请求参数
out.print(param);
// flush输出流的缓冲
out.flush();
inputStream = conn.getInputStream();
image = ImageIO.read(inputStream);
} catch (Exception e) {
System.out.println("发送 POST 请求出现异常！" + e);
e.printStackTrace();
}
// 使用finally块来关闭输出流、输入流
finally {
try {
if (out != null) {
out.close();
}
} catch (Exception ex) {
ex.printStackTrace();
}
}
return image;
}
2.前端实现过程：
// 生成页面的二维码
uni.request({
url: "https://wx.zzsnqyjxh.org/test/app/user/getCode?id=" + that.id,
// url: 'http://192.168.1.166:9001/test/app/user/getCode?id=' + that.id,
method: "POST",
success(res) {
that.qrcode ='https://wx.zzsnqyjxh.org/test/app/user/getCode?id='+ that.id; //这个接口就是图片地址
// 转化成base64为保存
that.codeTobase64(that.qrcode);
}
});
}
转化为base64是用于绘制画布，绘制画布时不能是在线图片地址
绘制画布保存二维码的代码如下：
//先对图片进行处理
// 转化二维码
// 绘制网略图片
var codePath = wx.env.USER_DATA_PATH + '/goods' + 'invite' + '.png'; //创建名为invite的本地文件
var codeData = this.codetoBase64Url.replace(/^data:image\/\w+;base64,/, ""); //清除base64前缀
var ft = wx.getFileSystemManager(); //获得文件系统管理器 用于操作临时文件
完整的小程序保存二维码的代码如下：
//小程序端保存图片
saveImage() {
uni.showLoading({
title: '图片绘制中...',
})
// 转化二维码
// 绘制网略图片
var codePath = wx.env.USER_DATA_PATH + '/goods' + 'invite' + '.png'; //创建名为invite的本地文件
var codeData = this.codetoBase64Url.replace(/^data:image\/\w+;base64,/, ""); //清除base64前缀
var ft = wx.getFileSystemManager(); //获得文件系统管理器 用于操作临时文件
const context = uni.createCanvasContext('myCanvas')
context.setFillStyle('#FFFFFF')
context.setFillStyle('#1E1E1E') //文字颜色：默认黑色
context.setFontSize(16); //设置字体大小，默认10
context.textAlign = 'center' // 设置位置
context.font = 'normal bold 12px sans-serif'; // 字体样式
context.fillText(this.goodsName, 100, 265, 200, 20);
context.setFillStyle('#FF0060');
context.fillText('抢购价:' + '￥' + this.price, 50, 290, 200, 20);
context.drawImage("../../static/discount.png",100,270,120,24);
context.setFillStyle('#FFFFFF');
context.fillText("再享最高6折优惠",160, 285,132,24);
ft.writeFileSync(codePath, codeData, "base64"); //文件路径 存入内容 编码格式 可以直接使用imgPath来进行操作
context.drawImage(codePath, 100, 300, 106, 106); //二维码
// 绘制网略图片
var goodsPath = wx.env.USER_DATA_PATH + '/goods' + 'dalaba' + '.png'; //创建名为invite的本地文件
var imgData = this.toBase64Url.replace(/^data:image\/\w+;base64,/, ""); //清除base64前缀
var fst = wx.getFileSystemManager(); //获得文件系统管理器 用于操作临时文件
fst.writeFileSync(goodsPath, imgData, "base64"); //文件路径 存入内容 编码格式 可以直接使用imgPath来进行操作
context.drawImage(goodsPath, 20, 0, 250, 250); //图片
//重点：这边本来保存图片是写在draw之后，但第一次保存时空白，第二次才生效，写在draw回调里面就OK了。
context.draw(false, function() {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function(res) {
uni.hideLoading()
// console.log(res.tempFilePath)
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(res) {
uni.showToast({
title: '图片已保存'
})
}
})
}
})
})
},
3.将图片转化为base64为的代码如下：
urlTobase64(url) {
var toBase64Url;
uni.request({
url: url,
method: 'GET',
responseType: 'arraybuffer',
success: async res => {
let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
}
});
},