微信小程序Snapshot导出海报

开启skyline

app.json

"lazyCodeLoading": "requiredComponents",
  "renderer": "skyline",
  "componentFramework": "glass-easel",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true
    }
  }

设置版本库

设置版本库>=3.0.1

编写代码

index.wxml

<snapshot id="view" class="intro">
  <view class="snapshot-box">
	<view class="poster-container">
		<view class="poster-header">
			<image class="head-img" src="https://res.wx.qq.com/op_res/g8_iWdQLmR5dKwrKW-c1fRZc7XRYP6z_rp1f-BDMmQ41BOjsDigYKkO6VQqj6aZoyVKUtTuJEEvOJuv3av8U2Q" />
			<view class="poster-header-text">
				<text>binnie</text>
				<text>发起 Skyline 学习活动</text>
			</view>
		</view>

		<view class="description">
			<view class="schedule-text">
				<view>学 习 进 度</view>
				<view class="detail">80%</view>
			</view>
			<view class="schedule">
				<view class="schedule-all">
					<view class="schedule-real"></view>
				</view>
			</view>
			<view class="members">
				<view class="member">
					<image class="head-img" src="https://res.wx.qq.com/op_res/g8_iWdQLmR5dKwrKW-c1fRZc7XRYP6z_rp1f-BDMmQ41BOjsDigYKkO6VQqj6aZoyVKUtTuJEEvOJuv3av8U2Q" />
					<view class="leader">队长</view>
				</view>
				<view class="member">
					<image class="head-img" src="https://res.wx.qq.com/op_res/v9cRw50kNOp93AQJWHjbjiOstqoOZHQgfWzWpJiK02jKt6i5HBHWD3IUpgMSneSW5_26oHaJLddq-h6A3wEI_A" />
					<view>
						<text>binnnnnnn</text>
					</view>
				</view>
				<view class="member">
					<image class="head-img" src="https://res.wx.qq.com/op_res/v9cRw50kNOp93AQJWHjbjl-OdWB18klNWCsWqEECTnxAvN-_EaCkgGXNjwANvi4_gIM3MrAHHZiGBK1ooFzmyg" />
					<view>🚜拖</view>
				</view>
			</view>
		</view>

		<view class="line">
			<view class="left-line"></view>
			<view class="real-line"></view>
			<view class="right-line"></view>
		</view>
		
		<view class="footer">
			<view class="qrcode">
				<image mode="aspectFill" src="https://res.wx.qq.com/wxdoc/dist/assets/img/skyline-demo.37eff20b.png"></image>				
			</view>
			<view class="qrcode">
				<text>长按识别小程序码来一起学习吧</text>
			</view>
		</view>
	</view>
  </view>
</snapshot>

<button type="primary" bindtap="tap">保存海报到本地</button>

wxss

@font-face {
  font-family: "test";
  src: url("https://wximg.qq.com/cityservices/font/FZFWQingYinTiJWD.TTF");
}
.intro {
  margin: 90px 30px 30px;
  text-align: center;
}
.snapshot-box {
  font-family: "test";
  padding: 20px 16px;
  background: url(https://res.wx.qq.com/op_res/tOwqPm31NVc7GmNdujMfgpUebQbZeRW4YD79TYkVfJsoJX4cDuQwVWygj-bviemXbUFoMGM9c_7q7-2RT071Vw) 30%;
}
.poster-img {
  width: 100%;
}
.poster-container {
  background: linear-gradient(#229156, #2fce7c);
  padding: 20px 16px;
  border-radius: 10px;
}
.poster-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.poster-header-text {
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
  font-weight: bold;
  padding-left: 10px;
  text-align: left;
}
.head-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.description {
  margin: 20px 0;
  padding: 20px 0;
  background-color: #fff;
  border-radius: 10px;
}
.schedule-text {
  font-size: 20px;
  font-weight: bold;
}
.schedule-text .detail{
  font-size: 30px;
  font-weight: 500;
  margin: 10px 0;
}
.schedule {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}
.schedule-all {
  width: 90%;
  height: 14px;
  background-color: #eeeeee;
  border-radius: 20px;
}
.schedule-real {
  position: absolute;
  width: 80%;
  height: 14px;
  background: linear-gradient(90deg, #2fce7c, #229156);
  border-radius: 20px;

}
.members {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.member {
  margin: 10px;
}
.member view {
  width: 48px;
  background-color: #c5ebdd;
  color: #07c160;
  border-radius: 20px;
  margin-top: -8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 0 6px;
}
.member view text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.member .leader {
  background-color: #07c160;
  color: #fff;
}
.snapshot-footer {
  display: flex;
}
.snapshot-footer-desc {
  flex: 1;
  text-align: left;
  padding-left: 10px;
}

.line {
  display: flex;
  flex-direction: row;
  margin-left: -16px;
  margin-right: -16px;
}
.real-line {
  width: 90%;
  border-bottom: solid 3px rgba(255, 255, 255, 0.1);
  margin: 0 10px 10px 10px;
}
.left-line {
  width: 10px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0 10px 10px 0; 
}
.right-line {
  width: 10px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px 0 0 10px; 
}

.qrcode {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.qrcode image{
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.qrcode text {
  font-size: 10px;
  color: #fff;
}

index.js

const app = getApp()

Page({
  data: {

  },
  onLoad() {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
    wx.loadFontFace({
      family: "Monaco",
      source: 'url("https://fonts.cdnfonts.com/s/14106/Monaco.woff")',
      scopes: ['webview', 'native'],
      success: (res) => {
          console.log('success', res.status)
          this.render()
      },
      fail: function (res) {
          console.error(res)
      },
      complete(res) {
        console.log('111', res)
      }
    });
  },

  tap() {
    wx.loadFontFace({
      family: "Monaco",
      source: 'url("https://fonts.cdnfonts.com/s/14106/Monaco.woff")',
      scopes: ['webview', 'native'],
      success: (res) => {
          console.log('success', res.status)
          this.render()
      },
      fail: function (res) {
          console.error(res)
      },
      complete(res) {
        console.log('111', res)
      }
    });
    let isCanUse= wx.canIUse('Snapshot.takeSnapshot');//基础库 3.0.1 开始支持
    if(!isCanUse){
      console.log("不可以使用");
      return;
    }
    this.createSelectorQuery().select("#view")
      .node().exec(res => {
        console.log(res);
        const node = res[0].node
        node.takeSnapshot({
          // type: 'file' 且 format: 'png' 时，可直接导出成临时文件
          type: 'arraybuffer',
          format: 'png',
          success: (res) => {
            const f = `${wx.env.USER_DATA_PATH}/hello.png`
            const fs = wx.getFileSystemManager();
            fs.writeFileSync(f, res.data, 'binary')
            wx.showToast({
              title: '保存成功'
            })

            wx.saveImageToPhotosAlbum({
              filePath: f,
              complete(res) {
                console.log("saveImageToPhotosAlbum:", res)
              }
            })
          },
          fail(res) {
            console.log("takeSnapshot fail:", res)
          }
        })
      })
  }
})

测试

点击保存海报

导出结果

总结

使用skyline的snapshot导出将小程序页面直接导出为图片，大大节省了服务器端的压力，而且样式前端可控，就是需要开启skyline，如果是老项目的话需要webview升级skyline