记录一下微信小程序使用 Skyline 渲染引擎生成页面海报的流程。
1、单独给页面开启 Skyline 渲染引擎,在 app.json 增加如下配置:
javascript
{
"lazyCodeLoading": "requiredComponents",
"rendererOptions": {
"skyline": {
"disableABTest": true,
"sdkVersionBegin": "3.0.1",
"sdkVersionEnd": "15.255.255"
}
}
}
2、在页面的配置文件中增加如下配置:
javascript
{
"usingComponents": {},
"renderer": "skyline",
"navigationStyle": "custom",
"componentFramework": "glass-easel",
}
3、在 wxml 文件中使用 snapshot 组件包裹要生成海报的 view
html
<snapshot id="poster" mode="view">
<view class="poster">
...
</view>
</snapshot>
4、生成海报图片
javascript
this.createSelectorQuery().select("#poster")
.node()
.exec(res => {
const node = res[0].node
node.takeSnapshot({
type: 'file',
format: 'png',
success: (res) => {
this.saveImageToLocal(res.tempFilePath);
},
fail(res) {
console.log('保存失败', res);
}
})
})
5、海报图片保存到本地
javascript
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;