微信小程序海报

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

相关推荐
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me10 小时前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_233313 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷18 小时前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的1 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
2301_805962932 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero2 天前
微信小程序121~130
微信小程序·小程序
難釋懷2 天前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++