记录一下微信小程序使用 Skyline 渲染引擎生成页面海报的流程。

1、单独给页面开启 Skyline 渲染引擎，在 app.json 增加如下配置：

{"lazyCodeLoading": "requiredComponents","rendererOptions": {"skyline": {"disableABTest": true,"sdkVersionBegin": "3.0.1","sdkVersionEnd": "15.255.255"}}
}

2、在页面的配置文件中增加如下配置：

{"usingComponents": {},"renderer": "skyline","navigationStyle": "custom","componentFramework": "glass-easel",
}

3、在 wxml 文件中使用 snapshot 组件包裹要生成海报的 view

<snapshot id="poster" mode="view"><view class="poster">...</view>
</snapshot>

4、生成海报图片

this.createSelectorQuery().select("#poster").node().exec(res => {const node = res[0].nodenode.takeSnapshot({type: 'file',format: 'png',success: (res) => {this.saveImageToLocal(res.tempFilePath);},fail(res) {console.log('保存失败', res);}})
})

5、海报图片保存到本地

  saveImageToLocal(tempFilePath) {wx.saveImageToPhotosAlbum({filePath: tempFilePath,success: (res) => {wx.showToast({title: '保存成功',icon: 'success'});},fail: (err) => {console.log('err', err);if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {// 用户拒绝了权限wx.showModal({title: '提示',content: '您已拒绝保存图片，请手动开启相册权限',showCancel: false,confirmText: '去设置',success: (res) => {if (res.confirm) {wx.openSetting();}}});} else {wx.showToast({title: '保存失败',icon: 'none'});}}});}

注意：

1、如果页面使用了第三方组件库会出现样式错乱问题；

2、PC端的小程序开发者工具目前只支持 webview 渲染，不支持 Skyline 渲染；

3、Skyline 渲染默认使用Flex布局，flex-direction 默认是 column；