wxapp-poster 1.0.0

package/README.md

@@ -0,0 +1,239 @@
+# wxapp-poster
+
+一个高度可配置的微信小程序海报生成组件，支持自定义图片、文字、颜色、字体、间距等所有样式。
+
+## 特性
+
+- 🎨 **高度可配置** - 支持自定义所有样式参数
+- 📱 **微信小程序原生组件** - 基于 Component 构建
+- 🖼️ **Canvas 绘制** - 使用 2 倍图提升清晰度
+- 💾 **保存到相册** - 内置保存功能，支持权限处理
+- 📦 **零依赖** - 不依赖任何第三方库
+- 🔧 **低耦合** - 所有配置项均可自定义
+
+## 安装
+
+### 方式一：npm 安装
+
+```bash
+npm install wxapp-poster
+```
+
+### 方式二：通过微信开发者工具
+
+1. 在微信开发者工具中，点击菜单栏 `工具` -> `构建 npm`
+2. 构建完成后，在 `node_modules` 目录下会生成 `wxapp-poster` 目录
+
+## 使用
+
+### 1. 在页面或组件的 json 文件中引入组件
+
+```json
+{
+  "usingComponents": {
+    "poster": "wxapp-poster/poster"
+  }
+}
+```
+
+### 2. 在 wxml 中使用组件
+
+```xml
+<poster 
+  id="poster"
+  background-image="../../static/bg.png"
+  qr-image="../../static/qr.png"
+  primary-text="邀请您一起加入POPO"
+  secondary-text="长按二维码识别"
+  bind:drawcomplete="onDrawComplete"
+  bind:savesuccess="onSaveSuccess"
+  bind:saveerror="onSaveError"
+  bind:error="onError"
+/>
+```
+
+### 3. 在 js 中调用保存方法
+
+```javascript
+Page({
+  // 保存图片
+  saveImage() {
+    const poster = this.selectComponent('#poster');
+    if (poster) {
+      poster.saveImage();
+    }
+  },
+  
+  // 绘制完成事件
+  onDrawComplete(e) {
+    console.log('绘制完成:', e.detail.tempImagePath);
+  },
+  
+  // 保存成功事件
+  onSaveSuccess(e) {
+    console.log('保存成功:', e.detail.tempImagePath);
+  },
+  
+  // 保存失败事件
+  onSaveError(e) {
+    console.log('保存失败:', e.detail);
+  },
+  
+  // 错误事件
+  onError(e) {
+    console.error('组件错误:', e.detail);
+  }
+});
+```
+
+## API
+
+### 属性 (Properties)
+
+#### 内容相关
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| background-image | String | '' | 背景图片路径（必填） |
+| qr-image | String | '' | 二维码图片路径 |
+| primary-text | String | '邀请您一起加入POPO' | 主文本内容 |
+| secondary-text | String | '长按二维码识别' | 次文本内容 |
+
+#### Canvas 相关
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| canvas-background-color | String | '#7e57c2' | Canvas 背景色 |
+| canvas-zoom | Number | 40 | Canvas 缩放比例（用于隐藏 canvas） |
+| image-ratio | Object | {width: 750, height: 1050} | 图片尺寸比例 |
+| white-area-height | Number | 150 | 白色区域高度（rpx） |
+
+#### 颜色配置
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| white-area-background-color | String | '#ffffff' | 白色区域背景色 |
+| primary-text-color | String | '#000000' | 主文本颜色 |
+| secondary-text-color | String | '#9C9C9C' | 次文本颜色 |
+
+#### 字体配置
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| primary-text-size | Number | 28 | 主文本字体大小（rpx） |
+| secondary-text-size | Number | 24 | 次文本字体大小（rpx） |
+| line-spacing-ratio | Number | 0.3 | 行间距比例（相对于次文本字体大小） |
+
+#### 间距配置
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| left-padding | Number | 30 | 左边距（rpx） |
+| right-padding | Number | 30 | 右边距（rpx） |
+| qr-size-ratio | Number | 0.8 | 二维码大小比例（0-1 之间） |
+
+#### 提示信息配置
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| loading-text | String | '图片生成中，请稍候' | 图片生成中提示 |
+| image-load-error-text | String | '图片加载失败' | 图片加载失败提示 |
+| permission-modal-title | String | '提示' | 权限提示标题 |
+| permission-modal-content | String | '需要您授权保存相册权限' | 权限提示内容 |
+| permission-modal-confirm-text | String | '去设置' | 权限设置按钮文字 |
+| need-permission-text | String | '需要相册权限' | 需要权限提示 |
+| save-success-text | String | '保存成功' | 保存成功提示 |
+| save-error-text | String | '保存失败' | 保存失败提示 |
+
+### 方法 (Methods)
+
+#### saveImage()
+
+保存图片到相册。需要在页面中通过 `selectComponent` 获取组件实例后调用。
+
+```javascript
+const poster = this.selectComponent('#poster');
+poster.saveImage();
+```
+
+### 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| drawcomplete | 绘制完成 | { tempImagePath } |
+| savesuccess | 保存成功 | { tempImagePath } |
+| saveerror | 保存失败 | { err, message } |
+| error | 组件错误 | { err } |
+
+## 完整示例
+
+```xml
+<!-- index.wxml -->
+<view class="container">
+  <poster 
+    id="poster"
+    background-image="{{backgroundImage}}"
+    qr-image="{{qrImage}}"
+    primary-text="{{primaryText}}"
+    secondary-text="{{secondaryText}}"
+    canvas-background-color="#ff0000"
+    primary-text-color="#333333"
+    primary-text-size="32"
+    bind:drawcomplete="onDrawComplete"
+    bind:savesuccess="onSaveSuccess"
+  />
+  
+  <button bindtap="saveImage">保存图片</button>
+</view>
+```
+
+```javascript
+// index.js
+Page({
+  data: {
+    backgroundImage: '../../static/bg.png',
+    qrImage: '../../static/qr.png',
+    primaryText: '邀请您一起加入',
+    secondaryText: '长按二维码识别'
+  },
+  
+  saveImage() {
+    const poster = this.selectComponent('#poster');
+    if (poster) {
+      poster.saveImage();
+    }
+  },
+  
+  onDrawComplete(e) {
+    console.log('绘制完成，临时路径:', e.detail.tempImagePath);
+  },
+  
+  onSaveSuccess(e) {
+    console.log('保存成功，临时路径:', e.detail.tempImagePath);
+  }
+});
+```
+
+## 注意事项
+
+1. **图片路径**：建议使用网络图片或本地绝对路径，相对路径可能在某些情况下无法正常加载
+2. **权限处理**：组件会自动处理相册保存权限，首次使用会弹出授权提示
+3. **Canvas 限制**：由于微信小程序的限制，Canvas 会被隐藏（通过 zoom 属性），实际绘制在后台完成
+4. **图片尺寸**：默认图片比例为 750:1050，可通过 `image-ratio` 属性自定义
+
+## 更新日志
+
+### 1.0.0
+
+- 初始版本发布
+- 支持自定义所有样式参数
+- 支持保存图片到相册
+- 完整的事件回调支持
+
+## 许可证
+
+MIT
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "wxapp-poster",
+  "version": "1.0.0",
+  "description": "一个高度可配置的微信小程序海报生成组件，支持自定义图片、文字、颜色、字体、间距等所有样式",
+  "main": "poster.js",
+  "miniprogram": ".",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "wechat",
+    "miniprogram",
+    "weixin",
+    "poster",
+    "canvas",
+    "海报",
+    "小程序",
+    "微信小程序"
+  ],
+  "author": "joie_pink <cassieye20190909@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cassie-ye/wxapp-download-post.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cassie-ye/wxapp-download-post/issues"
+  },
+  "homepage": "https://github.com/cassie-ye/wxapp-download-post#readme",
+  "files": [
+    "poster.js",
+    "poster.wxml",
+    "poster.wxss",
+    "poster.json",
+    "README.md"
+  ]
+}

