微信小程序生成海报图

使用 snapshot 组件生成海报

使用过程遇到的问题：

ts基础的小程序开发没有问题。

应用到js基础的小程序会出现已定义的变量在实际赋值过程中报如下错误：

SystemError (jsEnginScriptError) Cannot read properties of undefined (reading '_') TypeError: Cannot read properties of undefined (reading '_')

官方回复：目前已知一个问题，当从开启了 componentFramework: glass-easel 的自定义组件中 import 或者 include 另一个分包中的 WXML 模板，且这个模板既不属于一个开启了 glass-easel 的组件，也未被它所在分包内的其他 glass-easel 组件 import 或者 include 时，会导致这个报错；原因是目前跨分包的模板依赖分析存在一些问题。可以验证下这个报错是否属于这种情况，如果是的话，可以在我们修复完成前通过将目标模板复制一份到同一个分包内来暂时规避，我们会尽快修复。

目前没有再试，因为对项目影响太大，不知道哪里就不能用了，暂不知道是否已修复​​​​​​​

要求：

1、在app.json里边设置

"rendererOptions": {
        "skyline": {
            "defaultDisplayBlock": true,
            "disableABTest": true,
            "sdkVersionBegin": "3.0.0",
            "sdkVersionEnd": "15.255.255"
        }
    },

2、在想使用snapshot的页面的json里设置

 "renderer": "skyline" ,

3、使用方式

//width 和 height 是要生成的海报图大小，最好使用要生成的图片大小，要不会有白边 
<snapshot id="view" width="{{ imgObj.width }}" height="{{ imgObj.height }}">
    海报内容
</snapshot>

//生成海报并下载
 this.createSelectorQuery().select("#view")
            .node().exec(res => {
                const node = res[0].node
                // 保存海报
                node.takeSnapshot({
                    type: 'arraybuffer',
                    format: 'png',
                    success: (res) => {
                        const f = `${wx.env.USER_DATA_PATH}/${util.uuid()}.png`
                        const fs = wx.getFileSystemManager();
                        // 将海报数据写入本地文件
                        fs.writeFileSync(f, res.data, 'binary')
                        this.setData({
                            img: f
                        })

                        // 把海报图片保存到本地
                        wx.saveImageToPhotosAlbum({
                            filePath: f,
                            success(data) {
                                wx.showToast({
                                    title: '图片保存成功',
                                    icon: 'none'
                                })
                            },
                            fail(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: '需要您授权保存相册',
                                        showCancel: false,
                                        success: modalSuccess => {
                                            wx.openSetting({
                                                success(settingdata) {
                                                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                                                    } else {
                                                        console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                                                    }
                                                }
                                            })
                                        }
                                    })
                                }
                            }
                        })
                    },
                    fail(error) {
                        console.log("fail", error)
                    }
                })
            })

使用skyline需要注意的点：

1、开启对应模式

2、使用overflow设置view滚动不起作用，如果页面想设置滚动使用<scroll-view type="list"></scroll-view>