源码分享小程序海报组件-生成朋友圈分享海报并生成图片

Warning: Undefined variable $yanshi_content in /www/wwwroot/www.jiandaima.com/blog/wp-content/plugins/xydown/xydown.php on line 105

源码分享小程序海报组件-生成朋友圈分享海报并生成图片，wxa-plugin-canvas 小程序海报组件 使用npm开发。
小程序海报组件概述：
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 id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
    <button>点击生成海报</button>
</poster>

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

id="poster"

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

下载地址:

https://github.com/jasondu/wxa-plugin-canvas