微信小程序海报

liangshanbo12152024-11-02 15:37

记录一下微信小程序使用 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；