微信小程序生成详情页面二维码

在获取二维码之前我们首先要获取到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 = " "; //你的appidString 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);// 拿到accesstokenString 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); //设置字体大小，默认10context.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转成base64toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示}});},