小程序海报组件-生成朋友圈分享海报并生成图片（微信小程序分享海报功能）

wxa-plugin-canvas

概述

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

生成效果

组件原理说明文章

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

使用之前

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

安装

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

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# npmnpm i wxa-plugin-canvas -S --production# yarnyarn add wxa-plugin-canvas --production

方式二.下载代码

直接通过 git 下载 wxa-plugin-canvas 源代码，并将miniprogram_dist目录拷贝到自己的项目组件目录中

使用组件

{ "usingComponents": { "poster": "wxa-plugin-canvas/poster", }}

接着就可以在 wxml 中直接使用组件

使用注意事项

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

组件参数解释

config字段

blocks字段

texts字段

images字段

lines字段

事件

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(); }); }})

自定义组件异步生成海报

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

只需要引入组件中的poster/poster.js，如下调用就行了，与page不同的是，需要在Poster.create中加入this。

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

赞赏

问题反馈

有什么问题可以直接提issue

提issue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。