更新记录

v0.0.7（2026-01-30） 下载此版本

• 新增小程序原生组件代码
• 优化代码
• 优化文档

v0.0.6（2026-01-24） 下载此版本

• 调整凹半圆坐标

v0.0.5（2026-01-24） 下载此版本

• 抽离公共绘制方法
• 非ts和ts版本工具类处理

平台兼容性

uni-app(4.87)

simple-poster

简介

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

目录说明

• components
  • simple-poster // 非ts版本
  • simple-poster-ts // ts版本
  • simple-poster-wx // 微信小程序原生
• pages
  • index // 示例页面

参数说明

• raduis

• userInfo

• posterData

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

使用说明

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

• 微信小程序

  • index.json

    {
    "simple-poster-wx": "/components/simple-poster-wx/index"
    }

  • index.wxml

    
    <view>
    <simple-poster-wx
    id="poster"
    userInfo="{{ userInfo }}"
    posterData="{{ goodsData }}"
    systemInfo="{{ systemInfo}}"
    />

  测试

  
  - 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都不会受影响