更新记录

1.0.1（2026-01-31）

• 小程序分享：使用微信小程序默认图片分享;

1.0.0（2026-01-31）

• Schema 驱动：使用 JSON 数据描述海报布局，逻辑清晰，易于维护和动态生成。
• 组件化封装：提供 <jojo-poster> 组件，封装了 Canvas 绘制和分享弹窗逻辑，开箱即用。
• 丰富的绘制能力：
  • 支持 view (容器/矩形)、image (图片)、text (文本)、rich-text (富文本)。
  • 支持圆角 (borderRadius)、边框 (borderWidth, borderColor)。
  • 支持文本换行、行数限制 (lineClamp)、省略号。
  • 支持文本对齐 (textAlign)、行高 (lineHeight)。
  • 支持富文本混合样式（不同颜色、字体大小、粗细、斜体）。
• 内置分享：生成海报后自动唤起分享弹窗，支持保存到相册。

平台兼容性

uni-app(4.25)

jojo-poster 海报生成插件

1. 说明

jojo-poster 是一款基于 UniApp 的轻量级海报生成插件。它通过 JSON Schema 的方式描述海报结构，支持绘制文本、图片、矩形容器以及富文本，并内置了分享弹窗组件，方便快速生成海报并进行分享。

2. 功能优势

• Schema 驱动：使用 JSON 数据描述海报布局，逻辑清晰，易于维护和动态生成。
• 组件化封装：提供 <jojo-poster> 组件，封装了 Canvas 绘制和分享弹窗逻辑，开箱即用。
• 丰富的绘制能力：
  • 支持 view (容器/矩形)、image (图片)、text (文本)、rich-text (富文本,仅支持文本样式)。
  • 支持圆角 (borderRadius)、边框 (borderWidth, borderColor)、背景线性渐变 (linearGradient)。
  • 支持文本换行、行数限制 (lineClamp)、省略号。
  • 支持文本对齐 (textAlign)、行高 (lineHeight)、文本装饰 (textDecoration)。
  • 支持富文本混合样式（不同颜色、字体大小、粗细、斜体、下划线/删除线），支持同一行不同字号底部对齐。
• 内置分享：生成海报后自动唤起分享弹窗，支持保存到相册。

3. 兼容性

• UniApp (Vue 2 / Vue 3)
• 微信小程序
• H5
• App (Android / iOS)

4. 安装

将 jojo-poster 文件夹复制到项目的 uni_modules 目录下即可。

5. 基本用法

引入组件

在页面中引入 <jojo-poster> 组件。

定义 Schema

构建描述海报内容的 JSON 对象。

调用生成方法

通过 ref 调用组件的 build() 方法触发绘制。

6. 代码演示

<template>
    <view class="content">
        <button @click="handleGenerate">生成海报</button>

        <!-- 引入海报组件 -->
        <jojo-poster 
            ref="poster" 
            :schema="posterSchema" 
            :width="315" 
            :height="430"
        ></jojo-poster>
    </view>
</template>

<script>
export default {
    data() {
        return {
            posterSchema: {
                tag: 'view',
                style: {
                    width: 315,
                    height: 430,
                    backgroundColor: '#ffffff',
                    borderRadius: 12
                },
                children: [
                    // 背景图片
                    {
                        tag: 'image',
                        src: '/static/bg.png',
                        style: {
                            width: 315,
                            height: 430,
                            left: 0,
                            top: 0,
                            borderRadius: 12
                        }
                    },
                    // 文本内容
                    {
                        tag: 'text',
                        text: 'Hello World',
                        style: {
                            left: 20,
                            top: 50,
                            fontSize: 24,
                            fontWeight: 'bold',
                            color: '#333333'
                        }
                    },
                    // 富文本示例
                    {
                        tag: 'rich-text',
                        text: [
                            { text: '红色文字', style: { color: '#ff0000', fontSize: 16 } },
                            { text: '蓝色文字', style: { color: '#0000ff', fontSize: 14 } }
                        ],
                        style: {
                            left: 20,
                            top: 100,
                            width: 200
                        }
                    }
                ]
            }
        };
    },
    methods: {
        handleGenerate() {
            // 调用组件的 build 方法生成海报
            this.$refs.poster.build();
        }
    }
};
</script>

7. Schema 属性参考

通用样式 (Style)

文本特有样式 (Text / Rich-Text)

线性渐变配置 (linearGradient)

view 组件支持线性渐变背景，通过 style.linearGradient 配置。

{
    "direction": "to bottom", 
    // 可选值: "to right", "to left", "to bottom", "to top", "to bottom right", "to top right"
    "stops": [
        { "offset": 0, "color": "#FF0000" },
        { "offset": 1, "color": "#0000FF" }
    ]
}

8 分享功能

APP端需要配置微信应用appid，在manifest.json中配置