更新记录

1.0.3（2026-10-12） 下载此版本

补充 HBuilderX 导入步骤与目录自检，明确组件和 SDK 文件应位于 uni_modules/JQ-PosterBoard；增加手动安装说明，避免示例工程和业务项目混淆。

1.0.2（2026-07-15） 下载此版本

• 补充插件导入说明，明确示例工程文件不需要覆盖业务项目。
• 补充 pages.json 覆盖提示处理方式，正常接入只需导入 uni_modules/JQ-PosterBoard。
• 组件 API、模板和平台兼容范围保持不变。

1.0.0（2026-06-11） 下载此版本

• 首次发布海报画板组件。
• 支持图片、文字、多行省略、标签、线条、头像、二维码图片位绘制。
• 内置商品海报和邀请海报模板，支持渲染后导出图片。

平台兼容性

uni-app(3.97)

JQ-PosterBoard JQ海报画板生成器

JQ-PosterBoard 是一个 uni-app 海报画板组件，适合商品分享图、活动邀请图、课程海报、分销海报、门店二维码海报等场景。插件不申请系统权限，不包含网络请求，也不内置广告 SDK。

特点

• 使用配置对象绘制海报，便于后端下发模板或前端维护模板。
• 支持矩形、圆角矩形、线条、文本、多行省略、标签、图片、头像、二维码图片位。
• 内置商品海报、邀请海报模板工具，导入后可直接改字段使用。
• 支持 render()、exportImage()、renderAndExport() 方法，方便生成后保存或分享。
• 符合 uni_modules / easycom 组件规范，导入后可直接使用 <jq-poster-board />。

快速使用

<template>
  <view>
    <jq-poster-board ref="posterBoard" :poster="poster" :hidden="false" />
    <button @click="makePoster">生成海报</button>
  </view>
</template>

<script>
import { createProductPoster } from '@/uni_modules/JQ-PosterBoard/js_sdk/jq-poster-board/templates.js'

export default {
  data() {
    return {
      poster: createProductPoster({
        title: '618 活动商品海报',
        price: '59.90',
        originalPrice: '99.00',
        badge: '新人专享',
        shopName: '我的小店'
      })
    }
  },
  methods: {
    makePoster() {
      this.$refs.posterBoard.renderAndExport(this.poster).then((res) => {
        console.log('海报图片路径', res.tempFilePath)
      })
    }
  }
}
</script>

组件属性

方法

exportImage 支持 pixelRatio、fileType、quality 参数。推荐移动端分享图使用 pixelRatio: 2。

poster 配置

{
  width: 750,
  height: 1100,
  background: '#ffffff',
  pixelRatio: 2,
  elements: [
    { type: 'rect', x: 36, y: 36, width: 678, height: 1028, radius: 28, color: '#ffffff' },
    { type: 'image', x: 66, y: 66, width: 618, height: 430, radius: 22, src: '/static/demo.png' },
    { type: 'tag', x: 66, y: 528, text: '限时优惠', background: '#fff1f2', color: '#be123c' },
    { type: 'text', x: 66, y: 610, width: 560, maxLines: 2, text: '海报标题', fontSize: 42 },
    { type: 'line', x1: 66, y1: 930, x2: 684, y2: 930, width: 1, color: '#e5e7eb' },
    { type: 'qrcode', x: 554, y: 958, width: 108, height: 108, src: '/static/qrcode.png' }
  ]
}

元素类型

rect

绘制矩形或圆角矩形。

text

绘制单行或多行文本。

image / avatar / qrcode

绘制图片。avatar 会默认裁成圆形，qrcode 用于二维码图片位。插件不负责生成二维码内容，建议传入已有二维码图片路径或网络图片地址。

tag

绘制胶囊标签。

事件

常见问题

导入时提示 pages.json 是否覆盖怎么办？

不要覆盖自己项目的 pages.json。pages.json、manifest.json、App.vue、main.js 这些是示例工程文件，只用于看 demo。

正常接入只需要导入 uni_modules/JQ-PosterBoard，然后在自己的页面里使用 <jq-poster-board />。如果要参考示例页面，把 pages/index/index.vue 里的代码按需复制到你自己的页面即可。

导入后为什么看到项目根目录的 components？

请在插件市场详情页使用 “使用 HBuilderX 导入插件”，并选择你的 uni-app 项目。正常导入后目录应为：

你的项目/
└── uni_modules/
    └── JQ-PosterBoard/
        ├── components/
        ├── js_sdk/
        └── package.json

插件压缩包内的 components/、js_sdk/ 本身是 JQ-PosterBoard 模块的内容；如果把压缩包直接解压到业务项目根目录，就会看到根目录的 components/。这种手动解压方式请先停止，不要覆盖或移动现有业务目录。确有手动安装需要时，请先新建 uni_modules/JQ-PosterBoard，再将插件包内容解压到这个目录；不要导入示例工程包。

如果已误解压，先从版本管理或备份恢复被覆盖的业务文件，再删除误放到根目录的本插件文件，随后按上面的 HBuilderX 导入方式重新安装。

为什么二维码不是插件内部生成？

真实业务里二维码通常来自后端、微信小程序码、活动短链或平台接口。插件提供二维码图片位，避免在前端重复实现各平台差异较大的码生成流程。

网络图片不显示怎么办？

确认图片地址支持当前平台访问，并且小程序端已配置合法域名。跨域或防盗链图片建议先下载为本地临时路径再绘制。

导出图片失败怎么办？

确认 canvas 已经渲染完成后再调用 exportImage()。如果同页存在多个海报组件，需要给每个组件设置唯一 canvasId。

平台说明

本插件是纯前端 canvas 组件，不涉及 Android/iOS 原生权限。不同平台的 canvas 行为可能存在差异，建议接入方在目标平台上做一次生成和导出测试。当前版本不支持 nvue。

隐私与权限

• 不申请系统权限。
• 不采集用户数据。
• 不包含网络请求、上传、统计或云端存储能力。
• 不内置广告 SDK；市场侧可配置免费广告解锁下载，仅为 DCloud 市场下载侧能力。