收藏
评论

二维码海报生成组件

可以通过一个配置文件非常方便的生成分享到朋友圈的海报

wxa-plugin-canvas

小程序组件-小程序海报组件

概述

wxa-plugin-canvas是一个生成二维码海报的组件,通过非常简单的配置就可以生成精美的海报

使用之前

使用 wxa-plugin-canvas 前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍

安装

方式一.通过 npm 安装 (推荐)

小程序已经支持使用 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字段解释

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对齐方式

images字段

字段 类型 必填 描述
x Number(单位:rpx) 右上角的坐标
y Number(单位:rpx) 右上角的坐标
url String 图片url(需要添加到下载白名单域名中
width Number(单位:rpx) 宽度(会根据图片的尺寸同比例缩放
height Number(单位:rpx) 高度(会根据图片的尺寸同比例缩放
borderRadius Number(单位:rpx) 圆角,跟css一样
borderWidth Number(单位:rpx) 边框宽度
borderColor String 边框颜色

lines字段

字段 类型 必填 描述
startX Number(单位:rpx) 起始坐标
startY Number(单位:rpx) 起始坐标
endX Number(单位:rpx) 终结坐标
endY Number(单位:rpx) 终结坐标
width Number(单位:rpx) 线的宽度
color String 线的颜色

事件

success

返回生成海报图片的本地url,一般做法是使用wx.previewImage预览海报,如下

onPosterSuccess(e) {
	const { detail } = e;
	wx.previewImage({
        current: detail,
        urls: [detail]
    })
}

fail

返回错误信息

问题反馈

有什么问题可以直接加我微信weizaidu

最后一次编辑于  2018-08-26
收藏

3 个评论

登录 后发表内容