生成微信小程序码并保存到相册

有时候需要进行将小程序码保存，并且携带相关的信息再做逻辑处理，下面演示小程序码的 生成流程，我这里用的是生成小程序码的B接口：微信官方文档传送门

首先看一下js相关代码：

//生成小程序码
    createCode : function(e){
        let appid = Const.appid;
        let screat = Const.appSecret;
        let accessToken = '';
        let self = this;
        wx.request({
            url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + screat,
            method : 'GET',
            success : function(res){
                console.log("res is ",res);
                accessToken = res.data.access_token;
                console.log("accessToken is ",accessToken);
                wx.request({
                    url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+accessToken,
                    method : 'POST',
                    responseType : 'arraybuffer',
                    data : {
                        scene   : 'test',
                        page    : 'pages/zcw/user/user',
                        width   : 280,
                        is_hyaline : false      
                    },
                    header : {
                        'content-type' : 'application/json;charset=utf-8'
                    },
                    success : function(res){
                        console.log("---->>res is ",res);
                        console.log("res.data is ",res.data);
                        let fsm = wx.getFileSystemManager();
                        let base64 = wx.arrayBufferToBase64(res.data);
                        base64 = 'data:image/PNG;base64,' + base64;
                        self.setData({
                            url : base64
                        })
                        let base64DataIndex = base64.indexOf('base64,') + 7;
                        console.log("base64 data is ",base64);
                        const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
                        console.log("format is ",format);
                        let timestamp = new Date().getTime();
                        let filePath = `${wx.env.USER_DATA_PATH}/${timestamp}.${format}`;
                        if (self.data.systemType === 'iphone'){
                            fsm.writeFile({
                                filePath,
                                data : base64.slice(base64DataIndex),
                                encoding: 'base64',
                                success : function(){
                                    console.log("filePath is ",filePath);
                                    let qrCodeCanvas = wx.createCanvasContext('qrcode-canvas', self);
                                    console.log("canvas is ",qrCodeCanvas);
                                    qrCodeCanvas.drawImage(filePath,80,5,200,200);
                                    qrCodeCanvas.draw(true,function(){
                                        //保存图片到相册
                                        self.createImageFromCanvas();
                                    });
                                }
                            })
                        }else{
                            //安卓系统环境
                            fsm.writeFile({
                                filePath,
                                data: res.data,
                                encoding: 'binary',
                                success: function () {
                                    let qrCodeCanvas = wx.createCanvasContext('qrcode-canvas', self);
                                    console.log("安卓环境下canvas is ", qrCodeCanvas);
                                    console.log("安卓环境下filePath is ",filePath);
                                    qrCodeCanvas.drawImage(filePath, 80, 5, 200, 200);
                                    qrCodeCanvas.draw(true,self.createImageFromCanvas);
                                }
                            })
                        }
                    }
                })
            }
        })

    },
    //从canvas上生成图片
    createImageFromCanvas : function(){
        let self = this;
        wx.canvasToTempFilePath({
            x: 80,
            y: 5,
            width: 200,
            height: 200,
            destWidth: 200,
            destHeight: 200,
            canvasId : 'qrcode-canvas',
            success: function (res) {
                console.log("从画布中转换的图片路径是：", res.tempFilePath);
                //将临时路径的图片保存到相册中去
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function (res) {
                        console.log("保存到相册的二维码图片是：", res);
                    },
                    fail: function () {
                        console.log("保存到相册失败");
                    },
                    complete: function () {
                        console.log("保存到相册完成");
                    }
                },self)
            }
        })
    }

但是这里是简要的做一下测试，'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + screat和https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+accessToken这两个接口最好交给小程序的后台进行请求，这样就会比较安全。

wxml对应的canvas结构是：

<canvas canvas-id='qrcode-canvas' style='width:600rpx;height:400rpx;' class='code-canvas'>
     <!-- <image src='{{url}}'></image> -->
  </canvas>

另外在安卓机型中生成的图片会出现白背景或者是黑背景的问题，具体原因是因为微信的版本问题，升级微信的版本到最新版就可以了，

苹果机型没有该问题出现