小程序云开发生成二维码并保存到文件

柔光的暖阳◎ 2023-01-15 15:30 165阅读 0赞

小程序云开发  
[云开发][Link 1]已经出来很久的时间了，但是一直没有使用，原因是一些基本框架都还在原来的服务。这次想参考[礼物小盲盒][Link 1]做一个小程序。内容比较简单，刚好适合拿来做云开发练手，就从此开启云开发之路。

云开发整体使用还是比较方便的，这里不作过多的介绍，重点说下今天开发遇到的第一个小小的环节，生成一张二维码分享图可以保存分享到朋友圈。

页面效果  
![在这里插入图片描述][20210423105516346.png]

实现方法  
先来看看官方提供的文档：云开发获取小程序码

接口方法：[openapi.wxacode.getUnlimited][Link 1]  
需在 config.json 中配置 wxacode.getUnlimited API 的权限  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]

1.  在 config.json 中配置 wxacode.getUnlimited API 的权限  
    在你云函数下的config.json文件中，增加以下代码：

{ 
      "permissions": { 
        "openapi": [
          "wxacode.getUnlimited"
        ]
      }
    }

1.  scene只支持32个可见字符  
    如果你的参数过长，则需要将参数进行缩短，可以通过短码，短参数名的方式。我这里只需要一个boxId，刚好32位，这里直接使用boxId。
2.  云端生成二维码并保存  
    分享图除了二维码，还需要一些其他信息，这些信息是通过本地使用canvas进行绘制，而二维码需要从服务端生成。因为需要请求云函数，获取生成的二维码链接。

由于wxacode.getUnlimited返回结果图片buffer，这里使用云文件管理的方法，将获取到的buffer 写入本地文件，然后返回云文件ID给小程序端。

来看代码：

```go
    async function getQrCode(scene, page, fileName) { 
        try { 
            var fileName = 'qrcode/' + fileName + '.png';
            const result = await cloud.openapi.wxacode.getUnlimited({ 
                scene: scene,
                page: page
            })
            if (result && result.buffer) { 
                var res = await cloud.uploadFile({ 
                    cloudPath: fileName,
                    fileContent: result.buffer,
                })
                if (res.fileID) { 
                    return res.fileID
                }
            }
            return false
        } catch (err) { 
            console.error(err)
            return false
        }
    }

这里没有对二维码是否已经存在做检查，每次调用都会重新生成。因此在外部调用的地方需要检查是否已经生成，提高性能。

云开发文件存储相关API ：[https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html][Link 1]

将fileID 直接返回给小程序端，即可展示二维码。  
但是这里还需要在小程序端画出分享图

1.  生成分享图  
    这里使用canvas绘制图片，但是canvas绘制图片需要为本地图片，先通过  
    wx.getImageInfo获取本地临时File地址。

loading: function (qrcode, avatarUrl, qrBackground) { 
        	var _this = this;
            var a = new Promise(function (r, j) { 
                wx.getImageInfo({ 
                    src: qrcode,
                    success: function (t) { 
                        r(t);
                    }
                });
            }), b = new Promise(function (r, j) { 
                wx.getImageInfo({ 
                    src: avatarUrl,
                    success: function (t) { 
                        r(t);
                    }
                });
            }), c = new Promise(function (r, j) { 
                wx.getImageInfo({ 
                    src: qrBackground,
                    success: function (n) { 
                        r(n);
                    }
                });
            });
            Promise.all([a, b, c]).then(function (t) { 
                _this.createNewImg(t[0].path, t[1].path, t[2].path);
            });
        },
       
        createNewImg: function (qrcode, avatarUrl, qrBackground) { 
            var _this = this, config = _this.data.config, canvas = wx.createCanvasContext("myCanvas");
            canvas.drawImage(qrcode, 260, 393, 150, 150),
            canvas.drawImage(qrBackground, 0, 0, 670, 670),
            canvas.font = "normal bold 28px simhei",
            canvas.fillStyle = "#000000";
            var s = 335 - canvas.measureText("礼物份数：" + _this.data.num + "份").width / 2;
            canvas.fillText("礼物份数：" + _this.data.num + "份", s, 173), canvas.font = "normal bold 50px simhei",
            canvas.fillStyle = "#000000";
            var qrTxt = config.giftConfig.qrTxt;
            if (qrTxt.length > 10) { 
                var u = 335 - canvas.measureText(qrTxt.substr(0, 10)).width / 2, r = 335 - canvas.measureText(qrTxt.substr(10, 100)).width / 2;
                canvas.fillText(qrTxt.substr(0, 10), u, 250), canvas.fillText(qrTxt.substr(10, 100), r, 325);
            } else { 
                var f = 335 - canvas.measureText(qrTxt).width / 2;
                canvas.fillText(qrTxt, f, 250);
            }
            canvas.arc(335, 468, 35, 0, 2 * Math.PI, !0), 
            canvas.clip(), 
            canvas.drawImage(avatarUrl, 300, 433, 70, 70),
            canvas.stroke(), 
            canvas.draw(), 
            setTimeout(function () { 
                wx.canvasToTempFilePath({ 
    	            canvasId: "myCanvas",
    	            success: function (n) { 
    	                var e = n.tempFilePath;
    	                wx.hideLoading(), 
    	                _this.setData({ 
    	                    url: e
    	                });
    	            },
    	            fail: function (t) {  }
            });
            }, 500);
        },

再通过wx.canvasToTempFilePath函数将canvas 保存为本地临时文件，将url设置并展示即可。

wxml代码示例：

还有保存按钮申请存储权限这里就不说了，属于小程序基本操作。

[Link 1]: http://github.crmeb.net/u/defu
[20210423105516346.png]: /images/20221022/99555310dd1045588cbcbbffb85e2c8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221022/76a0aefba76249e7a436c0a09967227a.png