# simple-poster

**Repository Path**: juneqiu/simple-poster

## Basic Information

- **Project Name**: simple-poster
- **Description**: uniapp 小程序海报
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-01-23
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### simple-poster

#### 简介
一款简单的小程序海报绘制

#### 目录说明
+ components
  - simple-poster // 非ts版本
  - simple-poster-ts // ts版本
  - simple-poster-wx  // 微信小程序原生
+ pages
  - index // 示例页面

#### 参数说明
+ raduis

|  参数   | 类型  |  是否必填 |  默认值  | 描述  |
|  :----:  | :----:  | :----:  |  :----:  |  :----:  |
| raduis  | number | 否 |  10 |  圆角半径 |

+ userInfo

|  参数   | 类型  |  是否必填 |  默认值  | 描述  |
|  :----:  | :----:  | :----:  |  :----:  |  :----:  |
| avatar  | string | 否 |  无，不填不绘制 | 头像地址|
| userName  | string |  否 | 无，不填不绘制 |  用户名 |


+ posterData

|  参数   | 类型  |  是否必填 |  默认值  | 描述  |
|  :----:  | :----:  | :----:  |  :----:  |  :----:  |
| title  | string | 否 |  无，不填不绘制 | 标题|
| price  | number |  否 | 无，不填不绘制 |  售价 |
| originPrice  | number | 否 |  无，不填不绘制 | 原价 |
| cover  | string |  否  | 无，不填不绘制   |  封面图 |
| qrcode  | string |  否 | 无，不填不绘制 |  二维码 |


+ systemInfo(考虑大多数系统都会封装缓存，所以通过参数的方式)

|  参数   | 类型  | 是否必填  |  描述  |
|  :----:  | :----:  | :----:  |  :----:  |
| SDKVersion  | string | 是  | 用户对比小程序版本号，版本号需>=2.9.0 |
| pixelRatio  | number |  是 | 用于清晰度处理 |

#### 使用说明
+ uniapp(详细看pages/index/index.vue, js和ts使用一样, js不要ts的类型即可)

+ 微信小程序
  - index.json
  ```json
  {
    "simple-poster-wx": "/components/simple-poster-wx/index"
  }
  ```

  - index.wxml
  ```html
  <view>
    <simple-poster-wx
      id="poster"
      userInfo="{{ userInfo }}"
      posterData="{{ goodsData }}"
      systemInfo="{{ systemInfo}}"
    />

    <view bind:tap="handleTest">测试</view>
  </view>
  ```

  - index.js
  ```js
  Page({
    data: {
      systemInfo: {
        SDKVersion: '',
        pixelRatio: 2
      },
      userInfo: {
        avatar: 'https://env-00jxgnbpjqmg-static.normal.cloudstatic.cn/avatar.jpeg',
          userName: 'June'
        },
      goodsData: null
    },

    onLoad() {
      // 请求接口获取对应参数 systemInfo和userInfo也一样
      setTimeout(() => {
        this.setData({
          goodsData: {
            title: "2025新款无线蓝牙耳机主动降噪高音质超长续航运动跑步游戏低延迟入耳式春季大优惠",
            price: "88",
            originPrice: "99.99",
            cover: 'https://img.freepik.com/free-photo/3d-view-adorable-pet-cat_23-2150499168.jpg?semt=ais_hybrid&w=750',
            qrcode: 'https://env-00jxgnbpjqmg-static.normal.cloudstatic.cn/avatar.jpeg',
          }
        })
      }, 1000)
    },

    handleTest() {
      this.selectComponent('#poster')?.onOpen();
    }
  })
  ```

#### 注意
+ 请使用2.9.0以上版本的基础库
+ 关于为什么传入systemInfo
  - 考虑到项目一般都会有自己的封装, 减少频繁调用,因此在组件内就不再获取系统信息
  - 获取系统信息基础库问题,我个人使用的都是最新的, 并非`getSystemInfoSync`, 使用传参到组件,这样你个人使用哪个api都不会受影响

#### 效果预览
<img src="./static/draw.png" width="300" height="500">
<img src="./static/save.jpg" width="300" height="500">