微信小程序海报

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

相关推荐
小远yyds4 小时前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
万岳科技程序员小金5 小时前
从源码到成品应用:互联网医院系统与在线问诊APP的开发全解析
小程序·软件开发·app开发·在线问诊系统源码·在线问诊app开发
V+zmm101346 小时前
社区养老服务小程序ssm+论文源码调试讲解
java·服务器·前端·javascript·小程序·毕业设计·1024程序员节
说私域6 小时前
以客户为导向在开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序内容创作中的实践与价值
人工智能·小程序·开源
qq22951165027 小时前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
2401_844139039 小时前
Java爱情交友婚恋系统小程序源码
微信·微信小程序·小程序·微信公众平台·交友·微信开放平台
qq22951165029 小时前
asp.net+uniapp养老助餐管理系统 微信小程序
微信小程序·uni-app·asp.net
qq229511650210 小时前
微信小程序 uniapp网络记账设计个人理财系统
微信小程序·小程序·uni-app
阿斌_bingyu70911 小时前
一个小程序如何对接多个收款账户?
小程序·车载系统
guanpinkeji11 小时前
酒店民宿小程序,探索行业数字化管理发展
大数据·小程序·小程序开发·小程序制作·民宿小程序·酒店民宿小程序