小程序海报组件-生成朋友圈分享海报并生成图片
Clone or download
Latest commit 2bdbd5f Dec 20, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
miniprogram_dist fix(drawLine): 修复bug Oct 23, 2018
pages/index add preload and hide loading options Sep 12, 2018
.gitignore feat(package): add cz Sep 12, 2018
LICENSE add license Sep 4, 2018
README.md docs: fixed md format Dec 13, 2018
app.js rebuild code Aug 19, 2018
app.json rebuild code Aug 19, 2018
app.wxss rebuild code Aug 19, 2018
demo.png reduce image size Aug 24, 2018
jsconfig.json rebuild code Aug 19, 2018
package-lock.json feat(package): add cz Sep 12, 2018
package.json feat(version): update version num Oct 23, 2018
project.config.json feat(version): update version Sep 13, 2018

README.md

wxa-plugin-canvas

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

概述

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

生成效果

组件原理说明文章

https://juejin.im/post/5b7e48566fb9a01a1059543f

使用之前

使用 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 id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
    <button>点击生成海报</button>
</poster>

使用注意事项

  1. 图片的域名务必添加到downloadFile合法域名中(开发设置-服务器域名-downloadFile合法域名)
  2. 如果要使用异步生成海报的方法,务必组件要加上 id="poster"

组件参数解释

config字段

字段 类型 必填 描述
width Number(单位:rpx) 画布宽度
height Number(单位:rpx) 画布高度
backgroundColor String 画布颜色
debug Boolean false隐藏canvas,true显示canvas,默认false
preload Boolean true:图片资源预下载 默认false
hide-loading Boolean true:隐藏loading 默认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字段解释
zIndex Int 层级,越大越高

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对齐方式
zIndex Int 层级,越大越高

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 边框颜色
zIndex Int 层级,越大越高

lines字段

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

事件

success

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

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

fail

返回错误信息

异步生成海报

有些场景可能需要发起ajax请求后才能获取生成海报的数据,这里提供了异步生成海报的方式。

只需要引入组件中的poster/poster.js,如下调用就行了

import Poster from '../../miniprogram_dist/poster/poster';
Page({
    /**
     * 异步生成海报
     */
    onCreatePoster() {
    	// setData配置数据
    	this.setData({ posterConfig: {...} }, () => {
        	Poster.create(); 
    	});
    }
})

问题反馈

有什么问题可以直接提issue

提issue