ifanrx 工具库

Appearance

分享海报组件 - mp-share-modal ​

分享海报在项目开发中是一个非常常见的需求，通常我们使用 Painter 来实现海报的绘制。然而，Painter 需要通过 JSON 进行配置，这在布局实现时可能不如 HTML + CSS 那样灵活和便捷，并且除了绘制图片本身，还通常需要搭配弹窗、分享、保存等动作。

因此，我们开发这个组件，快速实现弹窗、根据 HTML + CSS 生成图片、分享或保存等功能。

强烈建议在项目中使用，以确保风格的一致性。

TIP

HTML + CSS 转换 Painter 配置部分我们是基于 Wxml2Json 实现的，通常我们更推荐使用现有组件，只有当现有组件无法满足需求时，才考虑使用 Wxml2Json 自行实现。

基本用法 ​

引入 painter ​

你需要先在项目中引入这个组件，可以拷贝 previewer，然后在 pages.json：

json
"globalStyle": {
  "usingComponents": {
    "painter": "/wxcomponents/painter/painter"
  }
}

使用 mp-share-modal ​

通常我们的分享海报弹窗长这样：

share-modal

这个弹窗可以分为两个部分「海报图片」和「底部按钮」，而「底部按钮」包括分享按钮和保存图片按钮。

通过 visible 属性来控制弹窗的显示状态，而 sheets 属性用于控制底部按钮列表。如果不传入 sheets，则会使用默认的两个按钮。此外，你还可以通过 slot#share-sheet 来自定义底部按钮的渲染方式。

值得注意的是，默认的两个按钮都有内置的逻辑。分享按钮会触发分享操作（使用 open-type=share），而保存按钮会根据 slot 的内容进行绘制，获取图片地址并保存。因此，如果你需要自定义按钮，不管是通过 sheets 还是通过 slot#share-sheet，你需要完全自行实现按钮的逻辑。

vue
<script setup>
import {onShow} from '@dcloudio/uni-app'
import {useToggle} from '@vueuse/core'
import {sleep} from 'licia'
import {onMounted, ref} from 'vue'

const [shareModalVisible, toggleShareModalVisible] = useToggle(false)
const [shareModalVisible1, toggleShareModalVisible1] = useToggle(false)

let shared = false

const CANVAS_WIDTH = ref(250)
const CANVAS_HEIGHT = ref(250)
const percent = 0.7
const canvasImagePath = ref('')

onMounted(() => {
  drawCanvas()
})

async function drawCanvas() {
  const ctx = uni.createCanvasContext('myCanvas')

  ctx.fillStyle = 'rgba(255, 255, 255, 0)'

  // 圆环
  ctx.beginPath()
  ctx.arc(CANVAS_WIDTH.value / 2, CANVAS_HEIGHT.value / 2, 112, 0, 2 * Math.PI)
  ctx.lineWidth = 15
  ctx.lineCap = 'round'
  ctx.strokeStyle = '#eee'
  ctx.stroke()

  // 进度条
  ctx.beginPath()
  ctx.arc(
    CANVAS_WIDTH.value / 2,
    CANVAS_HEIGHT.value / 2,
    112,
    -Math.PI / 2,
    -Math.PI / 2 + percent * (Math.PI * 2),
    false
  )
  ctx.lineWidth = 15
  ctx.lineCap = 'round'
  ctx.strokeStyle = 'rgb(255, 127, 105)'
  ctx.stroke()

  ctx.draw()

  await sleep(300)

  const {tempFilePath} = await uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
    x: 0,
    y: 0,
    width: CANVAS_WIDTH.value,
    height: CANVAS_HEIGHT.value,
  })

  canvasImagePath.value = tempFilePath
}

const onClickSheet = sheet => {
  if (sheet.type === 'share') {
    // eslint-disable-next-line no-console
    console.log('点击分享给好友按钮')

    shared = true
  }
}

onShow(() => {
  if (shared) {
    // eslint-disable-next-line no-console
    console.log('分享给好友成功')
    shared = false
  }
})
</script>

<template>
  <mp-nav-bar title="mp-share-modal"></mp-nav-bar>

  <button @click="toggleShareModalVisible(true)">显示分享弹窗（附加自定义 canvas 内容）</button>
  <button @click="toggleShareModalVisible1(true)">显示分享弹窗（纯图片）</button>

  <mp-share-modal v-model:visible="shareModalVisible" @clickSheet="onClickSheet">
    <!-- 绘制容器，必须 -->
    <view class="draw-container">
      <!-- 绘制节点，必须有 .draw CSS 类名，data-type 必填 -->
      <image
        class="draw share-bg"
        data-type="image"
        data-url="https://cloud-minapp-37888.cloud.ifanrusercontent.com/1r2or2zNZwp1cJJT.png"
        src="https://cloud-minapp-37888.cloud.ifanrusercontent.com/1r2or2zNZwp1cJJT.png"
      />
      <image
        class="draw canvas-image"
        data-type="image"
        :data-url="canvasImagePath"
        :src="canvasImagePath"
      />
    </view>
  </mp-share-modal>

  <mp-share-modal
    v-model:visible="shareModalVisible1"
    containerStyle="border-radius: 10rpx;"
    image="https://cloud-minapp-37888.cloud.ifanrusercontent.com/1r2or2zNZwp1cJJT.png"
    imageStyle="width: 550rpx; height: 1960rpx;"
    @clickSheet="onClickSheet"
  />

  <view>canvas 内容</view>
  <canvas
    id="myCanvas"
    canvas-id="myCanvas"
    class="canvas"
    :class="{hide: shareModalVisible || shareModalVisible1}"
    :style="{
      width: `${CANVAS_HEIGHT}px`,
      height: `${CANVAS_WIDTH}px`,
    }"
  />
</template>

<style scoped>
.draw-container {
  position: relative;
  width: 550rpx;
  height: 960rpx;
}

.share-bg {
  width: 100%;
  height: 100%;
}

.canvas-image {
  position: absolute;
  right: 20rpx;
  bottom: 6rpx;
  width: 180rpx;
  height: 180rpx;
}

.hide {
  position: absolute;
  top: 0;
  left: -200%;
}
</style>

WARNING

需要注意，mp-share-modal 需要在 template 顶层挂载，切勿使用其它标签或组件包裹。

另外，.draw-container 和 .draw 只能写在同一个组件中，例如以下代码会导致图片无法生成：

vue
<!-- act-share.vue 假设项目封装了这个组件 -->
<template>
  <mp-share-modal v-model:visible="shareModalVisible">
    <!-- ❌ 不起作用 -->
    <view class="draw-container">
      <!-- 假设所需绘制节点由外部通过 slot 传入 -->
      <slot />
    </view>

    <!-- ✅ 起作用 -->
    <view class="draw-container">
      <image
        class="draw share-bg"
        data-type="image"
        data-url="https://cloud-minapp-37888.cloud.ifanrusercontent.com/1r2or2zNZwp1cJJT.png"
        src="https://cloud-minapp-37888.cloud.ifanrusercontent.com/1r2or2zNZwp1cJJT.png"
      />
    </view>
  </mp-share-modal>
</template>

这是因为 mp-share-modal 内部依赖 wx.createSelectorQuery，上述代码会导致 context 无法正确获取节点，可能会出现 无效的 selector 报错，请知悉。

自定义操作按钮 ​

查看 《自定义操作按钮》

弹窗展示区域 ​

弹窗的高度根据页面高度 - 状态栏高度和底部菜单栏高度自动调整，保持垂直居中，如图所示：

shareModalHeight

如果海报内容超出这个高度则滚动显示。

相关文档 ​