可以通过一个配置文件非常方便的生成分享到朋友圈的海报
小程序组件-小程序海报组件
wxa-plugin-canvas是一个生成二维码海报的组件,通过非常简单的配置就可以生成精美的海报
使用 wxa-plugin-canvas 前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。
小程序已经支持使用 npm 安装第三方包,详见 npm 支持
# npm
npm i wxa-plugin-canvas -S --production
# yarn
yarn add wxa-plugin-canvas --production
直接通过 git 下载 wxa-plugin-canvas 源代码,并将miniprogram_dist
目录拷贝到自己的项目组件目录中
{
"usingComponents": {
"poster": "wxa-plugin-canvas/poster",
}
}
接着就可以在 wxml 中直接使用组件
<poster config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
<button>点击生成海报</button>
</poster>
###config字段
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
width | Number(单位:rpx) | 是 | 画布宽度 |
height | Number(单位:rpx) | 是 | 画布高度 |
backgroundColor | String | 否 | 画布颜色 |
debug | Boolean | 否 | false隐藏canvas,true显示canvas,默认false |
blocks | Object Array(对象数组) | 否 | 看下文 |
texts | Object Array(对象数组) | 否 | 看下文 |
images | Object Array(对象数组) | 否 | 看下文 |
lines | Object Array(对象数组) | 否 | 看下文 |
###blocks字段
字段名 | 类型 | 必填 | 描述 |
---|---|---|---|
x | Number(单位:rpx) | 是 | 块的坐标 |
y | Number(单位:rpx) | 是 | 块的坐标 |
width | Number(单位:rpx) | 否 | 如果内部有文字,由文字宽度和内边距决定 |
height | Number(单位:rpx) | 是 | |
paddingLeft | Number(单位:rpx) | 否 | 内左边距 |
paddingRight | Number(单位:rpx) | 否 | 内右边距 |
borderWidth | Number(单位:rpx) | 否 | 边框宽度 |
borderColor | String | 否 | 边框颜色 |
backgroundColor | String | 否 | 背景颜色 |
borderRadius | Number(单位:rpx) | 否 | 圆角 |
text | Object | 否 | 块里面可以填充文字,参考texts字段解释 |
字段名 | 类型 | 必填 | 描述 |
---|---|---|---|
x | Number(单位:rpx) | 是 | 坐标 |
y | Number(单位:rpx) | 是 | 坐标 |
text | String|Object | 是 | 当Object类型时,参数为text字段的参数,marginLeft、marginRight这两个字段可用(示例请看下文) |
fontSize | Number(单位:rpx) | 是 | 文字大小 |
color | String | 否 | 颜色 |
opacity | Int | 否 | 1为不透明,0为透明 |
lineHeight | Number(单位:rpx) | 否 | 行高 |
lineNum | Int | 否 | 根据宽度换行,最多的行数 |
width | Number(单位:rpx) | 否 | 没有指定为画布宽度 |
marginLeft | Number(单位:rpx) | 否 | 当text字段为Object可以使用,用来控制多行文字间距 |
marginRight | Number(单位:rpx) | 否 | 当text字段为Object可以使用,用来控制多行文字间距 |
textDecoration | String | 否 | 目前只支持 line-through(贯穿线),默认为none |
baseLine | String | 否 | top| middle|bottom基线对齐方式 |
textAlign | String | 否 | left|center|right对齐方式 |
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
x | Number(单位:rpx) | 是 | 右上角的坐标 |
y | Number(单位:rpx) | 是 | 右上角的坐标 |
url | String | 是 | 图片url(需要添加到下载白名单域名中) |
width | Number(单位:rpx) | 是 | 宽度(会根据图片的尺寸同比例缩放) |
height | Number(单位:rpx) | 是 | 高度(会根据图片的尺寸同比例缩放) |
borderRadius | Number(单位:rpx) | 否 | 圆角,跟css一样 |
borderWidth | Number(单位:rpx) | 否 | 边框宽度 |
borderColor | String | 否 | 边框颜色 |
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
startX | Number(单位:rpx) | 是 | 起始坐标 |
startY | Number(单位:rpx) | 是 | 起始坐标 |
endX | Number(单位:rpx) | 是 | 终结坐标 |
endY | Number(单位:rpx) | 是 | 终结坐标 |
width | Number(单位:rpx) | 是 | 线的宽度 |
color | String | 否 | 线的颜色 |
返回生成海报图片的本地url,一般做法是使用wx.previewImage预览海报,如下
onPosterSuccess(e) {
const { detail } = e;
wx.previewImage({
current: detail,
urls: [detail]
})
}
返回错误信息
有什么问题可以直接加我微信weizaidu
3 个评论
感谢大神指点,我的小程序商城项目也拿出来和大家分享,欢迎大家提出宝贵意见https://github.crmeb.net/u/demo
这个啥意思啊
因为这里使用到wx.downloadFile接口,所以需要配置到mp后台的下载白名单中(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html)
我写的这种报错是因为那个没配置吗
不是,是因为不支持svg图片,只支持png和jpg
失败无效,这种
不需要加单位rpx
没早点看到你这个插件, 就不用自己折腾两天了.... 不过还好,吸收经验