package/poster.js

@@ -0,0 +1,490 @@
+/**
+ * 海报生成组件
+ * 
+ * @description 一个高度可配置的海报生成组件，支持自定义图片、文字、颜色、字体、间距等所有样式
+ * 
+ * @example
+ * // 基础使用
+ * <poster 
+ *   background-image="../../static/bg.png"
+ *   qr-image="../../static/qr.png"
+ *   primary-text="邀请您一起加入"
+ *   secondary-text="长按二维码识别"
+ * />
+ * 
+ * @example
+ * // 自定义样式
+ * <poster 
+ *   background-image="../../static/bg.png"
+ *   qr-image="../../static/qr.png"
+ *   primary-text="自定义标题"
+ *   secondary-text="自定义副标题"
+ *   canvas-background-color="#ff0000"
+ *   primary-text-color="#333333"
+ *   primary-text-size="32"
+ * />
+ * 
+ * @example
+ * // 调用保存方法
+ * const poster = this.selectComponent('#poster');
+ * poster.saveImage();
+ * 
+ * @events
+ * - drawcomplete: 绘制完成事件，返回 { tempImagePath }
+ * - savesuccess: 保存成功事件，返回 { tempImagePath }
+ * - saveerror: 保存失败事件，返回 { err, message }
+ * - error: 错误事件，返回 { err }
+ */
+// components/poster/poster.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // ========== 内容相关 ==========
+    // 背景图片
+    backgroundImage: {
+      type: String,
+      value: ''
+    },
+    // 二维码图片
+    qrImage: {
+      type: String,
+      value: ''
+    },
+    // 主文本
+    primaryText: {
+      type: String,
+      value: '邀请您一起加入POPO'
+    },
+    // 次文本
+    secondaryText: {
+      type: String,
+      value: '长按二维码识别'
+    },
+    
+    // ========== Canvas相关 ==========
+    // Canvas背景色
+    canvasBackgroundColor: {
+      type: String,
+      value: '#7e57c2'
+    },
+    // Canvas缩放比例（用于隐藏canvas，不影响实际尺寸）
+    canvasZoom: {
+      type: Number,
+      value: 40
+    },
+    // 图片尺寸比例（宽:高），默认 750:1050
+    imageRatio: {
+      type: Object,
+      value: {
+        width: 750,
+        height: 1050
+      }
+    },
+    // 白色区域高度（rpx单位，会被转换为px）
+    whiteAreaHeight: {
+      type: Number,
+      value: 150
+    },
+    
+    // ========== 颜色配置 ==========
+    // 白色区域背景色
+    whiteAreaBackgroundColor: {
+      type: String,
+      value: '#ffffff'
+    },
+    // 主文本颜色
+    primaryTextColor: {
+      type: String,
+      value: '#000000'
+    },
+    // 次文本颜色
+    secondaryTextColor: {
+      type: String,
+      value: '#9C9C9C'
+    },
+    
+    // ========== 字体配置 ==========
+    // 主文本字体大小（rpx单位）
+    primaryTextSize: {
+      type: Number,
+      value: 28
+    },
+    // 次文本字体大小（rpx单位）
+    secondaryTextSize: {
+      type: Number,
+      value: 24
+    },
+    // 行间距比例（相对于次文本字体大小的倍数）
+    lineSpacingRatio: {
+      type: Number,
+      value: 0.3
+    },
+    
+    // ========== 间距配置 ==========
+    // 左边距（rpx单位）
+    leftPadding: {
+      type: Number,
+      value: 30
+    },
+    // 右边距（rpx单位）
+    rightPadding: {
+      type: Number,
+      value: 30
+    },
+    // 二维码大小比例（相对于白色区域高度的比例，0-1之间）
+    qrSizeRatio: {
+      type: Number,
+      value: 0.8
+    },
+    
+    // ========== 提示信息配置 ==========
+    // 图片生成中的提示
+    loadingText: {
+      type: String,
+      value: '图片生成中，请稍候'
+    },
+    // 图片加载失败提示
+    imageLoadErrorText: {
+      type: String,
+      value: '图片加载失败'
+    },
+    // 需要相册权限提示标题
+    permissionModalTitle: {
+      type: String,
+      value: '提示'
+    },
+    // 需要相册权限提示内容
+    permissionModalContent: {
+      type: String,
+      value: '需要您授权保存相册权限'
+    },
+    // 权限设置按钮文字
+    permissionModalConfirmText: {
+      type: String,
+      value: '去设置'
+    },
+    // 需要相册权限Toast提示
+    needPermissionText: {
+      type: String,
+      value: '需要相册权限'
+    },
+    // 保存成功提示
+    saveSuccessText: {
+      type: String,
+      value: '保存成功'
+    },
+    // 保存失败提示
+    saveErrorText: {
+      type: String,
+      value: '保存失败'
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    photoWidth: 0, // canvas实际宽度（2倍图）
+    photoHeight: 0, // canvas实际高度（2倍图）
+    screenHeight: 0,
+    tempImagePath: '', // 保存临时图片路径
+  },
+
+  /**
+   * 组件生命周期
+   */
+  lifetimes: {
+    attached() {
+      // 组件实例进入页面节点树时执行
+      this.initCanvas();
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * 初始化Canvas
+     */
+    initCanvas() {
+      let that = this;
+      wx.getSystemInfo({
+        success: (res) => {
+          const { imageRatio, whiteAreaHeight } = that.properties;
+          // 使用2倍canvas提升清晰度
+          const canvasWidth = res.screenWidth * 2; // 2倍图宽度
+          // 根据配置的图片比例计算高度
+          const imageAreaHeight = canvasWidth * imageRatio.height / imageRatio.width;
+          // 白色区域高度转换为px（2倍图）
+          const whiteAreaHeightPx = whiteAreaHeight * canvasWidth / res.screenHeight * 2;
+          const canvasHeight = imageAreaHeight + whiteAreaHeightPx;
+          
+          that.setData({
+            screenHeight: res.screenHeight,
+            photoWidth: canvasWidth, // canvas实际宽度（2倍图）
+            photoHeight: canvasHeight, // canvas实际高度（2倍图）
+          });
+          // 初始化完成后绘制
+          that.draw();
+        }
+      });
+    },
+
+    /**
+     * 绘制Canvas
+     */
+    draw() {
+      let that = this;
+      const { 
+        backgroundImage, 
+        qrImage, 
+        primaryText, 
+        secondaryText,
+        canvasBackgroundColor,
+        imageRatio,
+        whiteAreaHeight,
+        whiteAreaBackgroundColor,
+        primaryTextColor,
+        secondaryTextColor,
+        primaryTextSize,
+        secondaryTextSize,
+        lineSpacingRatio,
+        leftPadding,
+        rightPadding,
+        qrSizeRatio,
+        imageLoadErrorText
+      } = this.properties;
+      
+      if (!backgroundImage) {
+        console.warn('背景图片未设置');
+        return;
+      }
+
+      // 获取图片信息
+      wx.getImageInfo({
+        src: backgroundImage,
+        success: (imageRes) => {
+          let ctx = wx.createCanvasContext('canvasPoster', that);
+
+          // 获取Canvas尺寸（2倍图）
+          let canvasWidth = that.data.photoWidth;
+          let canvasHeight = that.data.photoHeight;
+
+          // 绘制Canvas背景
+          ctx.setFillStyle(canvasBackgroundColor);
+          ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+          // 计算图片区域高度
+          const imageAreaHeight = canvasWidth * imageRatio.height / imageRatio.width;
+          // 白色区域高度转换为px（2倍图）
+          const whiteAreaHeightPx = whiteAreaHeight * canvasWidth / this.data.screenHeight * 2;
+
+          // 绘制背景图片
+          ctx.drawImage(backgroundImage, 0, 0, canvasWidth, imageAreaHeight);
+
+          // 绘制白色区域
+          ctx.setFillStyle(whiteAreaBackgroundColor);
+          ctx.fillRect(0, imageAreaHeight, canvasWidth, whiteAreaHeightPx);
+
+          // 绘制文字
+          // 根据photoWidth（2倍图宽度）计算：rpx转px公式
+          // 原逻辑：28rpx -> 36 * canvasWidth / 750, 24rpx -> 32 * canvasWidth / 750
+          // 转换系数：主文本 36/28 ≈ 1.286, 次文本 32/24 ≈ 1.333
+          const primaryTextRatio = 36 / 28; // 保持与原逻辑一致的转换系数
+          const secondaryTextRatio = 32 / 24;
+          const fontSize1 = primaryTextSize * primaryTextRatio * canvasWidth / 750; // 主文本2倍图px值
+          const fontSize2 = secondaryTextSize * secondaryTextRatio * canvasWidth / 750; // 次文本2倍图px值
+          const leftPaddingPx = leftPadding * canvasWidth / 750; // 左边距2倍图px值
+
+          // 计算白色区域信息
+          const whiteAreaStartY = imageAreaHeight;
+          const whiteAreaCenterY = whiteAreaStartY + whiteAreaHeightPx / 2;
+
+          // 计算行间距
+          const lineSpacing = fontSize2 * lineSpacingRatio;
+          // 计算两行文字的总高度
+          const totalTextHeight = fontSize1 + lineSpacing + fontSize2;
+
+          // 计算第一行文字的y坐标（垂直居中）
+          // fillText的y坐标是基线位置，所以需要加上字体大小
+          const firstLineY = whiteAreaCenterY - totalTextHeight / 2 + fontSize1;
+          // 计算第二行文字的y坐标
+          const secondLineY = firstLineY + fontSize1 + lineSpacing;
+
+          // 绘制第一行文字（左对齐）
+          ctx.setFontSize(fontSize1);
+          ctx.setFillStyle(primaryTextColor);
+          ctx.setTextAlign('left');
+          ctx.fillText(primaryText, leftPaddingPx, firstLineY);
+
+          // 绘制第二行文字（左对齐）
+          ctx.setFontSize(fontSize2);
+          ctx.setFillStyle(secondaryTextColor);
+          ctx.setTextAlign('left');
+          ctx.fillText(secondaryText, leftPaddingPx, secondLineY);
+
+          // 绘制小程序码
+          if (qrImage) {
+            // 先获取二维码图片信息
+            wx.getImageInfo({
+              src: qrImage,
+              success: (qrRes) => {
+                // 计算二维码尺寸（正方形，根据配置的比例）
+                const qrSize = whiteAreaHeightPx * qrSizeRatio;
+                // 计算x坐标：距离右边
+                const rightPaddingPx = rightPadding * canvasWidth / 750; // 右边距2倍图px值
+                const qrX = canvasWidth - rightPaddingPx - qrSize;
+                // 计算y坐标：垂直居中
+                const qrY = whiteAreaCenterY - qrSize / 2;
+                
+                // 绘制二维码（正方形）
+                ctx.drawImage(qrImage, qrX, qrY, qrSize, qrSize);
+                
+                // 绘制所有内容（包括二维码）
+                that.drawCanvas(ctx, canvasWidth, canvasHeight);
+              },
+              fail: (err) => {
+                console.error('获取二维码图片失败:', err);
+                // 即使二维码加载失败，也继续绘制其他内容
+                that.drawCanvas(ctx, canvasWidth, canvasHeight);
+              }
+            });
+          } else {
+            // 没有二维码，直接绘制其他内容
+            that.drawCanvas(ctx, canvasWidth, canvasHeight);
+          }
+        },
+        fail: (err) => {
+          console.error('获取图片信息失败:', err);
+          wx.showToast({
+            title: imageLoadErrorText,
+            icon: 'none'
+          });
+          // 触发错误事件
+          that.triggerEvent('error', { err });
+        }
+      });
+    },
+
+    /**
+     * 绘制canvas并保存
+     */
+    drawCanvas(ctx, canvasWidth, canvasHeight) {
+      let that = this;
+      ctx.draw(true, () => {
+        //然后生成一个保存用的临时地址, 因为安卓机兼容问题, 所以方法要延迟.
+        setTimeout(() => {
+          wx.canvasToTempFilePath({
+            canvasId: 'canvasPoster',
+            x: 0,
+            y: 0,
+            width: canvasWidth,
+            height: canvasHeight,
+            destWidth: canvasWidth,
+            destHeight: canvasHeight,
+            success: res => {
+              let path = res.tempFilePath; //获取到了临时地址
+              // 保存临时路径，供按钮点击时使用
+              that.setData({
+                tempImagePath: path
+              });
+              // 触发绘制完成事件
+              that.triggerEvent('drawcomplete', { tempImagePath: path });
+            },
+            fail: (err) => {
+              console.error('生成临时图片失败:', err);
+              that.triggerEvent('error', { err });
+            }
+          }, that); //新版小程序不加this不会执行
+        }, 200);
+      });
+    },
+
+    /**
+     * 保存图片到相册
+     * 暴露给外部调用的方法
+     */
+    saveImage() {
+      const { loadingText, permissionModalTitle, permissionModalContent, permissionModalConfirmText, needPermissionText } = this.properties;
+      
+      if (!this.data.tempImagePath) {
+        wx.showToast({
+          title: loadingText,
+          icon: 'none'
+        });
+        // 触发事件通知父组件
+        this.triggerEvent('saveerror', { message: loadingText });
+        return;
+      }
+
+      // 检查授权
+      wx.getSetting({
+        success: (res) => {
+          if (res.authSetting['scope.writePhotosAlbum']) {
+            // 已授权，直接保存
+            this.doSaveImage();
+          } else if (res.authSetting['scope.writePhotosAlbum'] === false) {
+            // 已拒绝授权，引导用户开启
+            wx.showModal({
+              title: permissionModalTitle,
+              content: permissionModalContent,
+              showCancel: true,
+              confirmText: permissionModalConfirmText,
+              success: (modalRes) => {
+                if (modalRes.confirm) {
+                  wx.openSetting();
+                }
+              }
+            });
+          } else {
+            // 未授权，请求授权
+            wx.authorize({
+              scope: 'scope.writePhotosAlbum',
+              success: () => {
+                this.doSaveImage();
+              },
+              fail: () => {
+                wx.showToast({
+                  title: needPermissionText,
+                  icon: 'none'
+                });
+                this.triggerEvent('saveerror', { message: needPermissionText });
+              }
+            });
+          }
+        }
+      });
+    },
+
+    /**
+     * 执行保存图片
+     */
+    doSaveImage() {
+      const { saveSuccessText, saveErrorText } = this.properties;
+      
+      wx.saveImageToPhotosAlbum({
+        filePath: this.data.tempImagePath,
+        success: () => {
+          wx.showToast({
+            title: saveSuccessText,
+            icon: 'success'
+          });
+          // 触发保存成功事件
+          this.triggerEvent('savesuccess', { tempImagePath: this.data.tempImagePath });
+        },
+        fail: (err) => {
+          wx.showToast({
+            title: saveErrorText,
+            icon: 'none'
+          });
+          console.error('保存图片失败:', err);
+          // 触发保存失败事件
+          this.triggerEvent('saveerror', { err });
+        }
+      });
+    }
+  }
+});

