记录微信小程序原生截图功能，使用Skyline框架的snapshot

截图内容较复杂，不想使用canvas,微信官方有提供snapshot组件，调用其Snapshot.takeSnapshot方法实现

官方上线文档

注意：上线需AB 实验或直接如下配置app.json配灰度方案否则点击无效果

配置 app.json:

"lazyCodeLoading": "requiredComponents",
  "rendererOptions": {  "skyline": {
    "defaultDisplayBlock": true,
    "defaultContentBox": true,
    "tagNameStyleIsolation": "legacy",
    "enableScrollViewAutoSize": true,
    "disableABTest": true,
    "sdkVersionBegin": "3.0.1",
    "sdkVersionEnd": "15.255.255"
  }}

配置页面json：

"renderer": "skyline",
   "componentFramework": "glass-easel",
   "disableScroll": true,
   "navigationStyle": "custom",

页面实现js：

    takeSnapshot() {
        this.createSelectorQuery()
            .select("#targetArea")
            .node()
            .exec(res => {
                const node = res[0].node
                node.takeSnapshot({
                    type: 'arraybuffer',
                    format: 'png',
                    success: (res) => {
                        wx.showLoading({
                            title: '请稍后',
                          })
                        // 处理截图数据
                        const buffer = res.data
                        // 保存到本地文件
                        const filePath = `${wx.env.USER_DATA_PATH}/screenshot.png`
                        wx.getFileSystemManager().writeFile({
                            filePath,
                            data: buffer,
                            success: () => {
                                wx.saveImageToPhotosAlbum({
                                    filePath,
                                    success: function () {
                                        wx.showToast({
                                            title: "保存成功",
                                            icon: "success",
                                            duration: 2000,
                                        });
                                    },
                                    fail(err) {
                                        console.log(err);
                                        if (
                                            err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
                                            err.errMsg === "saveImageToPhotosAlbum:fail auth deny" ||
                                            err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"
                                        ) {
                                            wx.showModal({
                                                title: "提示",
                                                content: "需要您授权保存相册",
                                                success: (modalSuccess) => {
                                                    console.log(modalSuccess);
                                                    if(modalSuccess.confirm){
                                                        wx.openSetting({
                                                            success(settingdata) {
                                                                if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                                                                    wx.saveImageToPhotosAlbum({
                                                                        filePath,
                                                                        success: function () {
                                                                            wx.showToast({
                                                                                title: "保存成功",
                                                                                icon: "success",
                                                                                duration: 2000,
                                                                            });
                                                                        },
                                                                    });
                                                                } else {
                                                                    wx.showToast({
                                                                        title: "授权失败，请稍后重新获取",
                                                                        icon: "none",
                                                                        duration: 1500,
                                                                    });
                                                                }
                                                            },
                                                        });
                                                  }

                                                },
                                            });
                                        }
                                    },
                                });
                            },
                            complete:()=>{
                                wx.hideLoading()
                            }
                            
                        })
                    }
                })
            })
    },

页面wxml:

 <snapshot mode="view" id="targetArea">
  </snapshot>