前言
分享给用户一个二维码图片,这是一个很简单的功能,但因为这是小程序
环境,且涉及Canvas
,那就不简单了。
话不多说,搞起。
环境
node: 14.17.3
Taro: 3.0.21
Painter: 2.2.2
实现
npm 社区的理念就是不造重复轮子,而我身体力行的实践着这个理念。花了半个小时,找到一个可以用来生成图片的包,Painter
。
这个包就和echarts
一样,难点就是繁琐的配置,但是上手以后,意外的简单好用。
我只介绍最基本的用法,如果有其他需求,请移步Painter 文档。
引入组件包
我这里引入的原生小程序版本的,因为我对npm
包在小程序的表现存在一定质疑。
export default {
// Taro 小程序引用原生小程序组件
usingComponents: {
painter: "./components/Painter/painter",
},
};
引入以后,直接调用就可以了,别忘了给它一个独一无二的id
。
<template>
......
<painter id="share-post-painter" :use2-d="true" :palette="config" />
</template>
编写 config
我会介绍几个常用的配置属性,帮助快速上手。
其实这个包的理念很像搭积木,就是先打一个底座,然后把你要放上去的元素都化为一个个积木块,再按照你的想法组装到对应的位置。
class config {
width = "500px"; // 图片宽度
height = "500px"; // 图片高度
background = ""; // 图片背景
views = [
{
type: "image", // 图片view
url: "", // 图片view图片地址
css: {
top: "", // 距顶定位
left: "", // 距左定位
width: "", // 图片view宽度
height: "", // 图片view高度
},
},
{
type: "text", // 文字view
text: "文字", // 文字view内容
css: {
top: "", // 距顶定位
left: "", // 距左定位
fontSize: "", // 文字大小
fontWeight: "", // 文字宽度
align: "", // 文字排版方式
color: "", // 文字颜色
},
},
{
type: "qrcode", // 二维码view
content: "", // 二维码url
css: {
bottom: "", // 距底定位
left: "", // 距左定位
width: "", // 二维码宽度
height: "", // 二维码高度
},
},
];
}
分享图片
等组件直接渲染完成,他也会在本地存储临时图片地址,这个时候直接获取就行了。
const share = () => {
// 获取当前页面实例,可以使用小程序页面实例的 selectComponent API 获取第三方原生组件的实例
const { page } = Taro.getCurrentInstance();
// 获取painter组件实例
const refPainter = page.selectComponent("#share-post-painter");
// 获取painter组件实例中的本地图片地址
wx.showShareImageMenu({
path: refPainter.data.picUrl,
});
};