uniapp篇-微信小程序生成相关内容海报

分享需求

为了方便用户分销，推广相关产品的操作，我们使用了微信小程序自带的Snapshot生成相关海报功能，以下是使用方法以及注意事项。

注意事项

在uniapp使用该功能，需要对相关功能进行配置：

1.pages.json

需要将componentFramework配置为“glass-easel“，navigationStyle配置为“custom”（头部置为透明），renderer配置为“skyline”

{
  "path": "pages/poster/index",
  "style": {
    "navigationBarTitleText": "分享海报",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom",
    "renderer": "skyline",
    "componentFramework": "glass-easel"
  }
}

2.manifest.json

"mp-weixin" : {
        "appid" : "wx2863c6c4ac162b66",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "minified" : true,
            "postcss" : true
        },
        "optimization" : {
            "subPackages" : true
        },
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "做首页定位展示处理"
            }
        },
        "requiredPrivateInfos" : [ "getLocation" ],
        "lazyCodeLoading": "requiredComponents", 
        "rendererOptions": {
            "skyline": {
                "defaultDisplayBlock": true,
                "disableABTest": true,
                "sdkVersionBegin": "3.0.1",
                "sdkVersionEnd": "15.255.255"
            }
        }, 
        "style": "v2",
        "componentFramework": "glass-easel"
    },

如何生成相关文件，以及相关图片内容

配置完成后，需要配置跳转路径，相关图片内容需要将页面图片转化为临时路径，展示在页面上

template相关代码

<template>
  <view class="poster-page set-post">
  ...自定义头部nav...
  <view class="haibao" v-if="picture">
    <image :src="picture"  :show-menu-by-longpress="true"/>
  </view>
  <view v-if="!picture">
     <snapshot id="view" class="mar-t-240">
       你的海报设计图
     </snapshot>
  </view>
  </view>
</template>

1.直接保存相关海报图片内容

需要在服务器域名配置相关内容：downloadFile合法域名

saveImage() {
  const that = this
  this.Utils.loadingPopUp('图片保存中...')
  this.createSelectorQuery()
    .select("#view")
    .node()
    .exec((res) => {
      const node = res[0].node;
      node.takeSnapshot({
      type: "arraybuffer",
      format: "png",
      success: (res) => {
        const f = `${uni.env.USER_DATA_PATH}/推荐海报.png`
        const fs = uni.getFileSystemManager();
        fs.writeFileSync(f, res.data, "binary");
        uni.saveImageToPhotosAlbum({
          filePath: f,
          success() {
            that.Utils.popUpMsg('保存成功', 'success')
          },fail() {
            that.Utils.popUpMsg('保存失败', 'error')
          },complete() {
            that.Utils.hideLoading()
          }
         })
        },fail() {
          that.Utils.popUpMsg('保存失败', 'error')
      },
    })
  })
},

2.展示海报图片内容

saveImage() {
  this.picture = '';
  this.createSelectorQuery()
    .select("#view")
    .node()
    .exec((res) => {
      const node = res[0].node;
      node.takeSnapshot({
        type: "arraybuffer",
        format: "png",
        success: (resa) => {
          const fsm = wx.getFileSystemManager();
          const FILE_BASE_NAME = 'qrcode_src'+Math.random();
          const filePath = wx.env.USER_DATA_PATH + '/' + FILE_BASE_NAME + '.png';
          fsm.writeFile({
            filePath,
            data: resa.data,
            encoding: 'binary',
            success:()=> {
              this.picture = filePath;
              uni.hideLoading();
            },fail() {
              uni.hideLoading()
            },
          })
        }
      })
  })
}

3.分享海报相关内容

saveImage() {
    uni.showLoading({
      title: '加载中...'
    });
	//假设你的base64图片数据存储在变量base64Data中
	var number = Math.random();//防止图片重复
	let filePath = wx.env.USER_DATA_PATH +'/pic'+number+'.png';
	console.log("filePath", filePath)
	// 将base64图片转换为临时文件
	this.createSelectorQuery()
      .select("#view")
      .node()
      .exec((res) => {
        const node = res[0].node;
        node.takeSnapshot({
          type: "arraybuffer",
          format: "png",
          success: (resa) => {
			console.log("resa", resa)
			wx.getFileSystemManager().writeFile({
			filePath: filePath, // 存储路径
		    data: resa.data, // 去掉前缀 "data:image/png;base64,"
			encoding: 'base64',
			success: () => {
			  uni.hideLoading();
			  wx.showShareImageMenu({
			  path: filePath,
			  success() {
			    // console.log('分享图片成功');
			  },fail(err) {
			    // console.error('分享图片失败', err);
	          }
		    });
		  },
		  fail: (err) => {
		    // console.error('文件写入失败', err);
		  }
	    });
      }
    })
  })
},