在小程序开发中我们经常会遇到这样一个功能需求,分享海报。生成相关图片保存到相册,网上也有不少插件,但是都是五花八门。今天我分享一个在网上收集的小程序生成海报(带小程序码)的教程+插件,话不多说直接开始。
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)
}
},
})
最后的效果图