微信小程序海报

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

相关推荐
licy__6 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_99225027715 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域1 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN1 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji1 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
paterWang1 天前
小程序-基于java+SpringBoot+Vue的小区服务管理系统设计与实现
java·spring boot·小程序
尘浮生1 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入1 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
tundra381 天前
DTH11传感器温度湿度+esp8266+阿里云+小程序
阿里云·小程序·云计算
虞书欣的62 天前
Python小游戏28——水果忍者
开发语言·人工智能·游戏·小程序·pycharm