package/poster.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/poster.wxml

@@ -0,0 +1,16 @@
+<!-- components/poster/poster.wxml -->
+<view class="poster">
+    <canvas class="poster__canvas" canvas-id="canvasPoster" style="width:{{photoWidth}}px;height:{{photoHeight}}px;zoom:{{canvasZoom}}%"></canvas>
+    <view class="poster__image-container">
+        <image class="poster__image-container-image" src="{{backgroundImage}}"></image>
+        <view class="poster__white-area">
+            <view class="poster__white-area-left">
+                <view class="poster__text poster__text--primary">{{primaryText}}</view>
+                <view class="poster__text poster__text--secondary">{{secondaryText}}</view>
+            </view>
+            <view class="poster__white-area-right">
+                <image class="poster__qr-image" src="{{qrImage}}" />
+            </view>
+        </view>
+    </view>
+</view>

package/poster.wxss

@@ -0,0 +1,77 @@
+/* components/poster/poster.wxss - BEM风格 */
+
+.poster {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx;
+  position: relative;
+}
+
+/* Element: Canvas海报 */
+.poster__canvas {
+  position: absolute;
+  left: 99999rpx;
+  top: 0rpx;
+}
+
+/* Element: 图片容器 */
+.poster__image-container {
+  width: 600rpx;
+  height: 1025rpx;
+  margin: 0 auto;
+  margin-top: 50rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+/* Element: 主图片 */
+.poster__image-container-image {
+  width: 100%;
+  height: 820rpx;
+}
+
+/* Element: 白色区域 */
+.poster__white-area {
+  width: 600rpx;
+  height: 205rpx;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Element: 左侧文字区域 */
+.poster__white-area-left {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Element: 右侧二维码区域 */
+.poster__white-area-right {
+  display: flex;
+  align-items: center;
+  margin-right: 30rpx;
+}
+
+/* Element: 文字 */
+.poster__text {
+  padding-left: 30rpx;
+}
+
+.poster__text--primary {
+  font-size: 28rpx;
+  color: #000000;
+}
+
+.poster__text--secondary {
+  font-size: 24rpx;
+  color: #9c9c9c;
+}
+
+/* Element: 二维码图片 */
+.poster__qr-image {
+  width: 120rpx;
+  height: 120rpx;
+}