源码分享小程序海报组件-生成朋友圈分享海报并生成图片,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