微信小程序海报

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

相关推荐
難釋懷9 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c9 小时前
微信小程序核心知识点速览
微信小程序·小程序
2501_915918411 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷1 天前
第一个小程序
小程序
春哥的研究所1 天前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld1 天前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点1 天前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖1 天前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发1 天前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb