微信小程序Snapshot导出海报

假装我不帅2023-09-16 6:02

开启skyline

app.json

json 复制代码 
"lazyCodeLoading": "requiredComponents",
  "renderer": "skyline",
  "componentFramework": "glass-easel",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true
    }
  }

设置版本库

设置版本库>=3.0.1

编写代码

index.wxml

html 复制代码 
<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

css 复制代码 
@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

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

相关推荐
V+zmm10134几秒前
基于微信小程序的在线选课系统springboot+论文源码调试讲解
java·小程序·毕业设计·mvc·springboot
AdSet聚合广告2 分钟前
穿山甲等广告联盟依据哪些维度给APP、小程序结算广告变现收益
大数据·小程序
shimmer0083 小时前
抖音小程序登录（前端通过tt.login获取code换取openId）
前端·小程序·状态模式
清风路遥5 小时前
【婚庆摄影小程序设计与实现】
微信小程序·毕业设计·springboot·课程设计
潜意识起点6 小时前
微信小程序 app.json 配置文件解析与应用
微信小程序·小程序·json
计算机徐师兄14 小时前
Java基于SSM框架的无中介租房系统小程序【附源码、文档】
java·微信小程序·小程序·无中介租房系统小程序·java无中介租房系统小程序·无中介租房微信小程序
源码哥_博纳软云14 小时前
JAVA智慧养老养老护理帮忙代办陪诊陪护小程序APP源码
java·开发语言·微信小程序·小程序·微信公众平台
说私域14 小时前
私域电商逆袭密码：AI 智能名片小程序与商城系统如何梦幻联动
人工智能·小程序
美美的海顿21 小时前
springboot基于Java的校园导航微信小程序的设计与实现
java·数据库·spring boot·后端·spring·微信小程序·毕业设计
说私域1 天前
无人零售及开源 AI 智能名片 S2B2C 商城小程序的深度剖析
人工智能·小程序·零售
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06支付宝短视频平台创作分成激励项目07怎么找小红书美食探店博主合作？08【一文读懂】NTN（非地面网络）技术介绍09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10STM32 无法烧录