微信小游戏生成带玩家信息的朋友圈海报

闲来没事，发现小田田上有个分享至朋友圈的功能，点击可以生成一份带玩家信息的游戏二维码海报，下面来还原一下怎么做

先来讲一下如何生成带玩家信息的游戏二维码，在微信小游戏文档中可以找到

微信官方文档

因为每个玩家都可能需要生成一个属于ta自己的二维码，所以我们只能选择接口B，这里是前端实现，所以，怎么生成这个二维码

就交给服务器处理了， 流程如下 --> 服务器本身存在token --> wxacode.getUnlimited 获取玩家二维码（此处需要传入需要的玩家信息）

--> 微信返回二维码数据流 --> 调用工具生成二维码 --> 发送二维码地址给小游戏前端

紧接上述此时我们已经有了二维码地址了，海报地址可以放在oss服务器上，或者自行安排，不建议放在小游戏包体中（不灵活，还占内存）

有了两个图片，那么现在如何将他们合并成一张图片

我尝试过使用直接截屏的方案，不过发现方案并不好，海报与二维码都会在主屏上闪一下，然后才能截屏

最终方案是 使用微信小游戏原生 离屏画布 然后通过 canvas.toTempFilePath 实现

下述代码是在cocosCreator中完成，脚本语言使用的是TypeScript / JavaScript , 参杂一些微信官方的搞法

//开始获取离开屏幕 codeUrl 是提前通过Https 从服务器上搞来的地址** 

       //开始获取离开屏幕
       public SaveOffCanvas(codeUrl:string,compelete:Function)
       {
           // 640 1044
           if(cc.sys.platform == cc.sys.WECHAT_GAME)
           {
               const canvas = this.api.createCanvas();
               canvas.width = 640;
               canvas.height = 1044;
               const context = canvas.getContext('2d');

               const shareBg = this.api.createImage();
               shareBg.src = "your shareBg url";

               shareBg.onload = ()=>
               {
                   console.log("背景加载完毕");
                   context.drawImage(shareBg,0,0,canvas.width,canvas.height);

                   const code = this.api.createImage();
                   code.src = codeUrl;
                   code.onload = ()=>
                   {
                       console.log("code load call");
                       context.drawImage(code,66,838,186,186); //微信坐标系以屏幕左上角为坐标原点
                       checkStart();
                   }
               }
               
               //let dpr = cc.view.getDevicePixelRatio();
               //console.log("设备DPR 值： " + dpr);
               let checkStart = ()=>
               {
                    var width  = canvas.width ;
                    var height  = canvas.height ;
                    console.log("保存图片大小 : " + width + " : " + height);
                    canvas.toTempFilePath({
                        success : (res)=> {
                            //.可以保存该截屏图片
                            console.log("临时文件：" + res.tempFilePath);
                            this.api.saveImageToPhotosAlbum({
                                filePath : res.tempFilePath,
                                success:()=>{
                                    console.log("保存图片到相册成功");
                                    compelete(true);
                                },
                                fail:(err)=>{
                                    console.log("保存图片到相册失败 : " + err);
                                    compelete(false);
                                }
                            })
                        }
                    })
               }
           }
       }

以上就是微信小游戏朋友圈海报生成的文档了，有问题可以评论私信，看到了会解答