微信小程序生成海报（含带参数的小程序码）

在小程序开发中我们经常会遇到这样一个功能需求，分享海报。生成相关图片保存到相册，网上也有不少插件，但是都是五花八门。今天我分享一个在网上收集的小程序生成海报（带小程序码）的教程+插件，话不多说直接开始。

1.可以先在这里在线绘制你所需要的海报图片样式。绘制完成后点击复制代码或者导出json，在你的项目中新建一个js文件（我放在了公共文件夹为module.js），把你复制的代码拷贝进去。

2.painter.js主仓库是完整的例子，这里我们只需要我们需要的文件夹就（painter文件夹）行了。例子不用下载。将painter文件夹放到你项目文件夹的components（组件）文件夹里面

3.在你需要使用该插件的地方引入该组件，并在wxml中使用它。

palette绑定需要绘制的模板，下面是js

	import Module from '../../utils/module'
	import request from '../../utils/request'
	Page({
		imagePath:"",//小程序码路径
		isSave:false,//是否在保存中
		//data中需要这个参数
		data:{
			template:{},//渲染模板
		}
		onload(){
			this.setData({
				//shareInfo为你需要分享的相关信息,自行在Module.js里面进行设置变量。
				template:new Module().palette(shareInfo)
			})
		},
		// 将小程序码放入微信临时存储
	  	base64src(base64data) {
		    const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}tmpbase64.png`;
		    const fsm = wx.getFileSystemManager();
		    const buffer = wx.base64ToArrayBuffer(base64data);
		    let that = this;
		    fsm.writeFile({
		     filePath,
		     data: buffer,
		     encoding: 'binary',
		     success() {
		      that.setData({
		       qrcodeUrl: filePath
		      })
		      console.log("ok")
		     },
		     fail(err) {
		       log.warn(err)
		      console.log("生成小程序码：",err);
		     },
		    });
		   },
	    // 生成小程序码的页面
	  	qrcodeFn(goodsid){
		    let _this = this;
		    let data = {}//自己封装的请求参数
		    // 获取微信小程序码
		    request._get('/service',data,true).then(res=>{
		    	//你的带参数小程序码后端请求
		    	const data = res.data//后端请求得到的小程序码地址
		        this.base64src(data)//存储到微信临时文件
		      }
		      else{
		        console.log("err")
		      }
		    })
		    .catch(err=>{
		      console.log(err)
		    })
		},
	  	//海报渲染是否成功
	  	onImgOK(e) {
		   this.imagePath = e.detail.path;
		   this.setData({
		     image: this.imagePath
		   })
		   if (this.isSave) {
		     this.saveImage(this.imagePath);
		   }
	 	},
	  	//保存海报
	  	saveImage(imagePath = '') {
		   try {
		     if (!this.isSave) {
		       this.isSave = true;
		       this.setData({
		         paintPallette: this.data.template,
		       });
		     } else if (imagePath) {
		       this.isSave = false;
		       wx.previewImage({
		         urls: new Array(imagePath),
		         success:()=>{
		           //保存成功的后续提示语等等操作
		           // 清除海报本地储存
		           wx.removeStorage({
		             key: 'savedFiles',
		           })
		         },
		         fail:(err)=>{
		           console.log(err)
		           wx.showToast({
		             title: '请重新再试',
		             icon:'none',
		           })
		         }
		       })
		     }
		     else{
		       wx.showToast({
		         title: '获取小程序码失败，请重试',
		         icon:'none'
		       })
		     }
		   } catch (error) {
		     log.warn(error)
		     console.log(error)
		   }
		 },
		})
	

最后的效果图